使用p5.js再现动态GIF图片

前言

根据互动媒体技术老师的实验要求，用p5.js复制复制了一张GIF动态图片，博客中会有实现逻辑和实现代码，最后会有一个自我实现的展开图。

艺术品

实施步骤

规律性总结

1.通过观察画面，我们可以看到整个画面由两部分组成，一部分是棍子，另一部分是螺旋。

2.棒状的身体从外到内越来越窄，整个身材都在围绕固定的旋转中心做匀速圆周运动。

3.螺旋体也在围绕固定的旋转中心做匀速圆周运动。

4.螺旋体的旋转角速度大于棒体的旋转角速度。

具体实现逻辑

为了分析方便，我截取了一个静态瞬间：

那么如何实现呢？

我们可以创建两个函数来分别实现棒和螺旋，然后在draw()函数中实现这两个函数。

这就是棍子的实现功能：

//圆周运动简笔画功能函数drawboll (r，g，b，interval)这是螺旋线的实现功能：

//圆周运动螺旋线的绘图函数函数drawboll2 (r，g，b，interval)分为两部分：

1.棒状体：其实很简单。我们可以看到，静止的棒状体由14个小圆组成，其半径从外到内逐渐减小，然后颜色为红橙黄绿蓝紫、红橙黄绿蓝紫，每个圆围绕一个固定的中心匀速运动。那么，我们的实现就是可以匀速做圆周运动，对于其他圆，只需要修改旋转半径、圆半径和颜色。至于如何实现圆周运动，我以后再说，回头看看就行了。

2.螺旋菌：螺旋菌实际上是由一个圆反复变换得到的。可以看出，每一圈螺旋体的大小都是一样的。有什么不同？圆的颜色和旋转半径，以及它们最初存在的弧度间隔。所以，我们需要做的其实就是画一个圆周运动均匀的圆，其他的事情可以通过修改参数来实现。

3.最后一步是在draw()函数中实现它。我使用for循环来实现它：

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

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

//准备画板功能设置(){创建画布(1000，1000)；}//开始绘画功能draw(){ background(50)；//的背景颜色(var I=1；i 15I) //for循环实现变化的重复{//其中前三个参数是颜色的RGB值，最后一个参数I实现各个圆之间的变化(139，0，255，I)；drawBoll2(139，0，255，I)；我；drawBoll(0，0，255，I)；drawBoll2(0，0，255，I)；我；drawBoll(0，255，255，I)；drawBoll2(0，255，255，I)；我；drawBoll(0，255，0，I)；drawBoll2(0，255，0，I)；我；drawBoll(255，255，0，I)；drawBoll2(255，255，0，I)；我；drawBoll(255，165，0，I)；drawBoll2(255，165，0，I)；我；drawBoll(255，0，0，I)；drawBoll2(255，0，0，I)；} }//圆周运动简笔画功能drawboll (r，g，b，interval) {fill (r，g，b)；var x=500//圆周运动中心的x坐标var y=500//圆周运动中心的y坐标var t=millis()/3；//控制转速的参数变量//圆周运动x坐标变化的值变量；//圆周运动的y坐标变化值var半径=区间* 15；//圆周运动交换半径=半径* math . cos(t * math . pi/180)；yChange=半径*数学。PI/180)；x=xChangey=yChange椭圆(x，y，区间* 5，区间* 5)；}//绘图功能drawboll2 (r，g，b，区间){fill (r，g，b)；var x=500//圆周运动中心的x坐标var y=500//圆心的y坐标var t=millis()/1区间* 24；//24是两个球间隔的角度var xChange //圆周运动的x坐标的变化值var yChange//圆周运动的y坐标变化值var半径=区间* 15；//圆周运动交换半径=半径* math . cos(t * math . pi/180)；yChange=半径*数学。PI/180)；x=xChangey=yChange椭圆(x，y，30，30)；}遇到的问题和解决方案

1、如何实现匀速圆周运动？

那么上面所说的，如何实现匀速圆周运动呢？

要实现匀速圆周运动，首先需要知道它的旋转半径、旋转中心和角速度。其次，根据这些参数，利用三角函数，可以计算出运动点的坐标与旋转中心的坐标之差。最后用计算出来的差值加上中心坐标，计算出圆周运动中各点的坐标，以这些坐标为圆心画出小圆，这些小圆就是我们想要的圆。

匀速圆周运动专用代码：

var x=500//圆周运动中心的x坐标var y=500//圆周运动中心的y坐标var t=millis()/3；//控制转速的参数变量//圆周运动x坐标变化的值变量；//圆周运动的y坐标变化值var半径=区间* 15；//圆周运动交换半径=半径* math . cos(t * math . pi/180)；yChange=半径*数学。PI/180)；x=xChangey=yChange椭圆(x，y，区间* 5，区间* 5)；2.p5.js和之前接触的编程语言有一些区别

