p5.js臨摹動態(tài)圖形實現(xiàn)方法詳解
更新時間：2019年10月23日 10:30:28 作者：qq_39430008
這篇文章主要為大家詳細介紹了p5.js臨摹動態(tài)圖形的實現(xiàn)方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
使用p5.js臨摹一個動態(tài)圖形并作出拓展，供大家參考，具體內容如下
原圖形
由內向外，白色圓的半徑依次增大，黑色圓的半徑不變；
白色圓在上一個白色圓碰到之前就開始增大半徑；
圖中只能存在一個周期的變化；
臨摹圖形
使用P5.js，依照上文的規(guī)律進行臨摹
畫12對圓；
相鄰圓之間半徑差為25；
白色圓半徑以周期為60幀的正弦函數(shù)的正數(shù)值部分變化，變化幅度為22；
相鄰白色圓運動函數(shù)相位差為13幀；
代碼如下：
function setup() {
createCanvas(400, 400);
frameRate(30)//圖形設為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));//相位差設為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));
}
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細匯總了JS讀寫CSS樣式的方法，內容詳盡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要介紹了有關iframe的實用操作，包括高度、傳遞數(shù)據(jù)等等，感興趣的朋友可以參考下2014-04-04
這篇文章主要介紹了JS中的三個循環(huán)小結,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了微信小程序在text文本實現(xiàn)多種字體樣式,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了小程序跳轉到的H5頁面再跳轉回跳小程序的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
一文搞懂JavaScript中bind,apply,call的實現(xiàn)
bind、call和apply都是Function原型鏈上面的方法，因此不管是使用function聲明的函數(shù)，還是箭頭函數(shù)都可以直接調用。本文就帶你看看如何實現(xiàn)bind、call和apply2022-06-06
JS?Angular?服務器端渲染應用設置渲染超時時間???????
這篇文章主要介紹了JS?Angular服務器端渲染應用設置渲染超時時間,???????通過setTimeout模擬一個需要5秒鐘才能完成調用的API展開詳情，需要的小伙伴可以參考一下2022-06-06
js中事件冒泡、事件捕獲一直都是困擾大家的問題，本文利用大量代碼解釋了js中事件冒泡與事件捕獲，希望對小伙伴們有所幫助2021-08-08
解決echarts的多個折現(xiàn)數(shù)據(jù)出現(xiàn)坐標和值對不上的問題
這篇文章主要介紹了解決echarts的多個折現(xiàn)數(shù)據(jù)出現(xiàn)坐標和值對不上的問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
本文主要分享了canvas繪制表盤時鐘的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧2017-01-01