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);
}
整个自画像就大功告成啦!