用p5.js画一幅自画像

最新推荐文章于 2019-11-04 20:08:18 发布

原创最新推荐文章于 2019-11-04 20:08:18 发布 · 4.3k 阅读

5 ·

CC 4.0 BY-SA版权

用p5.js画一幅自画像

首先来看一下成品~
在这里插入图片描述
鼠标左键点击图像会出现动态背景，再点击又会消失，如下图：

这幅画没有太大的难度，唯一需要动脑筋的地方是繁琐的坐标计算和动态背景，人物的绘制主要是由三角形、四边形、椭圆构成的，下面是代码：

人物绘制代码：

function setup() {
  createCanvas(600, 550);
}
function draw() {
  background(173, 216 ,230);
  ellipse(300,250,50,260);
  ellipse(275,250,50,260);
  ellipse(247,265,50,250);
  ellipse(325,250,50,260);
  ellipse(353,265,50,250);
  
  //头
  fill(255,248, 220);
  ellipse(300,200,125,150);
  //高
  fill(255);
  ellipse(320,150,10,20);
  //腮红
  fill(255, 218, 185);
  ellipse(268,225,30,15);
  ellipse(334,225,30,15);
   //眼镜
  stroke(0);
  strokeWeight(3);
  noFill();
  ellipse(268,200,42,42);
  ellipse(332,200,42,42);
  line(289,200,311,200);
  line(247,200,235,195);
  line(353,200,365,195);
  //刘海
  noStroke();
  fill(40);
  arc(300, 178, 140,130, PI, 0);
  fill(255,248, 220);
  triangle(295,178,305,178,300,155);
  triangle(255,178,265,178,265,160);
  triangle(335,178,345,178,335,160);
   //眼睛
  fill(50);
  ellipse(268,200,30,27);
  ellipse(332,200,30,27);
  fill(255);
  ellipse(270,200,10,10);
  ellipse(334,200,10,10);
  //鼻子
  fill(238, 213, 183);
  ellipse(300,230,5,5);
  //嘴
  fill(50);
  arc(300, 245, 40,30, 0, PI,PIE);
  fill(255, 160 ,122);
  arc(300, 257, 25,23, PI, 0,PIE);
  arc(300, 257, 23,7, 0,PI,PIE);
  //脖子
  fill(255,248, 220);
  rect(285,270,30,15);
  //手
  quad(235,385,265,430,275,390,260,390);
  quad(365,385,335,430,305,390,340,390);
  //衣服
  fill(255, 255, 240);
  quad(285,285,255,290,230,385,265,395);
  quad(315,285,345,290,370,385,325,395);
  quad(285,285,250,430,350,430,315,285);  
  //裙子
  fill(50);
  quad(250,430,240,480,360,480,350,430);
  stroke(255);
  strokeWeight(5);
  line(243,465,357,465);
  //领带
  noStroke();
  fill(139, 121, 94);
  quad(285,285,295,300,305,300,315,285);
  quad(295,300,290,360,310,360,305,300);
  triangle(290,360,300,370,310,360);
  //腿
  fill(255,248, 220);
  rect(270,480,20,90);
  rect(310,480,20,90);
  //花朵
  ellipse(350,160,10,20)
  ellipse(350,140,10,20)
  ellipse(340,150,20,10)
  ellipse(360,150,20,10)
  fill(255, 218 ,185);
  ellipse(350,150,15,15);
}

介绍一下主要用到的函数：

stroke()——设置形状的外形线色，颜色用RGB定义
noStroke()——禁用形状的外形线色
quad(x1,y1,x2,y2,x3,y3,x4,y4)——绘制任意的四边形，四个坐标表示四个点
arc(x, y, w,h, start,stop)——绘制一个弧形

动态背景绘制代码：

var show=1;
var x=-30;
var y=-30;
var t=0;
function draw() {
  background(173, 216 ,230);
    if(show%2==0)
  {
    for(var i=0;i<20;i++)
    {
      for(var j=0;j<20;j++)
      {
        fill(255,248, 220);
        ellipse(x+i*70+t,y+10+t+j*70,10,20)
        ellipse(x+i*70+t,y-10+t+j*70,10,20)
        ellipse(x-10+i*70+t,y+t+j*70,20,10)
        ellipse(x+10+i*70+t,y+t+j*70,20,10)
        fill(255, 218 ,185);
        ellipse(x+i*70+t,y+t+j*70,15,15);
      }
    
    t+=0.1;
      if(y+t+10>50)
        t=0;
    }
  }
}
function mouseReleased()
{
  show++；
}