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

前言

根据互动媒体技术老师的实验要求,临摹了一张GIF动态图,使用p5.js进行重现。
博客里面会有实现逻辑以及实现代码,在最后还会有一张自己实现的扩展图。

原图

实现步骤

规律总结

1、观察图片可以看到,整个图是由两个部分组成的,其中一个是棍状体,一个是螺旋状体。

2、棍状体从外到内越来越窄,整个图形在做绕固定旋转圆心的匀速圆周运动。

3、螺旋状体也是在做绕固定旋转圆心的匀速圆周运动。

4、螺旋状体的旋转角速度比棍状体的旋转角速度大。

具体实现逻辑

为了方便分析,我截取了一个静态的瞬间:

那么怎么实现呢?

我们可以创建两个函数,分别实现棍状体和螺旋体,然后再在draw()函数里面去实现这两个函数即可。

这是棍状体的实现函数:

//圆周运动棍状体绘制函数
function drawBoll(r, g, b, interval)

这是螺旋体的实现函数:

//圆周运动螺旋体的绘制函数
function drawBoll2( r, g, b, interval)

分两个部分来讲:

1、棍状体:其实很简单,我们可以看到静止的棍状体就是由14个小圆形组成的,由外到里半径逐渐减小,然后颜色是赤橙黄绿青蓝紫,赤橙黄绿青蓝紫,每个圆形做的是绕固定圆心的匀速圆周运动。那么,我们的实现就是可以先做一个圆形的匀速圆周运动,其他的圆形,只需要修改一下旋转半径、圆形半径以及颜色就可以了。至于圆周运动怎么实现,我会在后面讲到,往后面看就可以了。

2、螺旋体:螺旋体其实也是一个圆形的重复变换得来的,可以看到的是,螺旋体的每个圆形都一样大,不一样的是什么呢?圆形的颜色和旋转半径,还有的就是他们初始就存在的弧度间隔。那么,我们要做的其实就是画出一个匀速圆周运动的圆形,其它的就可以通过修改参数达到目的。

3、最后一步就是在draw()函数中去实现,我使用了一个for循环去实现:

for (var i =1;i < 15; i++) // for循环实现变化的重复
 {
  //其中前三个参数是颜色的RGB值,最后一个参数i实现各个圆形之间的变化
  drawBoll(139, 0, 255, i);
  drawBoll2(139, 0, 255, i);
  i++;
  drawBoll(0, 0, 255, i);
  drawBoll2(0, 0, 255, i);
  i++;
  drawBoll(0, 255, 255, i);
  drawBoll2(0, 255, 255, i);
  i++;
  drawBoll(0, 255, 0, i);
  drawBoll2(0, 255, 0, i);
  i++;
  drawBoll(255, 255, 0, i);
  drawBoll2(255, 255, 0, i);
  i++;
  drawBoll(255, 165, 0, i);
  drawBoll2(255, 165, 0, i);
  i++;
  drawBoll(255, 0, 0, i);
  drawBoll2(255, 0, 0, i);
 }

代码实现

关于这个程序,具体的p5.js代码在这里:

//准备画板
function setup() {
 createCanvas(1000, 1000);
}

//开始作画
function draw() {
 background(50); //背景颜色
 for (var i =1;i < 15; i++) // for循环实现变化的重复
 {
  //其中前三个参数是颜色的RGB值,最后一个参数i实现各个圆形之间的变化
  drawBoll(139, 0, 255, i);
  drawBoll2(139, 0, 255, i);
  i++;
  drawBoll(0, 0, 255, i);
  drawBoll2(0, 0, 255, i);
  i++;
  drawBoll(0, 255, 255, i);
  drawBoll2(0, 255, 255, i);
  i++;
  drawBoll(0, 255, 0, i);
  drawBoll2(0, 255, 0, i);
  i++;
  drawBoll(255, 255, 0, i);
  drawBoll2(255, 255, 0, i);
  i++;
  drawBoll(255, 165, 0, i);
  drawBoll2(255, 165, 0, i);
  i++;
  drawBoll(255, 0, 0, i);
  drawBoll2(255, 0, 0, i);
 }
}

