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玩一玩WSH吧
Feb 23 Javascript
删除javascript中注释语句的正则表达式
Jun 11 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
Mar 04 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
Sep 18 Javascript
Vue.js Ajax动态参数与列表显示实现方法
Oct 20 Javascript
JS弹出窗口的运用与技巧大全
Nov 01 Javascript
JavaScript基础之AJAX简单的小demo
Jan 29 Javascript
JavaScript实现异步图像上传功能
Jul 12 Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 Javascript
vue-router启用history模式下的开发及非根目录部署方法
Dec 23 Javascript
微信小程序合法域名配置方法
May 06 Javascript
微信小程序里引入SVG矢量图标的方法
Sep 20 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分页效率终结版(推荐)
2013/07/01 PHP
PHP中获取时间的下一周下个月的方法
2014/03/18 PHP
php获得文件大小和文件创建时间的方法
2015/03/13 PHP
php统计数组元素个数的方法
2015/07/02 PHP
在PHP 7下安装Swoole与Yar,Yaf的方法教程
2017/06/02 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
Javascript Web Slider 焦点图示例源码
2013/10/10 Javascript
JS正则表达式获取分组内容的方法详解
2013/11/15 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
2015/10/28 Javascript
jQuery快速实现商品数量加减的方法
2017/02/06 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
2017/10/31 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
JavaScript使用prototype原型实现的封装继承多态示例
2018/08/31 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
微信小程序自定义组件components(代码详解)
2019/10/21 Javascript
js实现简单的打印表格
2020/01/15 Javascript
javascript实现文字跑马灯效果
2020/06/18 Javascript
[42:00]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第一场 12.13
2020/12/17 DOTA
Python制作数据导入导出工具
2015/07/31 Python
Python 的类、继承和多态详解
2017/07/16 Python
Python Learning 列表的更多操作及示例代码
2018/08/22 Python
python实现图片筛选程序
2018/10/24 Python
值得收藏的10道python 面试题
2019/04/15 Python
Python代码太长换行的实现
2019/07/05 Python
Python列表list常用内建函数实例小结
2019/10/22 Python
Keras实现DenseNet结构操作
2020/07/06 Python
CSS3的颜色渐变效果的示例代码
2017/09/29 HTML / CSS
学校岗位设置方案
2014/01/16 职场文书
平面设计专业大学生职业规划书
2014/03/12 职场文书
《沉香救母》教学反思
2014/04/19 职场文书
2014年中秋寄语
2014/08/11 职场文书
2014县委书记四风对照检查材料思想汇报
2014/09/21 职场文书
周恩来的四个昼夜观后感
2015/06/03 职场文书
小学五年级(说明文3篇)
2019/08/13 职场文书
Redis命令处理过程源码解析
2022/02/12 Redis