【p5.js】 创意自画像

成果展示

鼠标单机左键可以改变衣服颜色

步骤和代码

从底层到上层的绘画顺序为：身体，耳朵，脸，头发，眼睛眉毛嘴

身体用的四边形和圆
耳朵用的圆
脸用的曲线
头发用的曲线
眼睛用的圆、眉毛和嘴用的曲线

代码：

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。总之码绘是一件很考验人的耐心的事情，当看到自己的作品终于完成了，成就感也就油然而生。