使用p5.js臨摹動(dòng)態(tài)圖形

更新時(shí)間：2019年10月23日 10:53:56 作者：四號(hào)少年

這篇文章主要為大家詳細(xì)介紹了如何使用p5.js臨摹動(dòng)態(tài)圖形，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

一、臨摹

最近正在學(xué)習(xí)用代碼繪圖，于是按照下面的動(dòng)態(tài)圖形自己臨摹了一幅圖形

臨摹結(jié)果
觀察發(fā)現(xiàn)，整個(gè)圖案都是由基礎(chǔ)的正六邊形組成

首先創(chuàng)建一個(gè)畫布

function setup() {
 createCanvas(400, 400);
}

畫六邊形的函數(shù)為

function polygon(x, y, radius, npoints) {//繪制正多邊形函數(shù)
 let angle = TWO_PI / npoints;
 beginShape();
 for (let a = 0; a < TWO_PI; a += angle) {  
  let sx = x + sin(a) * radius;
  let sy = y + cos(a) * radius;
  vertex(sx, sy);
 }
 endShape(CLOSE);
}

x,y分別表示六邊形的位置，radius表示圖形的邊長(zhǎng)，npoints表示圖形的邊數(shù)

發(fā)現(xiàn)六邊形一直在繞著自己的中心旋轉(zhuǎn)，并未發(fā)生其他變換，因此只需要將六邊形批量創(chuàng)建，并使它不斷旋轉(zhuǎn)即可。

通過循環(huán)以及平移函數(shù)畫出六邊形

通過translate函數(shù)不斷更改六邊形的中心位置，

通過時(shí)間函數(shù)，達(dá)到不斷旋轉(zhuǎn)的效果

完整代碼如下

function setup() {
 createCanvas(400, 400);
}
function draw() {
 background(10,10,10);
 var t=millis()/2000;
fill(123,0,0);
   for(var j=0;j<=4;j++){
  for(var h=0;h<=4;h++){
     push();
     translate(width *(0.1+j*0.2),height*(0.17+h*0.34));
    rotate(t);
     polygon(0,0,40 ,6);    
     pop();
    }  
 }
 for(var i=0;i<=5;i++){
   for(var k=0;k<=5;k++){
   
     push();
     translate(width *i*0.2,height*k*0.34);
    rotate(t); 
      polygon(0,0,40 ,6);     
     pop();
   }
  }
  
 }

function polygon(x, y, radius, npoints) {//繪制正多邊形函數(shù)
 let angle = TWO_PI / npoints;
 beginShape();
 for (let a = 0; a < TWO_PI; a += angle) {  
  let sx = x + sin(a) * radius;
  let sy = y + cos(a) * radius;
  vertex(sx, sy);
 }
 endShape(CLOSE);
}

效果圖

圖形改編

只做了微小的改變，顏色可以隨機(jī)切換，且有一個(gè)由小變大的過程

代碼如下

function setup() {
 createCanvas(400, 400);
}
function draw() {
 background(0,10,200);
var t=5*millis()/1000;

//fill(211,0,0);
   for(var j=0;j<=4;j++){
  for(var h=0;h<=4;h++){
     push();
     translate(width *(0.1+j*0.2),height*(0.17+h*0.34));
     rotate(frameCount / 22.0);
     let c2=random(100,255);
   
   fill(0,c2,0);  
    if (t<50)
    {polygon(0,0,t ,6);}
     if(t>50)
    {
     fill(255,0,0);
     polygon(0,0,50 ,6);
    }

     pop();
    }
  
 }
 for(var i=0;i<=5;i++){
   for(var k=0;k<=5;k++){
   
     push();
     translate(width *(0+i*0.2),height*(0+k*0.34));
     rotate(frameCount / 22.0);
     let c2=random(100,255);
  
   fill(0,c2,0);  
    if (t<50)
    {polygon(0,0,t ,6);}
    if(t>50)
    {
     fill(0,255,0);
      polygon(0,0,50 ,6);
     }
    
     pop();
   }
  }
  
 }

function polygon(x, y, radius, npoints) {//繪制正多邊形函數(shù)
 let angle = TWO_PI / npoints;
 beginShape();
 for (let a = 0; a < TWO_PI; a += angle) {  
  let sx = x + sin(a) * radius;
  let sy = y + cos(a) * radius;
  vertex(sx, sy);
 }
 endShape(CLOSE);
}

總結(jié)

本次實(shí)驗(yàn)讓我對(duì)代碼編程有了初步的了解，逐漸學(xué)回了分析問題和解決問題，雖然目前解決的都還是很簡(jiǎn)單的問題。做的圖形也不夠有創(chuàng)意，這門課程很有意思，希望后面自己可以抽出更多的時(shí)間來進(jìn)行學(xué)習(xí)。

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

您可能感興趣的文章: