p5.js实现小球运动与反弹动画教程

作者:窗边听雨时间:2026-10-22 13:13:06浏览:625

本文通过p5.js库演示小球运动及反弹效果的实现。利用draw()函数循环更新位置变量,结合速度控制与边界检测,实现小球在Canvas内的持续运动与反向反弹,提供完整代码示例。

运动的小球

一、运动的小球

本节将使用p5.js创建一个在屏幕上移动的小球动画。

实现思路是利用变量记录小球的坐标位置,并在draw()函数中持续修改该变量。由于draw()函数会以FPS(默认60帧/秒)的频率不断循环执行,从而产生小球运动的视觉效果。

具体实现代码如下:


var x=0; 
 
function setup() {  
 createCanvas(400, 400); 
}  
 
function draw() {  
 background(220); 
 //width和height是关键词,分别是Canvas的宽和高 
 x+=2; 
 ellipse(x,height/2,20,20); 
} 

反弹的小球

二、反弹的小球

随着时间推移,小球会移出屏幕可视区域。为防止小球消失,我们引入一个速度变量来控制移动步长,并在小球触及屏幕边界时使速度方向反转。

相关代码如下:


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轴的速度变量,实现小球在画布内多方向弹射的效果。

完整代码如下:


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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持本站。

作者最新文章