p5.js臨摹動態(tài)圖形實現(xiàn)方法詳解
更新時間：2019年10月23日 10:30:28 作者：qq_39430008
這篇文章主要為大家詳細介紹了p5.js臨摹動態(tài)圖形的實現(xiàn)方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
使用p5.js臨摹一個動態(tài)圖形并作出拓展，供大家參考，具體內(nèi)容如下
原圖形
由內(nèi)向外，白色圓的半徑依次增大，黑色圓的半徑不變；
白色圓在上一個白色圓碰到之前就開始增大半徑；
圖中只能存在一個周期的變化；
臨摹圖形
使用P5.js，依照上文的規(guī)律進行臨摹
畫12對圓；
相鄰圓之間半徑差為25；
白色圓半徑以周期為60幀的正弦函數(shù)的正數(shù)值部分變化，變化幅度為22；
相鄰白色圓運動函數(shù)相位差為13幀；
代碼如下：
function setup() {
createCanvas(400, 400);
frameRate(30)//圖形設(shè)為30幀
}
function draw() {
background(0);
for(i=12;i>0;i--)//一共12對圓
{
y=22*sin(PI*frameCount/30-13*(i-1));//相鄰白色圓運動函數(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));//黑色圓
}
}
拓展圖形
圖形向外擴散的感覺是因為相鄰的白色圓相位差為13幀，改變相位差可實現(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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
javascript browser瀏覽器類型以及版本判斷代碼
在團隊js框架建設(shè)過程中寫的一段瀏覽器判斷代碼，喜歡的朋友可以參考下。2010-04-04
JS控件ASP.NET的treeview控件全選或者取消(示例代碼)
本篇文章主要是對JS控件ASP.NET的treeview控件全選或者取消的示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
JavaScript實現(xiàn)鼠標(biāo)滑過處生成氣泡的方法
這篇文章主要介紹了JavaScript實現(xiàn)鼠標(biāo)滑過處生成氣泡的方法,涉及鼠標(biāo)事件與頁面樣式的相關(guān)操作技巧,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了七種JS實現(xiàn)數(shù)組去重的方式，下面文章以JS數(shù)組去重的相關(guān)資料展開全文內(nèi)容，具有一定的參考價值，需要的小伙伴可以參考一下2021-12-12
這篇文章主要給大家介紹了關(guān)于JS匿名函數(shù)內(nèi)部this指向的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
今天小編就為大家分享一篇layui表格 列自動適應(yīng)大小失效的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
js vml制作的3D效果2008-02-02
JS加密插件CryptoJS實現(xiàn)的DES加密示例
這篇文章主要介紹了JS加密插件CryptoJS實現(xiàn)的DES加密,結(jié)合實例形式分析了javascript使用CryptoJS插件進行des加密的各種常見模式使用技巧,需要的朋友可以參考下2018-08-08
DB.ASP 用Javascript寫ASP很靈活很好用很easy
DB.ASP 用Javascript寫ASP很靈活很好用很easy，喜歡用js寫asp的朋友可以參考下。2011-07-07
這篇文章主要為大家詳細介紹了js實現(xiàn)網(wǎng)頁圖片輪換播放，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09