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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持本站。
作者最新文章
anime.js 快速入门:怎么引入库并编写第一个 DOM 动画
2026-11-05 14:22:43
在线JS解密后变量名仍乱码?结合浏览器DevTools调试还原
2026-11-04 20:26:01
怎么在浏览器中运行JavaScript代码并查看输出结果
2026-11-04 09:07:33
JS 获取屏幕分辨率:window.screen.width 与 height 用法
2026-11-04 08:52:48
为什么推荐用DOMContentLoaded代替window.onload初始化JS
2026-11-04 08:42:33
