p5.js码绘“跳动的小正方形”的实现代码
网络编程 2021-07-04 15:01www.168986.cn编程入门
这篇文章主要介绍了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=height0.46; var a=20sin(t0.7); var b=abs(a);//取绝对值 //为小正方形上下运动做准备 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); var y11=posY+30cos(t); var y22=posY+28cos(t-1); var y33=posY+26cos(t-2); var y44=posY+24cos(t-3); var y55=posY+22cos(t-4); var y66=posY+20cos(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码绘“跳动的小正方形”的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持!
如果你觉得本文对你有帮助,欢迎网络推广网站推广转载,烦请注明出处,谢谢!
上一篇:Vue实现开心消消乐游戏算法
下一篇:微信小程序绑定手机号获取验证码功能
编程语言
- 宿迁百度关键词排名指南:实现精准营销的关键
- 四川SEO优化怎么做网络推广
- 立昂技术备案老域名收购:如何为您的业务赋能
- 安徽百度关键词seo贵不贵,一般需要多少钱
- 吉林百度快照排名怎么做电话营销
- 多伦新手做SEO怎么做
- 甘肃优化关键词排名推广怎么做论坛营销
- 沙雅SEO网站推广:提升您的在线可见性
- 四川SEO优化如何提升销售额和销售量
- 聂荣网站排名优化:提升网站可见性的全方位指
- 涞水SEO:提升地方企业在线可见性的策略
- 辽宁百度seo排名怎样做网站排名
- 临湘哪有关键词排名优化:提升网站可见度的关
- 黑龙江百度网站优化有没有优惠
- 凉城优化关键词排名推广:提升您的网络可见性
- 萝北整站优化:提升您网站流量和排名的全面指