p5.js入門教程之小球動畫示例代碼
一、運動的小球
本節(jié)將用p5.js做一個在屏幕上運動的小球。
思路是用變量記錄小球的位置,然后在draw()函數(shù)里對其做出改變,由于draw()函數(shù)會不斷地運行(頻率為FPS,默認60幀/秒),所以小球便產(chǎn)生了運動。
代碼如下:
var x=0; function setup() { createCanvas(400, 400); } function draw() { background(220); //width和height是關(guān)鍵詞,分別是Canvas的寬和高 x+=2; ellipse(x,height/2,20,20); }
二、反彈的小球
經(jīng)過一段時間后,小球會移出屏幕。為了不讓小球跑到屏幕之外,我們新增一個變量用來控制速度,并在小球離開屏幕時讓速度反向。
代碼如下:
var x=0; var speed=2; function setup() { createCanvas(400, 400); } function draw() { background(220); ellipse(x,height/2,20,20); //width和height是關(guān)鍵詞,分別是Canvas的寬和高 x+=speed; if(x>width||x<0){ speed*=-1; }
進一步,我們可以用兩個變量控制x、y方向的速度,實現(xiàn)小球在畫布上彈射的功能。
代碼如下:
var x=200; var y=200; var Vx=2; var Vy=3; function setup() { createCanvas(400, 400); } function draw() { background(220); ellipse(x,y,20,20);//width和height是關(guān)鍵詞,分別是Canvas的寬和高 x+=Vx; y+=Vy; if(x>width||x<0){ Vx*=-1; } if(y>height||y<0){ Vy*=-1; } }
最終效果:https://alpha.editor.p5js.org/full/Bya02GDBb
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
詳解webpack 配合babel 將es6轉(zhuǎn)成es5 超簡單實例
本篇文章主要介紹了詳解webpack 配合babel 將es6轉(zhuǎn)成es5 超簡單實例,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05javascript 身份證號碼驗證函數(shù)(可辨真?zhèn)危С?5或18位身份證號)測試誤差為0
javascript 身份證號碼驗證函數(shù)(可辨真?zhèn)?,支?5或18位身份證號)測試誤差為0 ,非常不錯,其實主要是特別熟悉身份證的算法。2010-05-05js實現(xiàn)帶搜索功能的下拉框?qū)崟r搜索實時匹配
當select輸入框中每輸入一點內(nèi)容的時候,在option中找出與內(nèi)容匹配的選項顯示在option的前面選項中,下面有個不錯的示例,希望朋友們可以喜歡2013-11-11uniapp獲取手機通知權(quán)限實現(xiàn)demo
這篇文章主要為大家介紹了uniapp獲取手機通知權(quán)限實現(xiàn)demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-07-07