//圆周运动棍状体绘制函数
function drawBoll(r, g, b, interval){
 fill(r, g, b);
 var x = 500; //圆周运动圆心的x坐标
 var y = 500; //圆周运动圆心的y坐标
 var t = millis() / 3; // 控制旋转速度的参数
 var xChange //圆周运动x坐标变化值
 var yChange; //圆周运动y坐标变化值
 var radius = interval * 15;//圆周运动的半径
 xChange = radius * Math.cos(t * Math.PI/180);
 yChange = radius * Math.sin(t * Math.PI/180);
 x += xChange;
 y += yChange;
 ellipse(x, y, interval * 5, interval * 5);
}

//圆周运动螺旋体的绘制函数
function drawBoll2( r, g, b, interval){
 fill(r, g, b);
 var x = 500; //圆周运动圆心的x坐标
 var y = 500; //圆周运动圆心的y坐标
 var t = millis() / 1 + interval * 24; //24是两个小球之间间隔的角度
 var xChange //圆周运动x坐标变化值
 var yChange; //圆周运动y坐标变化值
 var radius = interval * 15;//圆周运动的半径
 xChange = radius * Math.cos(t * Math.PI/180);
 yChange = radius * Math.sin(t * Math.PI/180);
 x += xChange;
 y += yChange;
 ellipse(x, y, 30, 30);
}

遇到的问题以及解决方案

1、怎样实现匀速圆周运动?

接着上面说的,怎么实现匀速圆周运动呢?

关于匀速圆周运动,要实现的话:
首先,我们要知道他的旋转半径、旋转圆心以及旋转角速度。
其次,就是根据这些参数,利用三角函数,去计算出运动的点的坐标与旋转圆心坐标之间的差。
最后,就是将圆心坐标补上这个计算出来的差,算出圆周运动的各个点的坐标,以这些坐标为圆心画小圆,这些小圆就是我们要的圆形了。

匀速圆周运动具体代码:

var x = 500; //圆周运动圆心的x坐标
 var y = 500; //圆周运动圆心的y坐标
 var t = millis() / 3; // 控制旋转速度的参数
 var xChange //圆周运动x坐标变化值
 var yChange; //圆周运动y坐标变化值
 var radius = interval * 15;//圆周运动的半径
 xChange = radius * Math.cos(t * Math.PI/180);
 yChange = radius * Math.sin(t * Math.PI/180);
 x += xChange;
 y += yChange;
 ellipse(x, y, interval * 5, interval * 5);

2、p5.js与之前接触的编程语言的一些不同

一个是在p5.js中写函数的时候,括号里面的形参不需要声明,举个例子吧:

function drawBoll(r, g, b, interval)

上面这个就是正确的示例,下面是错误的例子:

function drawBoll(var r, var g, var b, var interval)

也就是说,形参里面不可以写var声明,不然会报错。

还有一个就是p5.js中声明变量用 var 就可以了,不要用int, char, string这些。

结果图

扩展作品

扩展作品介绍

这是我的扩展作品,是一个时钟,加上一个鼠标的交互

中间的分别是时针,分针,秒针,他们的实现就和上面那个gif图中的棍状体的实现一样,改了一下角速度和圆形大小。改了 参数而已,我就不再细说。

主要来介绍一下这个简单的鼠标交互事件。

关于交互的话,可以看到的是这个律动的心是由两个部分组成的。

一个部分是外围的律动的粉色圆形,通过ellipse函数,这个圆形的圆心坐标就是当前鼠标的坐标,宽和高是变化的,我们可以设置一个变量size,size不断变大,到达临界值就减少,然后继续增大就可以了,代码如下:

size = size + 3;
if (size > 50)
  size = 20;
 ellipse(mouseX, mouseY, 20+size, 20+size);

一个部分就是中间的爱心,爱心是三个半圆组成,上面是两个小半圆,下面是一个大半圆,律动的效果和上面的一样。代码如下:

