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 相关文章推荐
jquery插件之easing 动态菜单
Aug 21 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
Jan 24 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
Nov 08 Javascript
jquery简单实现图片切换效果的方法
May 12 Javascript
javascript实现图片跟随鼠标移动效果的方法
May 13 Javascript
JavaScript获取两个数组交集的方法
Jun 09 Javascript
浅谈javascript中new操作符的原理
Jun 07 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
Sep 05 Javascript
基于easyui checkbox 的一些操作处理方法
Jul 10 Javascript
深入浅析Vue.js计算属性和侦听器
May 05 Javascript
js replace 全局替换的操作方法
Jun 12 Javascript
JS扁平化输出数组的2种方法解析
Sep 17 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截取汉字乱码问题解决方法mb_substr函数的应用
2008/03/30 PHP
那些年一起学习的PHP(一)
2012/03/21 PHP
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
2013/06/20 PHP
php取整函数ceil,floo,round的用法及介绍
2013/08/31 PHP
php获得url参数中具有&amp;的值的方法
2014/03/05 PHP
修改destoon会员公司的伪静态中的com目录的方法
2014/08/21 PHP
jquery下checked取值问题的解决方法
2012/08/09 Javascript
写出高效jquery代码的19条指南
2014/03/19 Javascript
如何获取网站icon有哪些可行的方法
2014/06/05 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
2016/06/22 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
2016/10/05 Javascript
jquery 实现回车登录详解及实例代码
2016/10/23 Javascript
JS中检测数据类型的几种方式及优缺点小结
2016/12/12 Javascript
微信小程序-小说阅读小程序实例(demo)
2017/01/12 Javascript
loading动画特效小结
2017/01/22 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
2017/07/18 jQuery
vue移动端html5页面根据屏幕适配的四种解决方法
2018/10/19 Javascript
Vue表单输入绑定的示例代码
2018/11/01 Javascript
vue简单练习 桌面时钟的实现代码实例
2019/09/19 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
Node.js中出现未捕获异常的处理方法
2020/06/29 Javascript
nodeJs项目在阿里云的简单部署
2020/11/27 NodeJs
netbeans7安装python插件的方法图解
2013/12/24 Python
python中for语句简单遍历数据的方法
2015/05/07 Python
python 默认参数问题的陷阱
2016/02/29 Python
python中利用xml.dom模块解析xml的方法教程
2017/05/24 Python
VSCode Python开发环境配置的详细步骤
2019/02/22 Python
Macbook安装Python最新版本、GUI开发环境、图像处理、视频处理环境详解
2020/02/17 Python
Tensorflow与Keras自适应使用显存方式
2020/06/22 Python
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
香港零食网购:上仓胃子
2020/06/08 全球购物
庆中秋节主题活动方案
2014/02/03 职场文书
《我不是最弱小的》教学反思
2014/02/23 职场文书
2015初中政教处工作总结
2015/07/21 职场文书
详解CocosCreator消息分发机制
2021/04/16 Javascript
Flutter Navigator 实现路由传递参数
2022/04/22 Java/Android