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

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樣式的方法匯總

    JS讀寫CSS樣式的方法匯總

    這篇文章主要為大家詳細匯總了JS讀寫CSS樣式的方法,內容詳盡,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-08-08
  • iframe實用操作錦集

    iframe實用操作錦集

    這篇文章主要介紹了有關iframe的實用操作,包括高度、傳遞數(shù)據(jù)等等,感興趣的朋友可以參考下
    2014-04-04
  • JS中的三個循環(huán)小結

    JS中的三個循環(huán)小結

    這篇文章主要介紹了JS中的三個循環(huán)小結,需要的朋友可以參考下
    2017-06-06
  • 微信小程序在text文本實現(xiàn)多種字體樣式

    微信小程序在text文本實現(xiàn)多種字體樣式

    這篇文章主要介紹了微信小程序在text文本實現(xiàn)多種字體樣式,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2019-11-11
  • 小程序跳轉到的H5頁面再跳轉回跳小程序的方法

    小程序跳轉到的H5頁面再跳轉回跳小程序的方法

    這篇文章主要介紹了小程序跳轉到的H5頁面再跳轉回跳小程序的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-03-03
  • 一文搞懂JavaScript中bind,apply,call的實現(xiàn)

    一文搞懂JavaScript中bind,apply,call的實現(xiàn)

    bind、call和apply都是Function原型鏈上面的方法,因此不管是使用function聲明的函數(shù),還是箭頭函數(shù)都可以直接調用。本文就帶你看看如何實現(xiàn)bind、call和apply
    2022-06-06
  • JS?Angular?服務器端渲染應用設置渲染超時時間???????

    JS?Angular?服務器端渲染應用設置渲染超時時間???????

    這篇文章主要介紹了JS?Angular服務器端渲染應用設置渲染超時時間,???????通過setTimeout模擬一個需要5秒鐘才能完成調用的API展開詳情,需要的小伙伴可以參考一下
    2022-06-06
  • 淺析js中事件冒泡與事件捕獲

    淺析js中事件冒泡與事件捕獲

    js中事件冒泡、事件捕獲一直都是困擾大家的問題,本文利用大量代碼解釋了js中事件冒泡與事件捕獲,希望對小伙伴們有所幫助
    2021-08-08
  • 解決echarts的多個折現(xiàn)數(shù)據(jù)出現(xiàn)坐標和值對不上的問題

    解決echarts的多個折現(xiàn)數(shù)據(jù)出現(xiàn)坐標和值對不上的問題

    這篇文章主要介紹了解決echarts的多個折現(xiàn)數(shù)據(jù)出現(xiàn)坐標和值對不上的問題,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-12-12
  • canvas繪制表盤時鐘

    canvas繪制表盤時鐘

    本文主要分享了canvas繪制表盤時鐘的示例代碼。具有很好的參考價值,下面跟著小編一起來看下吧
    2017-01-01

最新評論