p5.js入門教程之小球動(dòng)畫示例代碼
一、運(yùn)動(dòng)的小球
本節(jié)將用p5.js做一個(gè)在屏幕上運(yùn)動(dòng)的小球。
思路是用變量記錄小球的位置,然后在draw()函數(shù)里對其做出改變,由于draw()函數(shù)會(huì)不斷地運(yùn)行(頻率為FPS,默認(rèn)60幀/秒),所以小球便產(chǎn)生了運(yùn)動(dòng)。
代碼如下:
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)過一段時(shí)間后,小球會(huì)移出屏幕。為了不讓小球跑到屏幕之外,我們新增一個(gè)變量用來控制速度,并在小球離開屏幕時(shí)讓速度反向。
代碼如下:
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; }
進(jìn)一步,我們可以用兩個(gè)變量控制x、y方向的速度,實(shí)現(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í)有所幫助,也希望大家多多支持腳本之家。
- JavaScript+canvas實(shí)現(xiàn)框內(nèi)跳動(dòng)小球
- JavaScript結(jié)合Canvas繪畫畫運(yùn)動(dòng)小球
- JavaScript canvas實(shí)現(xiàn)跟隨鼠標(biāo)移動(dòng)小球
- 原生js實(shí)現(xiàn)移動(dòng)小球(碰撞檢測)
- js實(shí)現(xiàn)小球在頁面規(guī)定的區(qū)域運(yùn)動(dòng)
- 用js實(shí)現(xiàn)小球的自由移動(dòng)代碼
- js實(shí)現(xiàn)跟隨鼠標(biāo)移動(dòng)的小球
- JavaScript實(shí)現(xiàn)小球沿正弦曲線運(yùn)動(dòng)
- 原生js實(shí)現(xiàn)彈跳小球
- 原生js實(shí)現(xiàn)彈動(dòng)小球效果
相關(guān)文章
詳解webpack 配合babel 將es6轉(zhuǎn)成es5 超簡單實(shí)例
本篇文章主要介紹了詳解webpack 配合babel 將es6轉(zhuǎn)成es5 超簡單實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05javascript 身份證號碼驗(yàn)證函數(shù)(可辨真?zhèn)?,支?5或18位身份證號)測試誤差為0
javascript 身份證號碼驗(yàn)證函數(shù)(可辨真?zhèn)?,支?5或18位身份證號)測試誤差為0 ,非常不錯(cuò),其實(shí)主要是特別熟悉身份證的算法。2010-05-05js實(shí)現(xiàn)帶搜索功能的下拉框?qū)崟r(shí)搜索實(shí)時(shí)匹配
當(dāng)select輸入框中每輸入一點(diǎn)內(nèi)容的時(shí)候,在option中找出與內(nèi)容匹配的選項(xiàng)顯示在option的前面選項(xiàng)中,下面有個(gè)不錯(cuò)的示例,希望朋友們可以喜歡2013-11-11uniapp獲取手機(jī)通知權(quán)限實(shí)現(xiàn)demo
這篇文章主要為大家介紹了uniapp獲取手機(jī)通知權(quán)限實(shí)現(xiàn)demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07