p5.js码绘（二） 一幅自画像
作业成果展示实验步骤代码
作业成果展示
实验步骤
绘图时主要用到了贝塞尔曲线以及直线，三角和圆角矩形。 由于贝塞尔曲线的填充会自动连接曲线的起始点和初始点导致颜色填充很奇怪，头发连接起来之后像贞子！！!（当时只顾着头痛忘记截图了，真的很恐怖很像女鬼！)所以我改变了绘图的顺序使人脸在头发之后绘制就可以覆盖头发在脸上多余的部分。但是因为我的脸也是贝塞尔曲线画的所以脸填充上颜色之后也很魔鬼…… 后来在同学的帮助下我用了神奇的函数 beginShape()，用它来补全贝塞尔曲线没上颜色的部分（没错我的自画像都是缝缝补补才有的最终效果）。
代码
let snowflakes = [];
function setup() {
createCanvas(400, 430);
}
function draw() {
background('brown');
fill(240);
noStroke();
let t = frameCount / 60; // update time
// create a random number of snowflakes each frame
for (let i = 0; i < random(5); i++) {
snowflakes.push(new snowflake()); // append snowflake object
}
// loop through snowflakes with a for..of loop
for (let flake of snowflakes) {
flake.update(t); // update snowflake position
flake.display(); // draw snowflake
}
applyMatrix(2, 0, 0, 2, -30,-130);
//脖子
beginShape();
fill(253,245,230);
stroke(0);
vertex(100,200);
vertex(100,210);
vertex(90,220);
vertex(115,229);
vertex(140,220);
vertex(130,210);
vertex(130,198);
endShape();
//衣服
beginShape();
fill(135,206,255);
stroke(0);
vertex(90,220);
vertex(115,229);
vertex(140,220);
vertex(150,230);
vertex(162,223);
vertex(192,300);
vertex(40,300);
vertex(71,221);
vertex(80,230);
vertex(90,220);
endShape();
//头发
stroke(0, 0, 0);
fill(0);
beginShape();
vertex(90,190);
vertex(100,190);
vertex(100,210);
vertex(80,230);
endShape();
beginShape();
vertex(150,190);
vertex(130,190);
vertex(130,210);
vertex(150,230);
endShape();
line(100,210,80,230);
line(130,210,150,230);
//胳膊
line(90,247,90,300);
line(146,247,146,300);
//头发
applyMatrix(1, 0, 0, 1, 0,-10);
fill(0);
bezier(120,105, 180,105, 190, 230, 150, 240);
bezier(120,105, 20,105, 60, 230, 80, 240);
beginShape();
vertex(80,120);
vertex(70,143);
vertex(155,143);
vertex(120,105);
endShape();
//脸
push();
fill(253,245,230);
stroke(0, 0, 0);
applyMatrix(1, 0, 0, 1, 0,10);
bezier(155,140, 155,140, 178, 200, 110, 200);
bezier(70,140, 70,140, 60,200,110, 200);
beginShape();
fill(253,245,230);
noStroke();
vertex(120,105);
vertex(70,143);
vertex(110,200);
vertex(155,143);
endShape();
pop();
//睫毛
bezier(95,163,97,165,98,165,100,163);
bezier(138,163,140,165,141,165,143,163);
//眼睛
fill(0);
stroke(0);
ellipse(92,170,10,18);
ellipse(135,170,10,18);
//高光
fill(255,255,255);
noStroke();
triangle(94,170,98,170,98,173);
triangle(137,170,141,170,141,173);
//嘴巴
fill(205,38,38);
triangle(108,192,118,192,113,197);
//刘海
fill(0);
stroke(0, 0, 0);
rect(70, 140, 87, 20,2);
triangle(120,105,60,150,150,150);
stroke(253,245,230);
line(90,140,90,160);
line(120,140,120,160);
line(150,147,150,160);
//蝴蝶结
applyMatrix(1, 0, 0, 1, -40,10);
fill(255,0,0);
stroke(0);
triangle(145,220,145,237,155,229);
triangle(165,220,165,237,155,229);
rect(153,225, 5, 7,2);
}
function snowflake() {
// initialize coordinates
this.posX = 0;
this.posY = random(-50, 0);
this.initialangle = random(0, 2 * PI);
this.size = random(2, 5);
// radius of snowflake spiral
// chosen so the snowflakes are uniformly spread out in area
this.radius = sqrt(random(pow(width / 2, 2)));
this.update = function(time) {
// x position follows a circle
let w = 0.6; // angular speed
let angle = w * time + this.initialangle;
this.posX = width / 2 + this.radius * sin(angle);
// different size snowflakes fall at slightly different y speeds
this.posY += pow(this.size, 0.5);
// delete snowflake if past end of screen
if (this.posY > height) {
let index = snowflakes.indexOf(this);
snowflakes.splice(index, 1);
}
};
this.display = function() {
ellipse(this.posX, this.posY, this.size);
};
}
