p5.js临摹动态图形实现方法详解
更新时间：2019年10月23日 10:30:28 作者：qq_39430008
这篇文章主要为大家详细介绍了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));
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细汇总了JS读写CSS样式的方法，内容详尽，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
这篇文章主要介绍了有关iframe的实用操作，包括高度、传递数据等等，感兴趣的朋友可以参考下2014-04-04
这篇文章主要介绍了JS中的三个循环小结,需要的朋友可以参考下2017-06-06
这篇文章主要介绍了微信小程序在text文本实现多种字体样式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-11-11
这篇文章主要介绍了小程序跳转到的H5页面再跳转回跳小程序的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
一文搞懂JavaScript中bind,apply,call的实现
bind、call和apply都是Function原型链上面的方法，因此不管是使用function声明的函数，还是箭头函数都可以直接调用。本文就带你看看如何实现bind、call和apply2022-06-06
JS Angular 服务器端渲染应用设置渲染超时时间
这篇文章主要介绍了JS Angular服务器端渲染应用设置渲染超时时间,通过setTimeout模拟一个需要5秒钟才能完成调用的API展开详情，需要的小伙伴可以参考一下2022-06-06
js中事件冒泡、事件捕获一直都是困扰大家的问题，本文利用大量代码解释了js中事件冒泡与事件捕获，希望对小伙伴们有所帮助2021-08-08
这篇文章主要介绍了解决echarts的多个折现数据出现坐标和值对不上的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
本文主要分享了canvas绘制表盘时钟的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧2017-01-01
最新评论