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 相关文章推荐
IE 上下滚动展示模仿Marquee机制
Dec 20 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
Sep 21 Javascript
js使用eval解析json实例与注意事项分享
Jan 18 Javascript
深入理解Javascript中的作用域链和闭包
Apr 25 Javascript
在Vue项目中使用d3.js的实例代码
May 01 Javascript
vue项目中添加单元测试的方法
Jul 21 Javascript
详解使用VueJS开发项目中的兼容问题
Aug 02 Javascript
详解基于Wepy开发小程序插件(推荐)
Aug 01 Javascript
京东优选小程序的实现代码示例
Feb 25 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 Javascript
JS猜数字游戏实例讲解
Jun 30 Javascript
elementui实现预览图片组件二次封装
Dec 29 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
咖啡豆要不要放冰箱的原因
2021/03/04 冲泡冲煮
php学习笔记 面向对象中[接口]与[多态性]的应用
2011/06/16 PHP
php 中的4种标记风格介绍
2012/05/10 PHP
PHP常用数组函数介绍
2014/07/28 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
php微信公众号开发之秒杀
2018/10/20 PHP
JS中Iframe之间传值及子页面与父页面应用
2013/03/11 Javascript
Javascript中 关于prototype属性实现继承的原理图
2013/04/16 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
2014/12/13 Javascript
使用jquery清空、复位整个输入域
2015/04/02 Javascript
jquery mobile 移动web(5)
2015/12/20 Javascript
AngularJS实现按钮提示与点击变色效果
2016/09/07 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
教你一步步用jQyery实现轮播器
2016/12/18 Javascript
nodejs进阶(6)—连接MySQL数据库示例
2017/01/07 NodeJs
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
2017/04/22 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
2017/08/25 Javascript
微信小程序实现的五星评价功能示例
2019/04/25 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
2019/08/27 Javascript
JavaScript setTimeout()基本用法有哪些
2020/11/04 Javascript
js闭包的9个使用场景
2020/12/29 Javascript
[00:33]DOTA2上海特级锦标赛 CDEC战队宣传片
2016/03/04 DOTA
小白入门篇使用Python搭建点击率预估模型
2018/10/12 Python
Python通过TensorFlow卷积神经网络实现猫狗识别
2019/03/14 Python
Python FTP文件定时自动下载实现过程解析
2019/11/12 Python
Python参数传递实现过程及原理详解
2020/05/14 Python
Pytho爬虫中Requests设置请求头Headers的方法
2020/09/22 Python
CHARLES & KEITH英国官网:新加坡时尚品牌
2018/07/04 全球购物
2014年档案管理工作总结
2014/11/17 职场文书
个人自荐书怎么写
2015/03/26 职场文书
金砖之国观后感
2015/06/11 职场文书
2019年手机市场的调研报告2篇
2019/10/10 职场文书
分享Python获取本机IP地址的几种方法
2022/03/17 Python
MySQL数据库如何使用Shell进行连接
2022/04/12 MySQL
nginx设置资源请求目录的方式详解
2022/05/30 Servers