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


Posted in Javascript onOctober 22, 2019

作业成果展示

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码绘“跳动的小正方形”的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
如何在父窗口中得知window.open()出的子窗口关闭事件
Oct 15 Javascript
网页中表单按回车就自动提交的问题的解决方案
Nov 03 Javascript
js实现简易的单数字随机抽奖(0-9)
Mar 19 Javascript
jquery实现ajax加载超时提示的方法
Jul 23 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
May 11 Javascript
vue不通过路由直接获取url中参数的方法示例
Aug 24 Javascript
用vue-cli开发vue时的代理设置方法
Sep 20 Javascript
如何使用puppet替换文件中的string
Dec 06 Javascript
Node.js + express基本用法教程
Mar 14 Javascript
vue操作动画的记录animate.css实例代码
Apr 26 Javascript
微信小程序实现判断是分享到群还是个人功能示例
May 03 Javascript
JavaScript工具库之Lodash详解
Jun 15 Javascript
微信小程序绑定手机号获取验证码功能
Oct 22 #Javascript
微信小程序开发之转发分享功能
Oct 22 #Javascript
微信小程序转发事件实现解析
Oct 22 #Javascript
小程序点击图片实现png转jpg
Oct 22 #Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
Oct 22 #Javascript
微信小程序实现左侧滑动导航栏
Apr 08 #Javascript
微信小程序自定义组件components(代码详解)
Oct 21 #Javascript
You might like
DOTA2 无惧惊涛骇浪 昆卡大型水友攻略
2020/04/20 DOTA
ajax php传递和接收变量实现思路及代码
2012/12/19 PHP
PHP读取文件内容后清空文件示例代码
2014/03/18 PHP
PHP连接和操作MySQL数据库基础教程
2014/09/29 PHP
PHP使用in_array函数检查数组中是否存在某个值
2015/03/25 PHP
实现PHP搜索加分页
2016/10/12 PHP
Yii2语言国际化的配置教程
2018/08/19 PHP
PHP利用缓存处理用户注册时的邮箱验证,成功后用户数据存入数据库操作示例
2019/12/31 PHP
对YUI扩展的Gird组件 Part-1
2007/03/10 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
2013/05/08 Javascript
自动最大化窗口的Javascript代码
2013/05/22 Javascript
javascript中局部变量和全局变量的区别详解
2015/02/27 Javascript
JS实现动态给图片添加边框的方法
2015/04/01 Javascript
JavaScript获取按钮所在form表单id的方法
2015/04/02 Javascript
javascript字符串与数组转换汇总
2015/05/26 Javascript
详解JavaScript的表达式与运算符
2015/11/30 Javascript
AngularJS初始化静态模板详解
2016/01/14 Javascript
在一个页面重复使用一个js函数的方法详解
2016/12/26 Javascript
Bootstrap 手风琴菜单的实现代码
2017/01/20 Javascript
微信小程序本作用域下调用全局JS详解及实例
2017/02/22 Javascript
JavaScript 自定义事件之我见
2017/09/25 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
2017/12/06 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
JS代码简洁方式之函数方法详解
2020/07/28 Javascript
[03:43]TI9战队采访——PSG.LGD
2019/08/22 DOTA
[49:15]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第二场 1月19日
2021/03/11 DOTA
分析python服务器拒绝服务攻击代码
2014/01/16 Python
使用Python对微信好友进行数据分析
2018/06/27 Python
Django框架使用内置方法实现登录功能详解
2019/06/12 Python
python 字典 setdefault()和get()方法比较详解
2019/08/07 Python
美术师范毕业生自荐信
2013/11/16 职场文书
成品仓管员岗位职责
2013/12/11 职场文书
旷课检讨书2000字
2014/01/14 职场文书
安全事故隐患排查治理制度
2015/08/05 职场文书
动画「进击的巨人」第86话播出感谢绘公开
2022/03/21 日漫