真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

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

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

成都創(chuàng)新互聯(lián)公司專注于開魯企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,商城網(wǎng)站建設(shè)。開魯網(wǎng)站建設(shè)公司,為開魯?shù)鹊貐^(qū)提供建站服務(wù)。全流程按需求定制開發(fā)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

由內(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));//黑色圓
 }
}

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

拓展圖形

圖形向外擴(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));
 }
}

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