欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

p5.js臨摹動(dòng)態(tài)圖形實(shí)現(xiàn)方法詳解

 更新時(shí)間：2019年10月23日 10:30:28   作者：qq_39430008  
這篇文章主要為大家詳細(xì)介紹了p5.js臨摹動(dòng)態(tài)圖形的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

使用p5.js臨摹一個(gè)動(dòng)態(tài)圖形并作出拓展，供大家參考，具體內(nèi)容如下

原圖形

由內(nèi)向外，白色圓的半徑依次增大，黑色圓的半徑不變；
白色圓在上一個(gè)白色圓碰到之前就開始增大半徑；
圖中只能存在一個(gè)周期的變化；

臨摹圖形

使用P5.js，依照上文的規(guī)律進(jìn)行臨摹

畫12對(duì)圓；
相鄰圓之間半徑差為25；
白色圓半徑以周期為60幀的正弦函數(shù)的正數(shù)值部分變化，變化幅度為22；
相鄰白色圓運(yùn)動(dòng)函數(shù)相位差為13幀；

代碼如下：

function setup() {
 createCanvas(400, 400);
 frameRate(30)//圖形設(shè)為30幀
}

function draw() {
 background(0);
 
 
 for(i=12;i>0;i--)//一共12對(duì)圓
 {
 y=22*sin(PI*frameCount/30-13*(i-1));//相鄰白色圓運(yùn)動(dòng)函數(shù)相位差為13幀
 if(y>=0)
 {
  a=y;
 }
 else
 {
  a=0;
 }
 fill(255);
 ellipse(200,200,a+50*i);//白色圓
 fill(0);
 ellipse(200,200,25+50*(i-1));//黑色圓
 }
}

拓展圖形

圖形向外擴(kuò)散的感覺是因?yàn)橄噜彽陌咨珗A相位差為13幀，改變相位差可實(shí)現(xiàn)改變視覺效果

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

function draw() {
 background(0);
 
 
 for(i=12;i>0;i--)
 {
 y=22*sin(PI*frameCount/30-12*(i-1));//相位差設(shè)為12
 if(y>=0)
 {
  a=y;
 }
 else
 {
  a=0;
 }
 fill(255);
 ellipse(200,200,a+50*i);
 fill(0);
 ellipse(200,200,25+50*(i-1));
 }
}

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

相關(guān)文章

最新評(píng)論