p5.js自画像

本文记录了一件使用p5.js的编程创意作品的创作过程，具象化地描绘自己的形象，实现了简单的动态交互效果。步骤包括绘制画像、添加动态效果、交互效果。

绘制画像

通过坐标等的计算，运用各种函数绘制几何图形，完成画像的绘制。
包括：
ellipse() 圆的绘制
curve() arc() curvePoint() 弧的绘制
curveTangent() 切线的绘制
atan2() 角度的计算
line() 直线的绘制
rect() 矩形的绘制
quad() 四边形的绘制
triangle() 三角形的绘制

fill() noFill()为设置填充颜色以及无填充色
strokeWeight()表示设置线宽
strokeCap(ROUND)表示设置线条端点处为圆形

详细教程：reference | p5.js

1、创建画板，填充背景：

function setup() {createCanvas(400, 600);//创建画板
}function draw() {  background(34, 34, 34);//填充背景
}

2、头发：

function draw() {fill(0);ellipse(130,250,60,100);ellipse(270,250,60,100);strokeWeight(0);fill(34, 34, 34);ellipse(110,250,60,100);ellipse(290,250,60,100);strokeWeight(4);  fill(0);ellipse(200,200,170,210);  strokeWeight(0);fill(34, 34, 34);ellipse(200,230,100,200);fill(0);ellipse(135,260,30,50);ellipse(160,260,30,50);ellipse(265,260,30,50);ellipse(240,260,30,50);fill(0);arc(140, 125, 130, 100, 0, 3*PI/5);arc(260, 125, 130, 100, 2*PI/5, PI);}

3、脸部：

