p5.js如何繪制創意自畫像

這篇文章主要介紹p5.js如何繪制創意自畫像，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

具體內容如下

繪制結果

人物頭上的呆毛會一直運動，鼠標出現在畫面上時左上角會有一個小貓咪頭隨著鼠標移動，而且人物的眼睛也會一直看向小貓的方向

代碼介紹

整個圖全部由貝塞爾曲線，直線和圓組成
貝塞爾曲線的代碼結構大概就是

beginShape();
vertex(180,600);//曲線起點
bezierVertex(180,600,300,100,420,600); //第一個控制點坐標，第二個控制點坐標，終點坐標
endShape(CLOSE);

控制點我完全是憑感覺找的，先寫一個大概的位置，然后再慢慢調整坐標；

可以先在最后添加一行顯示當前鼠標坐標的輔助代碼

text(mouseX+" "+mouseY,mouseX,mouseY);

這樣找點會方便很多；

然后就是反復用貝塞爾曲線，由于它是填充圖形，所以要注意覆蓋關系，先畫頭發，然后再身體，臉等等一層層往上；

動態的部分就是添加了兩根會動的呆毛，設置時間，讓它周期性左右搖擺

var t=millis()/500;
 
 stroke(254,219,126);
 strokeWeight(2);
 fill(255,245,204);
 beginShape();
 vertex(300,70);
 bezierVertex(260+20*abs(sin(t)),60,275+20*abs(sin(t)),50,270+20*abs(sin(t)),30);
 bezierVertex(280+20*abs(sin(t)),50,275+20*abs(sin(t)),60,300,70);
 endShape(CLOSE);
 beginShape();
 vertex(300,70);
 bezierVertex(310+20*abs(sin(t)),60,315+20*abs(sin(t)),50,320+20*abs(sin(t)),40);
 endShape(CLOSE);//呆毛

小貓原本是在衣服上不會動的

因為要做交互，想不出來還能做什么，所以把所有坐標都改成了跟mouseX，mouseY相關的變量；
然后把眼睛高光的圓心坐標也改成了會隨鼠標點移動的變量：

var t1=(mouseX-300)/300*4.5;
var t2=(mouseY-235)/365*4.5;
fill(255);
noStroke();
ellipse(253+t1,235+t2,5,10);
ellipse(353+t1,235+t2,5,10);//眼睛高光

總結

這次試驗總體難度不算大，就是要一直計算調整坐標非常麻煩，所以也只能畫出這種筆畫非常少的簡筆畫，再復雜寫實一點可能會比較困難，其實代碼大部分都是重復的，只用改一下坐標就可以了，總的來說做起來還是很有趣的。

完整代碼

function setup(){
 createCanvas(600,600);
 }
 
function draw(){
 background(249,234,239);
 fill(255);
 
 drawgirl();
 drawcat();
 
 // text(mouseX+" "+mouseY,mouseX,mouseY);
}