size = size + 3;
if (size > 50)
  size = 20;
 fill(255,0,0);//红色
 arc(mouseX+size/4, mouseY, size/2, size/2, PI, 0);//半圆
 arc(mouseX-size/4, mouseY, size/2, size/2, PI, 0);//半圆
 arc(mouseX, mouseY, size, size, 0*PI, 1*PI);//半圆

具体代码实现

//准备画板
function setup() {
 createCanvas(1000, 1000);
}

//开始作画
function draw() {
 background(50); //背景颜色
 for (var i =1;i < 15; i++) // for循环实现变化的重复
 {
  //其中前三个参数是颜色的RGB值,最后一个参数i实现各个圆形之间的变化
  drawBoll(139, 0, 255, i);
  drawBoll2(139, 0, 255, i);
  drawBoll3(139, 0, 255, i);
  i++;
  drawBoll(0, 0, 255, i);
  drawBoll2(0, 0, 255, i);
  drawBoll3(0, 0, 255, i);
  i++;
  drawBoll(0, 255, 255, i);
  drawBoll2(0, 255, 255, i);
  drawBoll3(0, 255, 255, i);
  i++;
  drawBoll(0, 255, 0, i);
  drawBoll2(0, 255, 0, i);
  drawBoll3(0, 255, 0, i);
  i++;
  drawBoll(255, 255, 0, i);
  drawBoll2(255, 255, 0, i);
  drawBoll3(255, 255, 0, i);
  i++;
  drawBoll(255, 165, 0, i);
  drawBoll2(255, 165, 0, i);
  drawBoll3(255, 165, 0, i);
  i++;
  drawBoll(255, 0, 0, i);
  drawBoll2(255, 0, 0, i);
  drawBoll3(255, 0, 0, i);
 }
 mouse(255, 192, 203);
}

//时针绘制函数
function drawBoll(r, g, b, interval){
 fill(r, g, b);
 var x = 500; //圆周运动圆心的x坐标
 var y = 500; //圆周运动圆心的y坐标
 var t = 6 * millis() / 3600000; // 控制旋转速度的参数
 var xChange //圆周运动x坐标变化值
 var yChange; //圆周运动y坐标变化值
 var radius = interval * 15;//圆周运动的半径
 xChange = radius * Math.cos(t * Math.PI/180 - Math.PI / 2);
 yChange = radius * Math.sin(t * Math.PI/180 - Math.PI / 2);
 x += xChange;
 y += yChange;
 ellipse(x, y, 30, 30);
}

//分针绘制函数
function drawBoll2( r, g, b, interval){
 fill(r, g, b);
 var x = 500; //圆周运动圆心的x坐标
 var y = 500; //圆周运动圆心的y坐标
 var t = 6 * millis() / 60000; // 控制旋转速度的参数
 var xChange //圆周运动x坐标变化值
 var yChange; //圆周运动y坐标变化值
 var radius = interval * 15;//圆周运动的半径
 xChange = radius * Math.cos(t * Math.PI/180 - Math.PI / 2);
 yChange = radius * Math.sin(t * Math.PI/180 - Math.PI / 2);
 x += xChange;
 y += yChange;
 ellipse(x, y, 20, 20);
}

//秒针绘制函数
function drawBoll3( r, g, b, interval){
 fill(r, g, b);
 var x = 500; //圆周运动圆心的x坐标
 var y = 500; //圆周运动圆心的y坐标
 var t = 6 * millis() / 1000; // 控制旋转速度的参数
 var xChange //圆周运动x坐标变化值
 var yChange; //圆周运动y坐标变化值
 var radius = interval * 15;//圆周运动的半径
 xChange = radius * Math.cos(t * Math.PI/180 - Math.PI / 2);
 yChange = radius * Math.sin(t * Math.PI/180 - Math.PI / 2);
 x += xChange;
 y += yChange;
 ellipse(x, y, 10, 10);
}

