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

一、臨摹

創(chuàng)新互聯(lián)專注于呼圖壁網(wǎng)站建設服務及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。熱誠為您提供呼圖壁營銷型網(wǎng)站建設，呼圖壁網(wǎng)站制作、呼圖壁網(wǎng)頁設計、呼圖壁網(wǎng)站官網(wǎng)定制、重慶小程序開發(fā)服務，打造呼圖壁網(wǎng)絡公司原創(chuàng)品牌,更為您提供呼圖壁網(wǎng)站排名全網(wǎng)營銷落地服務。

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

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

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

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

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表示圖形的邊長，npoints表示圖形的邊數(shù)

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

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

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

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

通過時間函數(shù)，達到不斷旋轉的效果

完整代碼如下

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);
}

效果圖

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

圖形改編

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

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

代碼如下

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);
}

總結

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

新聞標題：使用p5.js臨摹動態(tài)圖形
本文網(wǎng)址：http://chinadenli.net/article32/ppgepc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、微信小程序、移動網(wǎng)站建設、營銷型網(wǎng)站建設、網(wǎng)站改版、標簽優(yōu)化

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

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