function draw(){//脸strokeWeight(4); fill(254, 242, 240);ellipse(200,200,130,150);//眉毛strokeCap(ROUND);strokeWeight(3);noFill();curve(175, 200, 150, 175, 185, 175, 185, 220);curve(225, 200, 250, 175, 215, 175, 215, 220);//眼睑strokeWeight(2);arc(168, 203, 60, 40, PI + QUARTER_PI, TWO_PI -  QUARTER_PI);arc(169, 193, 45, 30, QUARTER_PI, PI -  QUARTER_PI);arc(232, 203, 60, 40, PI + QUARTER_PI, TWO_PI -  QUARTER_PI);arc(231, 193, 45, 30, QUARTER_PI, PI -  QUARTER_PI);//眼睛fill(0);ellipse(169,195,10,14);arc(168, 195, 24, 36, PI + HALF_PI + QUARTER_PI, TWO_PI +  QUARTER_PI);arc(170, 195, 24, 36, HALF_PI + QUARTER_PI, PI +  QUARTER_PI);ellipse(231,195,10,14);arc(230, 195, 24, 36, PI + HALF_PI + QUARTER_PI, TWO_PI +  QUARTER_PI);arc(232, 195, 24, 36, HALF_PI + QUARTER_PI, PI +  QUARTER_PI);//睫毛let steps = 6;for (let i = 0; i < steps; i++) {let t = i / steps;let x1 = curvePoint(175, 155, 185, 185, t);let y1 = curvePoint(250, 188, 190, 250, t);let tx1 = curveTangent(175, 155, 185, 185, t);let ty1 = curveTangent(250, 188, 190, 250, t);let a1 = atan2(ty1, tx1);a1 -= PI / 2.0;line(x1, y1, cos(a1) * 5 + x1, sin(a1) * 5 + y1);let x2 = curvePoint(225, 245, 215, 215, t);let y2 = curvePoint(250, 188, 190, 250, t);let tx2 = curveTangent(225, 245, 215, 215, t);let ty2 = curveTangent(250, 188, 190, 250, t);let a2 = atan2(ty2, tx2);a2 += PI / 2.0;line(x2, y2, cos(a2) * 5 + x2, sin(a2) * 5 + y2);}//眼镜noFill();rect(140, 177, 53, 35, 10);rect(207, 177, 53, 35, 10);line(140,190,133,180);line(260,190,267,180);arc(200, 210, 40, 30, PI + QUARTER_PI, TWO_PI -  QUARTER_PI);//嘴巴line(190,245,210,245);arc(200, 235, 30, 30, QUARTER_PI, PI -  QUARTER_PI);}

4、脖子：

function draw(){fill(254, 242, 240);strokeWeight(0);ellipse(200,285,40,50);ellipse(200,310,35,40);fill(34,34,34);strokeWeight(3);arc(170, 285, 30, 50, - QUARTER_PI, QUARTER_PI);arc(230, 285, 30, 50, PI - QUARTER_PI, PI + QUARTER_PI);}

5、上衣：

function draw(){fill(230,230,210);strokeWeight(3);rect(110,345,30,120,0,0,30,30); rect(260,345,30,120,0,0,30,30);rect(135,300,130,150,20,20,0,0);arc(150, 351, 80, 100, PI , PI + HALF_PI);arc(250, 351, 80, 100, PI + HALF_PI , 0);fill(240,240,180);quad(220,290,200,330,210,335,235,300);triangle(180,290,265,400,165,300);quad(110,450,140,450,150,475,100,475);quad(290,450,260,450,250,475,300,475);}

6、下裙：

function draw(){fill(0,150,100);rect(145,450,110,10);quad(145,460,255,460,290,610,110,610);line(160,480,145,580);line(180,520,175,600);line(225,490,235,580);}

7、上衣上的小花纹：

function draw(){fill(240,200,200);strokeWeight(0);//arc(170, 400, 10, 10, PI, QUARTER_PI);for(var i=0;i<6;i++){yr=sin(i*TWO_PI/6);xr=cos(i*TWO_PI/6);triangle(164+20*xr,401+20*yr,172+20*xr,405+20*yr,162+xr,415+yr);triangle(184+15*xr,421+15*yr,192+15*xr,425+15*yr,182+xr,435+yr);}
}

绘制效果：

动态效果（星空背景）

var stars = [], // Array that contains the starsWIDTH = 400,HEIGHT = 600,FPS = 30, // Frames per secondNUM_STARS = WIDTH * 2; // Number of starsfunction setup() {createCanvas(400, 600);// Push stars to arrayfor (var i = 0; i < NUM_STARS; i++) {stars.push({x: 0,y: 0,offset: Math.random() * 360,// Weight orbit a little to be outside originorbit: (Math.random() + 0.01) * max(WIDTH, HEIGHT),radius: Math.random() * 2,vx: Math.floor(Math.random() * 10) - 5,vy: Math.floor(Math.random() * 10) - 5});}frameRate(FPS);loop();
}function update() {var originX = WIDTH / 2;var originY = HEIGHT / 2;for (var i = 0, x = stars.length; i < x; i++) {var s = stars[i];var rad = (frameCount * (1 / (s.orbit * 2 + s.offset)) + s.offset) % TAU;s.x = (originX + cos(rad) * (s.orbit * 2));s.y = (originY + sin(rad) * (s.orbit));}
}function draw(){push();noFill();colorMode(RGB, 255, 255, 255, 1);stroke(255, 255, 255, 1);strokeCap(1);strokeWeight(2);for (var i = 0, x = stars.length; i < x; i++) {var s = stars[i];ellipse(s.x, s.y, s.radius, 0);}pop();update();}

效果展示：
（如果卡顿，请点击：https://s2.ax1x.com/2019/10/31/KI4pj0.gif）

参考资料：P5.js运动着的星空

交互效果（模拟雨雪）

var y=0;
var rtag=0;//鼠标点击交互
function touchStarted(){if(rtag==0){rtag=1;}else{rtag=0;}
}function draw(){if(rtag==1){fill(200,200,255);strokeWeight(0);for(i=0;i<100;i++){//随机生成位置var x=random(0,400);var ys=random(-600,600);//鼠标横向位置控制横向半径，实现简单“雨”、“雪”转换ellipse(x,y+ys,mouseX/30,15);}y++;if(y>600){y=0;}}}

效果展示：
https://s2.ax1x.com/2019/10/31/KIWXqS.gif
https://v.youku.com/v_show/id_XNDQyMTM1MzE2OA==.html?spm=a2h3j.8428770.3416059.1

最终效果

https://v.youku.com/v_show/id_XNDQyMTM1NDM5Mg==.html?spm=a2h3j.8428770.3416059.1