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 相关文章推荐
使用Modello编写JavaScript类
Dec 22 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
Aug 04 Javascript
Mvc提交表单的四种方法全程详解
Aug 10 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
Oct 15 Javascript
JavaScript函数基础详解
Feb 03 Javascript
JS实现AES加密并与PHP互通的方法分析
Apr 19 Javascript
详解如何构建Angular项目目录结构
Jul 13 Javascript
使用store来优化React组件的方法
Oct 23 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
Mar 15 Javascript
微信小程序获取用户openid的实现
Dec 24 Javascript
vue实现百度下拉列表交互操作示例
Mar 12 Javascript
在Uni中使用Vue的EventBus总线机制操作
Jul 31 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
YII Framework教程之异常处理详解
2016/03/14 PHP
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
2014/12/17 Javascript
Javascript监视变量变化的方法
2015/06/09 Javascript
javascript bom是什么及bom和dom的区别
2015/11/26 Javascript
JavaScript常用函数工具集:lao-utils
2016/03/01 Javascript
jQuery插件formValidator实现表单验证
2016/05/23 Javascript
Bootstrap简单表单显示学习笔记
2016/11/15 Javascript
AngularJS中指令的四种基本形式实例分析
2016/11/22 Javascript
几行js代码实现自适应
2017/02/24 Javascript
vue中锚点的三种方法
2018/07/06 Javascript
微信小程序在线客服自动回复功能(基于node)
2019/07/03 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
Python实现各种排序算法的代码示例总结
2015/12/11 Python
Python卸载模块的方法汇总
2016/06/07 Python
Python实现找出数组中第2大数字的方法示例
2018/03/26 Python
Python序列循环移位的3种方法推荐
2018/04/09 Python
Python拼接字符串的7种方法总结
2018/11/01 Python
运用Python的webbrowser实现定时打开特定网页
2019/02/21 Python
python实现爬虫抓取小说功能示例【抓取金庸小说】
2019/08/09 Python
python2使用bs4爬取腾讯社招过程解析
2019/08/14 Python
python multiprocessing多进程变量共享与加锁的实现
2019/10/02 Python
Python绘制三角函数图(sin\cos\tan)并标注特定范围的例子
2019/12/04 Python
keras 如何保存最佳的训练模型
2020/05/25 Python
5款实用的python 工具推荐
2020/10/13 Python
python 模拟登陆github的示例
2020/12/04 Python
文秘个人求职信范文
2014/04/22 职场文书
小学教师评语大全
2014/04/23 职场文书
企业安全生产承诺书
2014/05/22 职场文书
交通事故委托书范本(2篇)
2014/09/21 职场文书
十八大标语口号
2014/10/09 职场文书
房屋转让协议书
2014/10/18 职场文书
九寨沟导游词
2015/02/02 职场文书
python模块与C和C++动态库相互调用实现过程示例
2021/11/02 Python
WebWorker 封装 JavaScript 沙箱详情
2021/11/02 Javascript
Python加密与解密模块hashlib与hmac
2022/06/05 Python