function drawgirl(){
 
 stroke(254,219,126);
 strokeWeight(2);
 fill(255,243,187);
 beginShape();
 vertex(130,600);
 bezierVertex(-50,470,230,470,80,350);
 bezierVertex(20,290,100,260,135,220);
 bezierVertex(180,150,150,70,300,60);
 bezierVertex(450,70,420,150,465,220);
 bezierVertex(500,260,580,290,520,350);
 bezierVertex(370,470,650,470,470,600);
 endShape();//頭發


 fill(197,235,255);
 stroke(252,235,160);
 beginShape();
 vertex(180,600);
 bezierVertex(180,600,300,100,420,600); 
 endShape(CLOSE);//身體
 
 
 fill(255);
 stroke(244,206,200);
 beginShape();
 vertex(180,220);
 bezierVertex(180,400,290,300,290,380);
 bezierVertex(290,410,310,410,310,380);
 bezierVertex(310,300,420,400,420,220);
 bezierVertex(420,220,330,200,300,130);
 bezierVertex(270,200,180,220,180,220);
 endShape(CLOSE);//臉


 beginShape()
 vertex(179,223);
 bezierVertex(150,225,150,250,181,258);
 endShape(CLOSE);
 beginShape()
 vertex(421,223);
 bezierVertex(450,225,450,250,419,258);
 endShape(CLOSE);//耳朵
 
 
 noFill();
 stroke(254,219,126);
 beginShape();
 vertex(420,220);
 bezierVertex(420,220,330,200,300,130);
 bezierVertex(270,200,180,220,180,220);
 bezierVertex(180,220,270,200,300,130);
 bezierVertex(330,200,420,220,420,220);
 endShape(CLOSE);//發際線


 stroke(227,156,160);
 strokeWeight(3);
 beginShape();
 vertex(230,210)
 bezierVertex(245,200,260,200,270,210);
 bezierVertex(260,200,245,200,230,210);
 endShape(CLOSE);
 beginShape();
 vertex(370,210);
 bezierVertex(355,200,340,200,330,210);
 bezierVertex(340,200,355,200,370,210);
 endShape(CLOSE);//眉毛
 
 
 stroke(227,109,115);
 beginShape();
 vertex(290,300);
 bezierVertex(295,310,305,310,310,300);
 endShape();//嘴巴


 fill(0);
 ellipse(250,240,15,25);
 ellipse(350,240,15,25);//眼睛
 
 
 var t1=(mouseX-300)/300*4.5;
 var t2=(mouseY-235)/365*4.5;
 fill(255);
 noStroke();
 ellipse(253+t1,235+t2,5,10);
 ellipse(353+t1,235+t2,5,10);//眼睛高光


 noStroke();
 fill(254,221,224);
 ellipse(230,280,25,25);
 ellipse(370,280,25,25);//腮紅


 var t=millis()/500;
 stroke(254,219,126);
 strokeWeight(2);
 fill(255,245,204);
 beginShape();
 vertex(300,70);
 bezierVertex(260+20*abs(sin(t)),60,275+20*abs(sin(t)),50,270+20*abs(sin(t)),30);
 bezierVertex(280+20*abs(sin(t)),50,275+20*abs(sin(t)),60,300,70);
 endShape(CLOSE);
 beginShape();
 vertex(300,70);
 bezierVertex(310+20*abs(sin(t)),60,315+20*abs(sin(t)),50,320+20*abs(sin(t)),40);
 endShape(CLOSE);//呆毛
 }


function drawcat(){
 
 stroke(191,126,120);
 fill(254,211,179);
 beginShape();
 vertex(mouseX-48,mouseY-33);
 bezierVertex(mouseX-50,mouseY-45,mouseX-50,mouseY-60,mouseX-31,mouseY-49);
 endShape(CLOSE);
 beginShape();
 vertex(mouseX+8,mouseY-33);
 bezierVertex(mouseX+10,mouseY-45,mouseX+10,mouseY-60,mouseX-9,mouseY-49);
 endShape(CLOSE);//貓耳朵
 
  fill(255);
 ellipse(mouseX-20,mouseY-20,60,55);//貓貓頭
 
 
 noStroke();
 fill(254,211,179);
 beginShape();
 vertex(mouseX-50,mouseY-20);
 bezierVertex(mouseX-30,mouseY-20,mouseX-20,mouseY-30,mouseX-20,mouseY-40);
 bezierVertex(mouseX-20,mouseY-30,mouseX-10,mouseY-20,mouseX+10,mouseY-20);
 bezierVertex(mouseX+10,mouseY-60,mouseX-50,mouseY-60,mouseX-50,mouseY-20);
 endShape(CLOSE);
 stroke(191,126,120);
 beginShape();
 vertex(mouseX+10,mouseY-20);
 bezierVertex(mouseX+10,mouseY-60,mouseX-50,mouseY-60,mouseX-50,mouseY-20);
 bezierVertex(mouseX-50,mouseY-60,mouseX+10,mouseY-60,mouseX+10,mouseY-20);
 endShape(CLOSE);//頭上黃色部分的毛


 stroke(191,126,120);
 fill(191,126,120);
 ellipse(mouseX-35,mouseY-27,5,10);
 ellipse(mouseX-5,mouseY-27,5,10);//眼睛
 ellipse(mouseX-20,mouseY-22,4,2);//鼻子
 
 
 noFill();
 beginShape();
 vertex(mouseX-28,mouseY-14);
 bezierVertex(mouseX-24,mouseY-13,mouseX-22,mouseY-14,mouseX-20,mouseY-15);
 bezierVertex(mouseX-18,mouseY-13,mouseX-16,mouseY-13,mouseX-12,mouseY-14);
 endShape();//嘴巴
 
 
 stroke(191,126,120);
 line(mouseX-50,mouseY-20,mouseX-43,mouseY-19);
 line(mouseX-48,mouseY-11,mouseX-42,mouseY-14);
 line(mouseX+10,mouseY-20,mouseX+3,mouseY-19);
 line(mouseX+8,mouseY-11,mouseX+2,mouseY-14);//胡子
 
}

以上是“p5.js如何繪制創意自畫像”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！