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 相关文章推荐
jquery 多级下拉菜单核心代码
May 21 Javascript
利用jquery的获取JS文件中的字符串内容
Feb 14 Javascript
提高javascript效率 一次判断,而不要次次判断
Mar 30 Javascript
关于Javascript与iframe的那些事儿
Jul 04 Javascript
JS将表单导出成EXCEL的实例代码
Nov 11 Javascript
在JavaScript中操作数组之map()方法的使用
Jun 09 Javascript
深入浅析Node.js 事件循环
Dec 20 Javascript
JS简单随机数生成方法
Sep 05 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
Vue侧滑菜单组件——DrawerLayout
Dec 18 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
Nov 09 Javascript
JS新手入门数组处理的实用方法汇总
Apr 07 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
PHP SQLite类
2009/05/07 PHP
Nginx实现反向代理
2017/09/20 Servers
PHP PDOStatement::rowCount讲解
2019/02/01 PHP
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
2013/04/23 Javascript
js switch case default 的用法示例介绍
2013/10/23 Javascript
javascript里使用php代码实例
2014/12/13 Javascript
javascript Array 数组常用方法
2015/04/05 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
利用jquery实现实时更新歌词的方法
2017/01/06 Javascript
非常实用的vue导航钩子
2017/03/20 Javascript
javascript数组去重常用方法实例分析
2017/04/11 Javascript
Nodejs之TCP服务端与客户端聊天程序详解
2017/07/07 NodeJs
js实现贪吃蛇游戏 canvas绘制地图
2020/09/09 Javascript
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
Python实现爬取知乎神回复简单爬虫代码分享
2015/01/04 Python
Python中文件操作简明介绍
2015/04/13 Python
Python中逗号的三种作用实例分析
2015/06/08 Python
Python3连接MySQL(pymysql)模拟转账实现代码
2016/05/24 Python
python3模拟实现xshell远程执行liunx命令的方法
2019/07/12 Python
解决Numpy中sum函数求和结果维度的问题
2019/12/06 Python
python 递归调用返回None的问题及解决方法
2020/03/16 Python
Python在后台自动解压各种压缩文件的实现方法
2020/11/10 Python
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
Priority Pass机场贵宾室会籍计划:全球超过1200间机场贵宾室
2018/08/26 全球购物
新闻记者实习自我鉴定
2013/09/19 职场文书
临床医学专业个人的自我评价
2013/09/27 职场文书
应聘护士自荐信
2013/10/21 职场文书
网站推广策划方案
2014/06/04 职场文书
公司领导班子对照材料
2014/08/18 职场文书
学校周年庆活动方案
2014/08/22 职场文书
涨价通知
2015/04/23 职场文书
诚信考试主题班会
2015/08/17 职场文书
车辆挂靠协议书
2016/03/23 职场文书
评测 | 大屏显示带收音机的高端音箱,JBL TUNE2便携式插卡音箱实测
2021/04/24 无线电
详解Mysql数据库平滑扩容解决高并发和大数据量问题
2022/05/25 MySQL