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 相关文章推荐
Prototype使用指南之form.js
Jan 10 Javascript
Packer 3.0 JS压缩及混淆工具 下载
May 03 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
Aug 13 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
谈谈对offsetleft兼容性的理解
Nov 11 Javascript
jQuery Easyui 验证两次密码输入是否相等
May 13 Javascript
jQuery实现简单的抽奖游戏
May 05 jQuery
关于使用axios的一些心得技巧分享
Jul 02 Javascript
JS使用tofixed与round处理数据四舍五入的区别
Oct 25 Javascript
KnockoutJS数组比较算法实例详解
Nov 25 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
Oct 24 Javascript
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
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实现登录注册之BootStrap表单功能
2017/09/03 PHP
php+layui数据表格实现数据分页渲染代码
2019/10/26 PHP
Jquery时间验证和转换工具小例子
2013/07/01 Javascript
Java/JS获取flash高宽的具体方法
2013/12/27 Javascript
js获取IP地址的方法小结
2014/07/01 Javascript
用循环或if语句从json中取数据示例
2014/08/18 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
2016/04/07 Javascript
javascript中Date对象的使用总结
2016/11/21 Javascript
AngularJS  ng-repeat遍历输出的用法
2017/06/19 Javascript
使用JS编写的随机抽取号码的小程序
2017/08/11 Javascript
ES6扩展运算符用法实例分析
2017/10/31 Javascript
解决vue打包css文件中背景图片的路径问题
2018/09/03 Javascript
vue实现同一个页面可以有多个router-view的方法
2018/09/20 Javascript
nodejs一个简单的文件服务器的创建方法
2019/09/13 NodeJs
[00:57]林俊杰助阵DOTA2亚洲邀请赛
2015/01/28 DOTA
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
[59:15]EG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/29 DOTA
asyncio 的 coroutine对象 与 Future对象使用指南
2016/09/11 Python
Python使用pickle模块存储数据报错解决示例代码
2018/01/26 Python
python学习入门细节知识点
2018/03/29 Python
Python实现数据可视化看如何监控你的爬虫状态【推荐】
2018/08/10 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
pandas分区间,算频率的实例
2019/07/04 Python
python yield和Generator函数用法详解
2020/02/10 Python
python3通过udp实现组播数据的发送和接收操作
2020/05/05 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
英国手机零售商:Metrofone
2019/03/18 全球购物
德国珠宝和配件商店:Styleserver
2021/02/23 全球购物
类如何去实现接口
2013/12/19 面试题
检察官就职演讲稿
2014/01/13 职场文书
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
生产部厂长助理职位说明书
2014/03/03 职场文书
初一学生评语大全
2014/04/24 职场文书
教师评语大全
2014/04/28 职场文书
python 三边测量定位的实现代码
2021/04/22 Python
关于Python OS模块常用文件/目录函数详解
2021/07/01 Python