首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onOctober 23, 2019

前言

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

原图

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

实现步骤

规律总结

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

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

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

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

具体实现逻辑

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

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

那么怎么实现呢？

我们可以创建两个函数，分别实现棍状体和螺旋体，然后再在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这些。

结果图

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

扩展作品

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

扩展作品介绍

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

中间的分别是时针，分针，秒针，他们的实现就和上面那个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);//半圆
}

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

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

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

- Author -

顾清宇

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript语句可以不以;结尾的烦恼
Mar 08 Javascript
JavaScript中对象property的删除方法介绍
Dec 30 Javascript
jQuery表单美化插件jqTransform使用详解
Apr 12 Javascript
javascript中call apply 的应用场景
Apr 16 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
Sep 01 Javascript
JS实现带导航城市列表以及输入搜索功能
Jan 04 Javascript
Vue中this.$router.push参数获取方法
Feb 27 Javascript
基于jquery实现左右上下移动效果
May 02 jQuery
element-ui的回调函数Events的用法详解
Oct 16 Javascript
Vue模板语法中数据绑定的实例代码
May 17 Javascript
详解Vue3 Composition API中的提取和重用逻辑
Apr 29 Javascript
js用正则表达式筛选年月日的实例方法
Jan 04 Javascript
p5.js临摹动态图形的方法
Oct 23 #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
Flask Web(1) nacos(1) cv2(1) 面向接口(1) Android Studio(4) OpenGL(1) exec(1) OpenAI baselines(1) MyBatis(5) tfx(1)
You might like
基于php-fpm的配置详解
2013/06/03 PHP
php中call_user_func函数使用注意事项
2014/11/21 PHP
php实现过滤UBB代码的类
2015/03/12 PHP
Ajax+PHP实现的分类列表框功能示例
2019/02/11 PHP
Avengerls vs Newbee BO3 第三场2.18
2021/03/10 DOTA
jQuery 1.3 和 Validation 验证插件1.5.1
2009/07/09 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
2011/09/10 Javascript
常用一些Javascript判断函数
2012/08/14 Javascript
固定表格行列(expression)在IE下适用
2013/07/25 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
2014/01/27 Javascript
javascript结合fileReader 实现上传图片
2015/01/30 Javascript
iframe里使用JavaScript控制主页转向的方法
2015/04/03 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
jquery checkbox的相关操作总结
2016/10/17 Javascript
BootStrap网页中代码显示用法详解
2016/10/21 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
JavaScript enum枚举类型定义及使用方法
2020/05/15 Javascript
举例详解Python中的split()函数的使用方法
2015/04/07 Python
在Python中使用元类的教程
2015/04/28 Python
简单学习Python time模块
2016/04/29 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
Python3处理HTTP请求的实例
2018/05/10 Python
python实现简单名片管理系统
2018/11/30 Python
python中如何使用insert函数
2020/01/09 Python
iPython pylab模式启动方式
2020/04/24 Python
css3实现的多级渐变下拉菜单导航效果代码
2015/08/31 HTML / CSS
纽约的奢华内衣店：Journelle
2016/07/29 全球购物
美国Rue La La闪购网站：奢侈品、中高档品牌限时折扣
2016/10/19 全球购物
Forever 21美国官网：美国标志性快时尚品牌
2017/02/20 全球购物
Ancheer官方户外和运动商店：销售电动自行车
2019/08/07 全球购物
JSF面试题：Jsf中导航的标签是什么
2013/04/20 面试题
护理学毕业生自荐信
2013/10/02 职场文书
师范生实习自我鉴定
2013/11/01 职场文书
五年级学生期末评语
2014/12/26 职场文书