作业成果展示

p5.js码绘“跳动的小正方形”的实现代码

实验原理

主要是要实现小正方形的上下来回运动,并且每个小正方形的跳动有一定的时间差视觉上要呈现依次跳动的感觉。

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

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

这种sin函数不但能实现依照时间上下做简谐运动,而且只需要改变sin前面的振幅和里面的参数就能够做到小正方形的依次跳动。

小正方形的圆角变化也是用了sin函数,不过因为rect后面控制角的参数是不接受负数的所以用了var b=abs(a)取绝对值。

代码

let posY;
function setup() {
createCanvas(630, 500);//创建画布
noStroke();//不给物体描边
frameRate(60);//帧率设为60
}
function draw() {
background(220);//画布的背景颜色
//为小正方形圆角变化做准备
var t=millis()/400; 
posY=height*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);
//画小正方形
fill(211);
rect(10, y1, 15, 15,b);
fill(192)
rect(30, y2, 20,20,b);
fill(169)
rect(60, y3, 30,30,b);
fill(128)
rect(100, y4, 40,40,b);
fill(105)
rect(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);
fill(105)
rect(430, y55, 50,50,b);
fill(128)
rect(490, y44, 40,40,b);
fill(169)
rect(540, y33, 30,30,b);
fill(192)
rect(580, y22, 20,20,b);
fill(211);
rect(605, y11, 15, 15,b);
}

//关于鼠标点击做出响应的函数
function mouseClicked() {
let d = dist(mouseX, mouseY, 360, 200);
 if (d < 100) {
 // Pick new random color values
 r = random(255);
 g = random(255);
 b = random(255);
 }}

总结

以上所述是小编给大家介绍的p5.js码绘“跳动的小正方形”的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。