p5.js临摹动态图形实现方法详解


Posted in Javascript onOctober 23, 2019

使用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));//黑色圆
 }
}

p5.js临摹动态图形实现方法详解

拓展图形

图形向外扩散的感觉是因为相邻的白色圆相位差为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));
 }
}

p5.js临摹动态图形实现方法详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Mootools 1.2教程 选项卡效果(Tabs)
Sep 15 Javascript
jQuery示例收集
Nov 05 Javascript
javascript设计模式 接口介绍
Jul 24 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
Nov 07 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
May 03 Javascript
文本框回车提交与禁止提交示例
Sep 27 Javascript
jquery数组过滤筛选方法grep()简介
Jun 06 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
Aug 31 Javascript
关于预加载InstantClick的问题解决方法
Sep 12 Javascript
通过实例讲解JS如何防抖动
Jun 15 Javascript
使用JS实现动态时钟
Mar 12 Javascript
JavaScript点击按钮生成4位随机验证码
Jan 28 Javascript
jQuery实现轮播图源码
Oct 23 #jQuery
JavaScript实现图片轮播特效
Oct 23 #Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 #jQuery
微信小程序实现多行文字超出部分省略号显示功能
Oct 23 #Javascript
Vue实现数据请求拦截
Oct 23 #Javascript
Vue项目中如何使用Axios封装http请求详解
Oct 23 #Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
Oct 23 #Javascript
You might like
PHP会话控制:Session与Cookie详解
2014/09/27 PHP
php中获取主机名、协议及IP地址的方法
2014/11/18 PHP
typecho插件编写教程(四):插件挂载
2015/05/28 PHP
Laravel重定向,a链接跳转,控制器跳转示例
2019/10/22 PHP
网页的标准,IMG不支持onload标签怎么办
2006/06/29 Javascript
JavaScript多线程的实现方法
2007/05/08 Javascript
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
JQuery与JS里submit()的区别示例介绍
2014/02/17 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
2015/11/30 Javascript
FullCalendar日历插件应用之数据展现(一)
2015/12/23 Javascript
jQuery EasyUI之DataGrid使用实例详解
2016/01/04 Javascript
字符串反转_JavaScript
2016/04/28 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
Vue.js数据绑定之data属性
2017/07/07 Javascript
微信小程序实现图片压缩功能
2018/01/26 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
2018/03/03 Javascript
基于mpvue的小程序项目搭建的步骤
2018/05/22 Javascript
vue slots 组件的组合/分发实例
2018/09/06 Javascript
ionic+html5+API实现双击返回键退出应用
2019/09/17 Javascript
使用vue打包进行云服务器上传的问题
2020/03/02 Javascript
vue请求数据的三种方式
2020/03/04 Javascript
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
[49:31]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第二场 1月29日
2021/03/11 DOTA
Python中用post、get方式提交数据的方法示例
2017/09/22 Python
Python使用Matplotlib实现Logos设计代码
2017/12/25 Python
python在OpenCV里实现投影变换效果
2019/08/30 Python
Python类class参数self原理解析
2020/11/19 Python
css3的transition效果和transfor效果示例介绍
2013/10/30 HTML / CSS
美津浓美国官网:Mizuno美国
2018/08/07 全球购物
牧马人澳大利亚官网:Wrangler澳大利亚
2019/10/08 全球购物
C语言笔试题回忆
2015/04/02 面试题
校园绿化美化方案
2014/06/08 职场文书
求职自我推荐信
2015/03/24 职场文书
Nginx 根据URL带的参数转发的实现
2021/04/01 Servers
python requests模块的使用示例
2021/04/07 Python
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python