p5.js繪制創(chuàng)意自畫(huà)像

更新時(shí)間：2019年11月04日 12:28:55 作者：qq_43337902

這篇文章主要為大家詳細(xì)介紹了p5.js繪制創(chuàng)意自畫(huà)像，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了p5.js繪制自畫(huà)像的具體代碼，供大家參考，具體內(nèi)容如下

繪制結(jié)果

人物頭上的呆毛會(huì)一直運(yùn)動(dòng)，鼠標(biāo)出現(xiàn)在畫(huà)面上時(shí)左上角會(huì)有一個(gè)小貓咪頭隨著鼠標(biāo)移動(dòng)，而且人物的眼睛也會(huì)一直看向小貓的方向

代碼介紹

整個(gè)圖全部由貝塞爾曲線，直線和圓組成
貝塞爾曲線的代碼結(jié)構(gòu)大概就是

beginShape();
vertex(180,600);//曲線起點(diǎn)
bezierVertex(180,600,300,100,420,600); //第一個(gè)控制點(diǎn)坐標(biāo)，第二個(gè)控制點(diǎn)坐標(biāo)，終點(diǎn)坐標(biāo)
endShape(CLOSE);

控制點(diǎn)我完全是憑感覺(jué)找的，先寫(xiě)一個(gè)大概的位置，然后再慢慢調(diào)整坐標(biāo)；

可以先在最后添加一行顯示當(dāng)前鼠標(biāo)坐標(biāo)的輔助代碼

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

這樣找點(diǎn)會(huì)方便很多；

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

動(dòng)態(tài)的部分就是添加了兩根會(huì)動(dòng)的呆毛，設(shè)置時(shí)間，讓它周期性左右搖擺

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);//呆毛

小貓?jiān)臼窃谝路喜粫?huì)動(dòng)的

因?yàn)橐鼋换?，想不出?lái)還能做什么，所以把所有坐標(biāo)都改成了跟mouseX，mouseY相關(guān)的變量；
然后把眼睛高光的圓心坐標(biāo)也改成了會(huì)隨鼠標(biāo)點(diǎn)移動(dòng)的變量：

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);//眼睛高光

總結(jié)

這次試驗(yàn)總體難度不算大，就是要一直計(jì)算調(diào)整坐標(biāo)非常麻煩，所以也只能畫(huà)出這種筆畫(huà)非常少的簡(jiǎn)筆畫(huà)，再?gòu)?fù)雜寫(xiě)實(shí)一點(diǎn)可能會(huì)比較困難，其實(shí)代碼大部分都是重復(fù)的，只用改一下坐標(biāo)就可以了，總的來(lái)說(shuō)做起來(lái)還是很有趣的。

完整代碼

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();//頭發(fā)


 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);//發(fā)際線


 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);//胡子
 
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: