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();

效果图

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

三、拓展

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

//存储鼠标位置，离开的时候，释放当前位置信息
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),
     ...
     )}

结果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • p5.js临摹动态图形实现方法详解

    使用p5.js临摹一个动态图形并作出拓展,供大家参考,具体内容如下 原图形 由内向外,白色圆的半径依次增大,黑色圆的半径不变: 白色圆在上一个白色圆碰到之前就开始增大半径: 图中只能存在一个周期的变化: 临摹图形 使用P5.js,依照上文的规律进行临摹 画12对圆: 相邻圆之间半径差为25: 白色圆半径以周期为60帧的正弦函数的正数值部分变化,变化幅度为22: 相邻白色圆运动函数相位差为13帧: 代码如下: function setup() { createCanvas(400, 400); f

  • 使用p5.js实现动态GIF图片临摹重现

    使用p5.js实现动态GIF图片临摹重现

    前言 根据互动媒体技术老师的实验要求,临摹了一张GIF动态图,使用p5.js进行重现. 博客里面会有实现逻辑以及实现代码,在最后还会有一张自己实现的扩展图. 原图 实现步骤 规律总结 1.观察图片可以看到,整个图是由两个部分组成的,其中一个是棍状体,一个是螺旋状体. 2.棍状体从外到内越来越窄,整个图形在做绕固定旋转圆心的匀速圆周运动. 3.螺旋状体也是在做绕固定旋转圆心的匀速圆周运动. 4.螺旋状体的旋转角速度比棍状体的旋转角速度大. 具体实现逻辑 为了方便分析,我截取了一个静态的瞬间: 那么

  • 使用p5.js临摹动态图片

    使用p5.js临摹动态图片

    本文实例为大家分享了p5.js临摹动态图片的具体代码,供大家参考,具体内容如下 1.临摹图片 2.图像运动规律 原图中一共有36个等大的四分之三圆形,按照一定的规律转动,可以等效为圆形不动,每个圆上有以其半径为边长的矩形在绕圆形的原点转动,每四个为一组,其他部分都是在重复这四个的转动规律 3.完整代码 function setup() { createCanvas(402,402); } function draw() { background(0); var dx=0; dx+=PI/180;

  • 使用p5.js临摹动态图形

    使用p5.js临摹动态图形

    一.临摹 最近正在学习用代码绘图,于是按照下面的动态图形自己临摹了一幅图形 临摹结果 观察发现,整个图案都是由基础的正六边形组成 首先创建一个画布 function setup() { createCanvas(400, 400); } 画六边形的函数为 function polygon(x, y, radius, npoints) {//绘制正多边形函数 let angle = TWO_PI / npoints; beginShape(); for (let a = 0; a < TWO_PI

  • p5.js实现动态图形临摹

    p5.js实现动态图形临摹

    p5.js实现动态图形临摹的具体代码,供大家参考,具体内容如下 临摹的动态图形 对于动态图形临摹主要在于从图形中寻找规律,包括颜色变化.空间变化.几何关系.数学规律等等,把握规律之后才可以还原图形,同时,添加新的规律也会出现不一样的效果. 观察规律 1.空间分布:整体由5行5列形状大小相同的圆构成 2.颜色规律:在与对角线平行的同一线上的所有小球颜色相同 3.单个圆动态变化规律:逐渐被掩盖后又逐渐出现,掩盖过程为匀速过程 4.整体动态变化规律:自右上到左下依次进行个体的动态变化,在与对角线平行的

  • p5.js临摹旋转爱心

    p5.js临摹旋转爱心

    运用p5.js临摹旋转爱心,供大家参考,具体内容如下 原图 我的临摹 效果不错的样子,让我们看看实现过程. 第一步.分析原图GIF 因为原图中旋转速度较快,无法用肉眼直观地找到规律.所以我把gif分解,共90帧,一帧一帧的寻找旋转规律. 从上往下顺序,第一层到第六层.从简单的说起. 第六层:逆时针匀速旋转一圈. 第五层:先逆时针旋转α,速度由v1变为0.再顺时针旋转180°+2α,速度由0变为v2,再变为0.最后逆时针旋转α,速度由0变为v1.(观察原图,我将α设为30°0) 第四层:先逆时针旋

  • 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,

  • js显示动态时间的方法详解

    js显示动态时间的方法详解

    本文实例讲述了js显示动态时间的方法.分享给大家供大家参考,具体如下: Date对象的方法 Date 对象能够使你获得相对于国际标准时间(格林威治标准时间,现在被称为 UTC-Universal Coordinated Time)或者是 Flash 播放器正运行的操作系统的时间和日期.要使用Date对象的方法,你就必须先创建一个Date对象的实体(Instance). Date 对象必须使用 Flash 5 或以后版本的播放器. Date 对象的方法并不是静态的,但是在使用时却可以应用于所指定的

  • JS获取动态添加元素的方法详解

    本文实例讲述了JS获取动态添加元素的方法.分享给大家供大家参考,具体如下: 在页面的渲染中,我们经常用遇到动态添加的DOM元素,那么在获取这些元素的时候或则为这些DOM元素的时候,我们有下面三种处理方法: 1.  在模板引擎里面添加行内事件 2.  利用事件的委托获取(常用) 3.  在ajax的监听响应完成函数后面获取 一 在模板引擎里面添加行内事件 添加行内事件就是在标签里面添加事件,这样就可以直接获取到动态添加的元素. <!-- 1.准备一个模板 --> <script id=&q

  • JS+canvas动态绘制饼图的方法示例

    JS+canvas动态绘制饼图的方法示例

    本文实例讲述了JS+canvas动态绘饼图的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net canvas饼状图</title> </head> <body> <canvas id=

随机推荐