一是在p5.js中编写函数时，不需要声明括号中的参数，例如：

函数draw boll (r，g，b，interval)是上面正确的例子，下面是错误的例子：

函数draw boll (var r，var g，var b，var interval)意味着不能在参数中写var语句，否则会报错。

另一个是p5.js中声明的变量只能使用var，不能使用int、char或string。

结果图

延伸工程

延伸工程介绍

这是我的扩展工作，它是一个时钟，加上一个鼠标交互

中间的是时针、分针和秒针。它们的实现与上面gif中的棒相同，只是角速度和圆形大小发生了变化。我只是改了参数，就不赘述了。

本文主要介绍这个简单的鼠标交互事件。

至于互动，我们可以看到这种有节奏的心是由两部分组成的。

一部分是带有外围节奏的粉色圆圈。通过椭圆函数，这个圆的中心坐标就是当前鼠标的坐标，宽度和高度是变化的。我们可以设置一个变量大小，它不断增加，达到临界值时减少，然后继续增加。代码如下：

size=size 3；if(size 50)size=20；椭圆(mouseX，mouseY，20号，20号)；一部分是中间的爱。爱情是由三个半圆组成的，上面两个小半圆，下面一个大半圆。节奏效果同上。代码如下：

size=size 3；if(size 50)size=20；填充(255，0，0)；//红色弧(mousex size/4，mousey，size/2，size/2，pi，0)；//半圆弧(mousex-size/4，mousey，size/2，size/2，pi，0)；//半圆弧(mousex，mousey，size，size，0 * pi，1 * pi)；//半圆具体代码实现

//准备画板功能设置(){创建画布(1000，1000)；}//开始绘画功能draw(){ background(50)；//的背景颜色(var I=1；i 15I) //for循环实现变化的重复{//其中前三个参数是颜色的RGB值，最后一个参数I实现各个圆之间的变化(139，0，255，I)；drawBoll2(139，0，255，I)；drawBoll3(139，0，255，I)；我；drawBoll(0，0，255，I)；drawBoll2(0，0，255，I)；drawBoll3(0，0，255，I)；我；drawBoll(0，255，255，I)；drawBoll2(0，255，255，I)；drawBoll3(0，255，255，I)；我；drawBoll(0，255，0，I)；drawBoll2(0，255，0，I)；drawBoll3(0，255，0，I)；我；drawBoll(255，255，0，I)；drawBoll2(255，255，0，I)；drawBoll3(255，255，0，I)；我；drawBoll(255，165，0，I)；drawBoll2(255，165，0，I)；drawBoll3(255，165，0，I)；我；drawBoll(255，0，0，I)；drawBoll2(255，0，0，I)；drawBoll3(255，0，0，I)；}鼠标(255，192，203)；}//时针绘图功能drawboll (r，g，b，interval) {fill (r，g，b)；var x=500//圆周运动中心的x坐标var y=500//圆周运动中心的y坐标var t=6 * millis()/3600000；//控制转速的参数变量//圆周运动x坐标变化的值变量；//圆周运动的y坐标变化值var半径=区间* 15；//圆周运动的半径交换=半径*数学. cos (t *数学。PI/180-math . PI/2)；yChange=半径*数学. sin(t * Math.PI/180-数学。PI/2)；x=xChangey=yChange椭圆(x，y，30，30)；}//分针绘图功能drawboll2 (r，g，b，interval) {fill (r，g，b)；var x=500//圆周运动中心的x坐标var y=500//圆心的y坐标var t=6 * millis()/60000；//控制转速的参数变量//圆周运动x坐标变化的值变量；//圆周运动的y坐标变化值var半径=区间* 15；//圆周运动的半径交换=半径*数学. cos (t *数学。PI/180-math . PI/2)；yChange=半径*数学. sin(t * Math.PI/180-数学。PI/2)；x=xChangey=yChange椭圆(x，y，20，20)；}//二手绘图功能drawboll3 (r，g，b，区间){fill (r，g，b)；var x=500//圆周运动中心的x坐标var y=500//圆心的y坐标var t=6 * millis()/1000；//控制转速的参数变量//圆周运动x坐标变化的值变量；//圆周运动的y坐标变化值var半径=区间* 15；//圆周运动的半径交换=半径*数学. cos (t *数学。PI/180-math . PI/2)；yChange=半径*数学. sin(t * Math.PI/180-数学。PI/2)；x=xChangey=yChange椭圆(x，y，10，10)；} var size=0；//功能鼠标(r，g，b){填充(r，g，b)；size=size 3；if(size 50)size=20；椭圆(mouseX，mouseY，20号，20号)；填充(255，0，0)；//红色弧(mousex size/4，mousey，size/2，size/2，pi，0)；//半圆弧(mousex-size/4，mousey，size/2，size/2，pi，0)；//半圆弧(mousex，mousey，size，size，0 * pi，1 * pi)；//半圆}以上就是本次实验的全部内容。

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