var size = 0;
// 实现鼠标交互的函数(律动的爱心)
function mouse(r, g, b){
 fill(r, g, b);
 size = size + 3;
 if (size > 50)
  size = 20;
 ellipse(mouseX, mouseY, 20+size, 20+size);
 fill(255,0,0);//红色
 arc(mouseX+size/4, mouseY, size/2, size/2, PI, 0);//半圆
 arc(mouseX-size/4, mouseY, size/2, size/2, PI, 0);//半圆
 arc(mouseX, mouseY, size, size, 0*PI, 1*PI);//半圆
}

以上便是此次实验的全部内容。

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

(0)

相关推荐

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

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

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

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

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

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

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

  • jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)

    ImageDrawer.js是一款可以实现动态绘制图片动画的jQuery插件.通过ImageDrawer.js插件,你可以制作在页面中绘制图片的动态过程,你可以控制绘制动画的持续时间等参数,非常有趣. 效果展示       源码下载 使用方法 使用该动态绘制图片插件需要在页面中引入imagedrawer.css,jquery和imagedrawer.js文件. <link rel="stylesheet" href="css/imagedrawer.css"

  • JS实现动态给图片添加边框的方法

    本文实例讲述了JS实现动态给图片添加边框的方法.分享给大家供大家参考.具体如下: 下面的JS代码设置图片的边框为2个像素,即border=2 <!DOCTYPE html> <html> <head> <script> function addBorder() { document.getElementById("compman").border="2"; } </script> </head>

  • p5.js入门教程之图片加载

    一.preload()函数与图片上传 preload()函数是一个特殊的函数,它同setup()类似,只在程序开始时运行一次,但顺序在setup()之前. 一般我们会将媒体文件(图片.声音)加载的语句放在preload()中,因为preload()有一个特性就是不加载完毕,程序就不会开始,保证了程序运行时不会出错. 在加载图片之前,我们需要先将图片文件上传. 方法是: ①点击编辑器左上角的小三角展开文件目录. ②点击文件目录右上角小三角,展开菜单后Add File. ③可以直接将图片文件拖到框里

  • js动态切换图片的方法

    本文实例讲述了js动态切换图片的方法.分享给大家供大家参考.具体实现方法如下: index.css文件如下: 复制代码 代码如下: * {      margin: 0px;padding: 0px;  }    body {      width: 632px;      /*background-color: blue;*/      margin: 0 auto;  }    #imgsCom {      background-color: yellow;      /*相对定位,为了下

  • 用p5.js制作烟花特效的示例代码

    前言 之前看过一篇文章,使用processing制作烟花特效.效果如下 fireworks 网上调查了一圈了,发现processing是一个互动编程软件,java语言发展而来.而且动画效果是跑在processing专门的模拟器上. 不过好在也有对应的web扩展语言,有processing.js和p5.js. processing.js在github上已经好几年没有人维护了,一些processing的特性支持不了.为此踩了不少坑, 本文就集中讲解如何用p5.js写烟花特效. 代码讲解 proces

  • p5.js 毕达哥拉斯树的实现代码

    本文介绍了p5.js 毕达哥拉斯树的实现代码,分享给大家,具体如下: 效果如下: 主要方法 translate() rotate() rect() push() pop() map() 主要思想 递归 草图 过程分解 一.毕达哥拉斯树的递归函数 function Pythagorian(x){ noStroke(); fill(107, 142, 35,map(x, 0, a, 150, 255));//根据正方形边长设置填充色 rect(0,0,x,x);//绘制当前的正方形 if(x <=

  • p5.js实现斐波那契螺旋的示例代码

    本篇文章主要介绍了p5.js实现斐波那契螺旋的示例代码,分享给大家,也给自己做个笔记 效果如下: 主要方法 translate() rotate() arc() 斐波那契螺旋 斐波那契螺旋线也称"黄金螺旋",是根据斐波那契数列画出来的螺旋曲线,以斐波那契数为边的正方形中画一个90度的扇形,连起来的弧线就是斐波那契螺旋. 草图 过程分解 一.定义一个空的斐波那契数组: var Fibonacci = []; 二.初始化 默认情况下draw()函数会无限重复绘图, frameRate()函

随机推荐