p5.js入門教程之小球動畫示例代碼
更新時間：2018年03月15日 16:36:05 作者：西河某人
本篇文章主要介紹了p5.js入門教程之小球動畫示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
一、運動的小球
本節(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是關鍵詞，分別是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是關鍵詞，分別是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是關鍵詞，分別是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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了巧用數(shù)組制作圖片切換js實現(xiàn)代碼,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要介紹了js tab欄切換代碼實例解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了JavaScript表單焦點自動切換代碼的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
這篇文章主要介紹了讀Javascript高性能編程重點筆記,需要的朋友可以參考下2016-12-12
javascript+html5+css3自定義彈出窗口效果
這篇文章主要為大家詳細介紹了javascript+html5+css3自定義彈出窗口效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
最近做了一個項目，其中要實現(xiàn)這樣的功能，在首頁底部中間的tab彈出一個頁面，而且是沒有底部欄的，而不是像平常滑動的一個子頁面。其實實現(xiàn)方法很簡單，下面通過本文給大家介紹下2016-12-12
這篇文章主要為大家詳細介紹了js實現(xiàn)方塊上下左右移動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了JS實現(xiàn)鼠標箭頭變成一個燃燒燭光效果的方法,實例分析了javascript操作鼠標事件及圖片的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)寫入緩存與讀取緩存詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-08-08
下面小編就為大家?guī)硪黄猨s判斷用戶是輸入的地址請求的路徑(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07