前言
根据互动媒体技术老师的实验要求，临摹了一张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);//半圆
}
以上便是此次实验的全部内容。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。
更新日志
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]