【JS】创意编程2-自画像

实现的效果如下图：

一开始先是对人物的构造：

function person(){

  fill(205,170,125);//头

  rect(250,130,120,90,80);

  rect(250, 170, 120, 70);

  circle(305,170,30)//耳朵

  circle(190,170,30)

  rect(250, 220, 40, 40);

  rect(250,200,120,90,80);

  fill(209,51,26);//嘴巴

  ellipse(250,200,30,10);

  fill(78,79,79);

  triangle(200,126,230,128,230,134);//眉毛

  triangle(300,126,270,128,270,134);

  fill(0 ,0, 0);//眼睛

  ellipse(220,150,10,5);

  ellipse(280,150,10,5);

  circle(250,175,5);//鼻子

    fill(0,0,0);//身体

    rect(250, 340, 105, 155, 50);

    fill(205,170,125);//脖子

    rect(250,255,20,20);

    handsmove();

    fill(0,0,0);//腿

    rect(220,435,20,80);

    rect(280,435,20,80);

    fill(100,100,200)//feet

    circle(220,490,30)

    circle(280,490,30)

  fill(0,0,0);//发型

    beginShape();

    vertex(265, 105);

    vertex(315, 130);

    vertex(310, 105);

    endShape(CLOSE);

    fill(0,0,0);

    beginShape();

    vertex(265,105);

    vertex(250,130);

    vertex(255,105);

    endShape(CLOSE);

    fill(0,0,0);

    vertex(255,105);

    vertex(220,130);

    vertex(240,105);

    endShape(CLOSE);

    fill(0,0,0);

    vertex(240,105);

    vertex(200,135);

    vertex(210,105);

    endShape(CLOSE);

    fill(0,0,0);

    vertex(240,105);

    vertex(185,135);

    vertex(195,105);

    endShape(CLOSE);

    fill(0,0,0);

    vertex(195,105);

    vertex(210,85);

    vertex(265,75);

    vertex(310,105);

    endShape(CLOSE);

}

人物的造型主要是利用一些简单的图形将一个人物的样子给“拼接“出来。

然后就是加上一些简单的交互和动态的场景，这里我做的是一个模仿雪花飘落的场景

具体的代码实现如下：

  //雪花

fill(255,255,255)

    let t = frameCount / 60;

  for (var i = 0; i < random(5); i++) {

    snowflakes.push(new snowflake());

  }

  for (let flake of snowflakes) {

    flake.update(t);

    flake.display();

  }

function snowflow() {

  this.posX = 0;

  this.posY = random(-50, 0);

  this.initialangle = random(0, 2 * PI);

  this.size = random(2, 5);

  this.radius = sqrt(random(pow(width / 2, 2)));

  this.update = function(time) {

    let w = 0.6;

    let angle = w * time + this.initialangle;

    this.posX = width / 2 + this.radius * sin(angle);

    this.posY += pow(this.size, 0.5);

    if (this.posY > height) {

      let index = snowflow.indexOf(this);

      snowflow.splice(index, 1);

    }

  };

  this.display = function() {

    ellipse(this.posX, this.posY, this.size);

  };

最后就是对于人物的一个简单交互，这里我是用一个简单的鼠标控制人物的手上下的移动

function handsmove(){

  var deltax=(mouseX-250)/250*22.5;

  var deltay=(mouseY-150)/350*22.5;

  fill(205,170,125);

  circle(318,330+deltay,30)//手

  circle(183,330+deltay,30)

}