p5.js临摹动态图形实现方法详解
使用p5.js临摹一个动态图形并作出拓展,供大家参考,具体内容如下
原图形
由内向外,白色圆的半径依次增大,黑色圆的半径不变;
白色圆在上一个白色圆碰到之前就开始增大半径;
图中只能存在一个周期的变化;
临摹图形
使用P5.js,依照上文的规律进行临摹
画12对圆;
相邻圆之间半径差为25;
白色圆半径以周期为60帧的正弦函数的正数值部分变化,变化幅度为22;
相邻白色圆运动函数相位差为13帧;
代码如下:
function setup() { createCanvas(400, 400); frameRate(30)//图形设为30帧 } function draw() { background(0); for(i=12;i>0;i--)//一共12对圆 { y=22*sin(PI*frameCount/30-13*(i-1));//相邻白色圆运动函数相位差为13帧 if(y>=0) { a=y; } else { a=0; } fill(255); ellipse(200,200,a+50*i);//白色圆 fill(0); ellipse(200,200,25+50*(i-1));//黑色圆 } }
拓展图形
图形向外扩散的感觉是因为相邻的白色圆相位差为13帧,改变相位差可实现改变视觉效果
function setup() { createCanvas(400, 400); frameRate(30) } function draw() { background(0); for(i=12;i>0;i--) { y=22*sin(PI*frameCount/30-12*(i-1));//相位差设为12 if(y>=0) { a=y; } else { a=0; } fill(255); ellipse(200,200,a+50*i); fill(0); ellipse(200,200,25+50*(i-1)); } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
用DIV完美模拟createPopup 弹出窗口(脚本之家修正版),支持Firefox,ie,chrome
最近要重构公司的一个站,有一个拾色器只支持IE,不支持FIREFOX CHROME等浏览器,花了点时间对照原来的重写了个。完美实现createPopup方法的弹窗效果,欢迎大家拍砖!2009-09-09JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
ECMAScript中的运算符,学习js的朋友可以看看2012-02-02webpack里使用jquery.mCustomScrollbar插件的方法
malihu-custom-scrollbar-plugin是一个依赖jquery的自定义网页滚动条样式插件,这篇文章主要介绍了webpack里使用jquery.mCustomScrollbar插件的方法,感兴趣的小伙伴们可以参考一下2018-05-05User Scripts: Video Download by User Scripts
User Scripts: Video Download by User Scripts...2007-05-05文本框(input)获取焦点(onfocus)时样式改变的示例代码
本篇文章主要是对文本框(input)获取焦点(onfocus)时样式改变的示例代码进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助2014-01-01微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
本文通过实例代码给大家介绍了微信小程序使用scroll-view标签实现自动滑动到底部功能,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧2018-11-11
最新评论