p5.js——开启码绘自画像

第一步：粗糙打稿

最初的线稿是用ipad打的，比较粗糙，没有上色

将线稿导入p5.js

根据线稿转化成较为简单的图形，一层一层叠加，并上色，完成静态图像

代码

function setup() {
  createCanvas(500, 500);
  rectMode(CENTER);
}

function draw() {
  background(204,86,86);
  //头
  push();
  fill(0);
  rect(250,105,80,90,5,5,5,5);
  fill(254,235,222);
  rect(250,150,30,20);
  arc(250, 105, 70, 80, 3*PI / 2, 3 * PI / 2, OPEN);
  fill(0);
  rect(250,75,70,40,5,5,5,5);
  noFill();
  arc(236, 108, 15, 8, 0, -6*PI / 2, OPEN);
  arc(265, 108, 15, 8, 0, -6*PI / 2, OPEN);
  fill(245,139,112);
  arc(252, 130, 15, 8, 0, -6*PI / 2, CHORD);
  pop();

  //身
  push();
  noStroke();
  fill(252,195,157);
  arc(250,280,300,250,2*PI/2,4*PI/2,OPEN);
  fill(204,86,86);
  arc(250,280,200,200,2*PI/2,4*PI/2,OPEN);
  fill(252,195,157);
  rect(250,220,110,120,20,20,0,0);
  fill(0);
  stroke(250);
  strokeWeight(7);
  line(198,250, 285, 162);
  line(198,165,250,195);
  pop();
    
  //琴
  push();
  fill(144,84,44);
  rect(250,350,440,150);
  noStroke();
  fill(65,38,20);
  arc(20,320,120,85,PI/2,3*PI/2,OPEN);
  arc(440,320,40,90,3*PI/2,PI/2,OPEN);
  rect(230,320,420,90);
  fill(0);
  rect(40,320,20,70);
  fill(255);
  rect(250,310,420,1);
  rect(250,320,420,1);
  rect(249,300,420,1);
  rect(247,290,415,1);
  rect(250,330,420,1);
  rect(249,340,420,1);
  rect(247,350,415,1);
  pop();
  
  //手
  push();
  noStroke();
  fill(254,235,222);
  rect(128,294,30,40);
  ellipse(128,300,45,50);
  rect(375,294,30,40);
  ellipse(375,300,45,50);
  pop();
  
  //书
  push();
  fill(254,242,239);
  rect(250,420,150,110);
  fill(0);
  line(250,475,250,360);
  line(190,420,245,420);
  line(190,410,245,410);
  line(190,400,245,400);
  line(190,390,245,390);
  line(190,460,245,460);
  line(190,450,245,450);
  line(190,440,245,440);
  line(190,430,245,430);
  line(310,460,255,460);
  line(310,450,255,450);
  line(310,440,255,440);
  line(310,430,255,430);
  line(310,420,255,420);
  line(310,410,255,410);
  line(310,400,255,400);
  line(310,390,255,390);
  pop();
}

动态效果

现在完成了静态图像的绘制，现在我们要加入动态元素，我的设想是让图中人物的手动起来，营造正在弹琴的效果

人物的手会根据鼠标移动而移动

动态代码

///动态手
function movehands(){
  var deltax=(mouseX-250)/250*7.5;
  var deltay=(mouseY-150)/350*7.5;
  
  noStroke();
  fill(254,235,222);
  rect(128+deltax,294,30,40);
  ellipse(128+deltax,300+deltay,45,50);
  rect(375+deltax,294,30,40);
  ellipse(375+deltax,300+deltay,45,50);
  
}

整个自画像就大功告成啦！