p5.js临摹动态图形的方法


Posted in Javascript onOctober 23, 2019

本文实例为大家分享了p5.js临摹动态图形的具体代码,供大家参考,具体内容如下

一、描述所临摹图像的规律

p5.js临摹动态图形的方法

1、图像由多个闪光圆点和圆点之间的连线组成
2、圆点的运动轨迹是随机的
3、圆点之间靠近时会产生连线,并且相互靠近的圆点会颜色加深

二、代码实现

圆点之间产生连线,随机生成线条和运动轨迹:

//随机生成s.n条线位置信息
for (var t = [], p = 0; s.n > p; p++) {
  var h = random() * r, //随机位置
   g = random() * n,
   q = 2 * random() - 1, //随机运动方向
   d = 2 * random() - 1;
  t.push({
   x: h,
   y: g,
   xa: q,
   ya: d,
   max: 6000 //圆点靠近产生线条的距离
  })
 }

绘制闪光圆点:

//由三个透明度不同的圆组成
 context.beginPath();
 context.arc(r.x,r.y,1.7,0*Math.PI,2*Math.PI);
 context.fillStyle="#FF1493";
 context.fill();
   
 context.beginPath();
 context.arc(r.x,r.y,6,0*Math.PI,2*Math.PI);
 context.fillStyle='rgba(255,20,147,0.3)';
 context.fill();
   
 context.beginPath();
 context.arc(r.x,r.y,10,0*Math.PI,2*Math.PI);
 context.fillStyle='rgba(255,20,147,0.1)';
 context.fill();

效果图

p5.js临摹动态图形的方法

因为对于临摹动态图像仍有很多困惑的地方,无法实现多个圆点相互靠近颜色加深,非常遗憾最终不能临摹出完全一样的图像。

三、拓展

增加交互性,使得线条能够附着到鼠标上,跟随鼠标移动。
鼠标靠近圆点时,圆点会加速运动,

//存储鼠标位置,离开的时候,释放当前位置信息
window.onmousemove = function(i) {
  i = i || window.event, f.x = i.clientX, f.y = i.clientY
 },
window.onmouseout = function() {
  f.x = null, f.y = null
 };

for (v = 0; v < w.length; v++) {//从下一个点开始
    x = w[v];
    if (i !== x && null !== x.x && null !== x.y) {
     B = i.x - x.x, z = i.y - x.y, y = B * B + z * z;
     //与鼠标靠近到一定距离的时候圆点加速(x.max/2<y<x.max)
     y < x.max && (x == current_point && y >= x.max / 2 
      && (i.x -= 0.03 * B, i.y -= 0.03 * z), 
     ...
     )}

结果图

p5.js临摹动态图形的方法

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

Javascript 相关文章推荐
JS 常用校验函数
Mar 26 Javascript
JS上传前预览图片实例
Mar 25 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
May 27 Javascript
JavaScript学习笔记之Function对象
Jan 22 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
谈一谈javascript闭包
Jan 28 Javascript
js HTML5多媒体影音播放
Oct 17 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
May 25 Javascript
AngularJS中使用three.js的实例详解
Jul 21 Javascript
js如何获取图片url的Blob值并预览示例代码
Mar 07 Javascript
微信小程序模板消息推送的两种实现方式
Aug 27 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
Oct 23 #Javascript
p5.js实现动态图形临摹
Oct 23 #Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
Oct 23 #Javascript
微信小程序 生成携带参数的二维码
Oct 23 #Javascript
使用p5.js临摹动态图形
Oct 23 #Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
Oct 23 #Javascript
p5.js临摹动态图形实现方法详解
Oct 23 #Javascript
You might like
PHP 简易输出CSV表格文件的方法详解
2013/06/20 PHP
浅析PHP中的UNICODE 编码与解码
2013/06/29 PHP
在PHP中使用redis
2013/11/04 PHP
php生成二维码
2015/08/10 PHP
PHP和MYSQL实现分页导航思路详解
2017/04/11 PHP
event对象的方法 兼容多浏览器
2009/06/27 Javascript
使用原生JS实现弹出层特效
2014/12/22 Javascript
php利用curl获取远程图片实现方法
2015/10/26 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
2015/11/01 Javascript
理解javascript定时器中的setTimeout与setInterval
2016/02/23 Javascript
通过隐藏iframe实现无刷新上传文件操作
2016/03/16 Javascript
基于jquery实现无限级树形菜单
2016/03/22 Javascript
原生javascript 学习之js变量全面了解
2016/07/14 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
webpack搭建vue 项目的步骤
2017/12/27 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
2019/10/16 jQuery
python中的__slots__使用示例
2015/02/26 Python
Python 功能和特点(新手必学)
2015/12/30 Python
基于Python实现一个简单的银行转账操作
2016/03/06 Python
Python实现Mysql数据库连接池实例详解
2017/04/11 Python
Python3实现的判断回文链表算法示例
2019/03/08 Python
python实现简单银行管理系统
2019/10/25 Python
python保留小数位的三种实现方法
2020/01/07 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
PHP面试题-$message和$$message的区别
2015/12/08 面试题
什么是Smart Navigation?
2016/07/03 面试题
为什么要用EJB
2014/04/17 面试题
安全生产月活动总结
2014/05/04 职场文书
敬老院院长事迹材料
2014/05/21 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
单位委托书
2014/10/15 职场文书
地方白酒代理协议书
2014/10/25 职场文书
社区活动总结
2015/02/04 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书
自荐信范文
2019/05/20 职场文书
闭幕词的写作格式与范文!
2019/06/24 职场文书