p5.js代码绘制“小跳动方块”的实现代码

运营成果展示

实验原理

主要是实现小方块的上下往复运动，每个小方块的节拍之间有一定的时间差。

本来想用一个if语句来实现这个功能！但是想了很久，没想到代码是正确的……后来被同学提醒要用sin函数！真的很好用！

var y1=POSy 30 sin(t)；var y2=POSy 28 sin(t-1)；var y3=POSy 26 sin(t-2)；var y4=POSy 24 sin(t-3)；var y5=POSy 22 sin(t-4)；var y6=POSy 20 sin(t-5)；

这个sin函数不仅可以根据时间做简单的上下调和运动，而且只需要改变sin前面的振幅和其中的参数，就可以让小方块依次跳跃。

Sin函数也用于改变小方的圆角，但由于rect后面控制角的参数不接受负数，var b=abs(a)用于取绝对值。

密码

让posY函数setup() {createCanvas(630，500)；//创建画布noStroke()；//不要笔画对象帧率(60)；//将帧率设置为60}函数draw(){ background(220)；//画布的背景色//准备小方块圆角的变化var t=millis()/400；posY=身高* 0.46；var a=20 * sin(t * 0.7)；var b=ABS(a)；//取绝对值//准备小方块上下移动。var y1=POSy 30 * sin(t)；var y2=POSy 28 * sin(t-1)；var y3=POSy 26 * sin(t-2)；var y4=POSy 24 * sin(t-3)；var y5=POSy 22 * sin(t-4)；var y6=POSy 20 * sin(t-5)；var y11=POSy 30 * cos(t)；var y22=POSy 28 * cos(t-1)；var y33=POSy 26 * cos(t-2)；var y44=POSy 24 * cos(t-3)；var y55=POSy 22 * cos(t-4)；var y66=POSy 20 * cos(t-5)；//画一个小方块填充(211)；rect(10，y1，15，15，b)；填充(192)矩形(30，y2，20，20，b)；填充(169)矩形(60，y3，30，30，b)；填充(128)矩形(100，y4，40，40，b)；填充(105)矩形(150，y5，50，50，b)；fill(0)rect(210，y6，60，60，b)；Fill(r，g，b，127)//每次点击中间方块，它都会改变颜色rect(280，posY，70，70，b)；fill(0)rect(360，y66，60，60，b)；填充(105)矩形(430，y55，50，50，b)；填充(128)矩形(490，y44，40，40，b)；填充(169)矩形(540，y33，30，30，b)；填充(192)矩形(580，y22，20，20，b)；填充(211)；rect(605，y11，15，15，b)；}//函数mouse clicked(){ let d=dist(mousex，mousey，360，200)；if (d 100) { //拾取新的随机颜色值r=random(255)；g=随机(255)；b=随机(255)；}}摘要

以上是边肖绘制的“小跳动方块”的实现代码。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！