成果展示
鼠标单机左键可以改变衣服颜色
步骤和代码
从底层到上层的绘画顺序为:身体,耳朵,脸,头发,眼睛眉毛嘴
身体用的四边形和圆
耳朵用的圆
脸用的曲线
头发用的曲线
眼睛用的圆、眉毛和嘴用的曲线
代码:
let r = 0;
let g = 0;
let b = 0;
function setup() {
createCanvas(1000, 1000);
background(255);
}
function draw() {
body(); //身体
ears(); //耳朵
face(); //脸
hair(); //头发
features(); //眼睛、眉毛、嘴
}
function mybezier(x1,y1,x2,y2,x3,y3,x4,y4){
strokeWeight(2);
beginShape();
vertex(x1, y1);
bezierVertex(x2, y2, x3, y3, x4, y4);
endShape();
}
function myaxis(){
strokeWeight(1);
line(-width/2,0,width/2,0);
line(0,-height/2,0,height/2);
line(width/2,0,width/2-20,20);
line(width/2,0,width/2-20,-20);
line(0,height/2,20,height/2-20);
line(0,height/2,-20,height/2-20);
}
function ears(){ //耳朵
strokeWeight(1);
stroke(1);
fill(255, 228, 196);
circle(205,607,100);
circle(800,607,100);
}
function face(){ //脸
strokeWeight(1);
stroke(1);
fill(255, 228, 196);
beginShape();
vertex(330,397);
bezierVertex(282,441,220,557,206,623);
bezierVertex(210,710,358,789,500,786);
bezierVertex(653,782,802,690,799,602);
bezierVertex(808,457,759,277,703,237);
endShape();
}
function hair(){ //头发
strokeWeight(1);
stroke(1);
fill('#696969');
beginShape();
vertex(138,528);
bezierVertex(119,404, 180,249,257,213);
bezierVertex(254,207,232,205,219,207);
bezierVertex(604,15,966,311,799,602);
bezierVertex(798,524,765,430,726,388);
bezierVertex(710,410,666,433,641,443);
bezierVertex(652,423,677,390,687,368);
bezierVertex(617,454,549,493,442,505);
bezierVertex(466,494,491,465,498,452);
bezierVertex(458,485,370,526,318,537);
bezierVertex(344,520,373,483,383,466);
bezierVertex(350,504,258,566,231,576);
bezierVertex(281,531,311,436,330,397);
bezierVertex(282,441,220,557,206,623);
bezierVertex(165,562,181,458,225,416);
bezierVertex(207,424,164,477,138,528);
endShape();
}
function features(){
eyes();
eyebrows();
mouth();
}
function eyes(){
let eyeXL = 370;
let eyeY = 600;
//左眼
strokeWeight(1);
stroke(1);
noFill();
circle(eyeXL,eyeY,100);
strokeWeight(1);
stroke(1);
fill(255);
circle(eyeXL,eyeY,100);
strokeWeight(1);
stroke(1);
fill(0);
circle(eyeXL,eyeY,80);
strokeWeight(1);
stroke(1);
fill(255);
circle(eyeXL-20,eyeY-20,20);
//右眼
let eyeXR = eyeXL+250;
strokeWeight(1);
stroke(1);
noFill();
circle(eyeXR,eyeY,100);
strokeWeight(1);
stroke(1);
fill(255);
circle(eyeXR,eyeY,100);
strokeWeight(1);
stroke(1);
fill(0);
circle(eyeXR,eyeY,80);
strokeWeight(1);
stroke(1);
fill(255);
circle(eyeXR-20,eyeY-20,20);
}
function eyebrows(){
strokeWeight(2);
stroke(1);
noFill();
bezier(360, 505, 388, 500, 430, 521, 441, 538);
bezier(990-360,505,990-388,500,990-430,521,990-441,538);
}
function mouth(){
strokeWeight(2);
stroke(1);
noFill();
bezier(470-10,711,492-10,728,530-10,728,550-10,711);
}
function mousePressed(){
r = random(255);
g = random(255);
b = random(255);
}
function body(){
strokeWeight(1);
stroke(1);
fill(255, 228, 196);
circle(365,825,30); //左手
circle(625,825,30); //右手
let color = 0;
fill(r,g,b);
strokeWeight(1);
stroke(1);
quad(420,780,430,810,370,840,360,810);//左臂
quad(570,780,560,810,620,840,630,810);//右臂
quad(420,735,570,735,585,900,405,900);//身子
//扣子
strokeWeight(1);
stroke(1);
fill(255);
circle(495,810,15);
circle(495,840,15);
circle(495,870,15);
}
总结
码绘对于我来说还是挺不容易的(捂脸),尤其是画头发曲线找点太难受了,头发快画完了发现连接不上,前面的就都白画了。还好我还是比较有忍耐力的,用一上午硬着头皮画完了,画完以后甚至还觉得挺好看2333。总之码绘是一件很考验人的耐心的事情,当看到自己的作品终于完成了,成就感也就油然而生。