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 相关文章推荐
jquery $.ajax入门应用二
Nov 19 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
Jun 28 Javascript
JQuery中attr方法和removeAttr方法用法实例
May 18 Javascript
举例说明如何为JavaScript的方法参数设置默认值
Nov 17 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
Dec 04 Javascript
vue-resource 拦截器使用详解
Feb 21 Javascript
Bootstrap按钮组简单实现代码
Mar 06 Javascript
详解JavaScript对象的深浅复制
Mar 30 Javascript
angularJs 表格添加删除修改查询方法
Feb 27 Javascript
浅谈vue项目打包优化策略
Sep 29 Javascript
微信小程序实现预览图片功能
Oct 22 Javascript
解决layui 三级联动下拉框更新时回显的问题
Sep 03 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
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
PHP判断是否为空的几个函数对比
2015/04/21 PHP
Laravel框架路由管理简单示例
2019/05/07 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
2014/02/11 Javascript
jquery实现点击文字可编辑并修改保存至数据库
2014/04/15 Javascript
php+js实现倒计时功能
2014/06/02 Javascript
JS动态修改iframe高度和宽度的方法
2015/04/01 Javascript
jquery插件star-rating.js实现星级评分特效
2015/04/15 Javascript
Google Maps基础及实例解析
2016/08/06 Javascript
jQuery下拉菜单的实现代码
2016/11/03 Javascript
Bootstrap Table 删除和批量删除
2017/09/22 Javascript
jQuery+CSS实现的table表格行列转置功能示例
2018/01/08 jQuery
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
2018/05/28 Javascript
解决angular2 获取到的数据无法实时更新的问题
2018/08/31 Javascript
NodeJS 实现多语言的示例代码
2018/09/11 NodeJs
vue+element table表格实现动态列筛选的示例代码
2021/01/14 Vue.js
[01:33]DOTA2上海特级锦标赛 LIQUID战队完整宣传片
2016/03/16 DOTA
详解Django中的权限和组以及消息
2015/07/23 Python
Python读写txt文本文件的操作方法全解析
2016/06/26 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
如何基于Python批量下载音乐
2019/11/11 Python
Python大数据之网络爬虫的post请求、get请求区别实例分析
2019/11/16 Python
keras之权重初始化方式
2020/05/21 Python
用Python自动清理电脑内重复文件,只要10行代码(自动脚本)
2021/01/09 Python
今天学到的CSS最新技术(与图片背景相关)
2012/12/24 HTML / CSS
正隆泰信息技术有限公司上机题
2012/06/14 面试题
机械电子工程毕业生自荐信
2013/11/23 职场文书
医学院毕业生自荐信范文
2014/03/06 职场文书
电台编导求职信
2014/05/06 职场文书
创意婚礼策划方案
2014/05/18 职场文书
领导班子个人对照检查剖析材料
2014/09/29 职场文书
部门群众路线教育实践活动对照检查材料思想汇报
2014/10/07 职场文书
2015年前台个人工作总结
2015/04/03 职场文书
python 对图片进行简单的处理
2021/06/23 Python