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

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

第一步：粗糙打稿将线稿导入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); }

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