使用p5.js實(shí)現(xiàn)動(dòng)態(tài)GIF圖片臨摹重現(xiàn)
前言
根據(jù)互動(dòng)媒體技術(shù)老師的實(shí)驗(yàn)要求，臨摹了一張GIF動(dòng)態(tài)圖，使用p5.js進(jìn)行重現(xiàn)。
博客里面會(huì)有實(shí)現(xiàn)邏輯以及實(shí)現(xiàn)代碼，在最后還會(huì)有一張自己實(shí)現(xiàn)的擴(kuò)展圖。
原圖
實(shí)現(xiàn)步驟
規(guī)律總結(jié)
1、觀察圖片可以看到，整個(gè)圖是由兩個(gè)部分組成的，其中一個(gè)是棍狀體，一個(gè)是螺旋狀體。
2、棍狀體從外到內(nèi)越來越窄，整個(gè)圖形在做繞固定旋轉(zhuǎn)圓心的勻速圓周運(yùn)動(dòng)。
3、螺旋狀體也是在做繞固定旋轉(zhuǎn)圓心的勻速圓周運(yùn)動(dòng)。
4、螺旋狀體的旋轉(zhuǎn)角速度比棍狀體的旋轉(zhuǎn)角速度大。
具體實(shí)現(xiàn)邏輯
為了方便分析，我截取了一個(gè)靜態(tài)的瞬間：
那么怎么實(shí)現(xiàn)呢？
我們可以創(chuàng)建兩個(gè)函數(shù)，分別實(shí)現(xiàn)棍狀體和螺旋體，然后再在draw()函數(shù)里面去實(shí)現(xiàn)這兩個(gè)函數(shù)即可。
這是棍狀體的實(shí)現(xiàn)函數(shù)：
//圓周運(yùn)動(dòng)棍狀體繪制函數(shù) function drawBoll(r, g, b, interval)
這是螺旋體的實(shí)現(xiàn)函數(shù)：
//圓周運(yùn)動(dòng)螺旋體的繪制函數(shù) function drawBoll2( r, g, b, interval)
分兩個(gè)部分來講：
1、棍狀體：其實(shí)很簡單，我們可以看到靜止的棍狀體就是由14個(gè)小圓形組成的，由外到里半徑逐漸減小，然后顏色是赤橙黃綠青藍(lán)紫，赤橙黃綠青藍(lán)紫，每個(gè)圓形做的是繞固定圓心的勻速圓周運(yùn)動(dòng)。那么，我們的實(shí)現(xiàn)就是可以先做一個(gè)圓形的勻速圓周運(yùn)動(dòng)，其他的圓形，只需要修改一下旋轉(zhuǎn)半徑、圓形半徑以及顏色就可以了。至于圓周運(yùn)動(dòng)怎么實(shí)現(xiàn)，我會(huì)在后面講到，往后面看就可以了。
2、螺旋體：螺旋體其實(shí)也是一個(gè)圓形的重復(fù)變換得來的，可以看到的是，螺旋體的每個(gè)圓形都一樣大，不一樣的是什么呢？圓形的顏色和旋轉(zhuǎn)半徑，還有的就是他們初始就存在的弧度間隔。那么，我們要做的其實(shí)就是畫出一個(gè)勻速圓周運(yùn)動(dòng)的圓形，其它的就可以通過修改參數(shù)達(dá)到目的。
3、最后一步就是在draw()函數(shù)中去實(shí)現(xiàn)，我使用了一個(gè)for循環(huán)去實(shí)現(xiàn)：
for (var i =1;i < 15; i++) // for循環(huán)實(shí)現(xiàn)變化的重復(fù)
{
//其中前三個(gè)參數(shù)是顏色的RGB值，最后一個(gè)參數(shù)i實(shí)現(xiàn)各個(gè)圓形之間的變化
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);
}
代碼實(shí)現(xiàn)
關(guān)于這個(gè)程序，具體的p5.js代碼在這里：
//準(zhǔn)備畫板
function setup() {
createCanvas(1000, 1000);
}
//開始作畫
function draw() {
background(50); //背景顏色
for (var i =1;i < 15; i++) // for循環(huán)實(shí)現(xiàn)變化的重復(fù)
{
//其中前三個(gè)參數(shù)是顏色的RGB值，最后一個(gè)參數(shù)i實(shí)現(xiàn)各個(gè)圓形之間的變化
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);
}
}
//圓周運(yùn)動(dòng)棍狀體繪制函數(shù)
function drawBoll(r, g, b, interval){
fill(r, g, b);
var x = 500; //圓周運(yùn)動(dòng)圓心的x坐標(biāo)
var y = 500; //圓周運(yùn)動(dòng)圓心的y坐標(biāo)
var t = millis() / 3; // 控制旋轉(zhuǎn)速度的參數(shù)
var xChange //圓周運(yùn)動(dòng)x坐標(biāo)變化值
var yChange; //圓周運(yùn)動(dòng)y坐標(biāo)變化值
var radius = interval * 15;//圓周運(yùn)動(dòng)的半徑
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);
}
//圓周運(yùn)動(dòng)螺旋體的繪制函數(shù)
function drawBoll2( r, g, b, interval){
fill(r, g, b);
var x = 500; //圓周運(yùn)動(dòng)圓心的x坐標(biāo)
var y = 500; //圓周運(yùn)動(dòng)圓心的y坐標(biāo)
var t = millis() / 1 + interval * 24; //24是兩個(gè)小球之間間隔的角度
var xChange //圓周運(yùn)動(dòng)x坐標(biāo)變化值
var yChange; //圓周運(yùn)動(dòng)y坐標(biāo)變化值
var radius = interval * 15;//圓周運(yùn)動(dòng)的半徑
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、怎樣實(shí)現(xiàn)勻速圓周運(yùn)動(dòng)？
接著上面說的，怎么實(shí)現(xiàn)勻速圓周運(yùn)動(dòng)呢？
關(guān)于勻速圓周運(yùn)動(dòng)，要實(shí)現(xiàn)的話：
首先，我們要知道他的旋轉(zhuǎn)半徑、旋轉(zhuǎn)圓心以及旋轉(zhuǎn)角速度。
其次，就是根據(jù)這些參數(shù)，利用三角函數(shù)，去計(jì)算出運(yùn)動(dòng)的點(diǎn)的坐標(biāo)與旋轉(zhuǎn)圓心坐標(biāo)之間的差。
最后，就是將圓心坐標(biāo)補(bǔ)上這個(gè)計(jì)算出來的差，算出圓周運(yùn)動(dòng)的各個(gè)點(diǎn)的坐標(biāo)，以這些坐標(biāo)為圓心畫小圓，這些小圓就是我們要的圓形了。
勻速圓周運(yùn)動(dòng)具體代碼：
var x = 500; //圓周運(yùn)動(dòng)圓心的x坐標(biāo) var y = 500; //圓周運(yùn)動(dòng)圓心的y坐標(biāo) var t = millis() / 3; // 控制旋轉(zhuǎn)速度的參數(shù) var xChange //圓周運(yùn)動(dòng)x坐標(biāo)變化值 var yChange; //圓周運(yùn)動(dòng)y坐標(biāo)變化值 var radius = interval * 15;//圓周運(yùn)動(dòng)的半徑 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與之前接觸的編程語言的一些不同
一個(gè)是在p5.js中寫函數(shù)的時(shí)候，括號(hào)里面的形參不需要聲明，舉個(gè)例子吧：
function drawBoll(r, g, b, interval)
上面這個(gè)就是正確的示例，下面是錯(cuò)誤的例子：
function drawBoll(var r, var g, var b, var interval)
也就是說，形參里面不可以寫var聲明，不然會(huì)報(bào)錯(cuò)。
還有一個(gè)就是p5.js中聲明變量用 var 就可以了，不要用int， char， string這些。
結(jié)果圖
擴(kuò)展作品
擴(kuò)展作品介紹
這是我的擴(kuò)展作品，是一個(gè)時(shí)鐘，加上一個(gè)鼠標(biāo)的交互
中間的分別是時(shí)針，分針，秒針，他們的實(shí)現(xiàn)就和上面那個(gè)gif圖中的棍狀體的實(shí)現(xiàn)一樣，改了一下角速度和圓形大小。改了 參數(shù)而已，我就不再細(xì)說。
主要來介紹一下這個(gè)簡單的鼠標(biāo)交互事件。
關(guān)于交互的話，可以看到的是這個(gè)律動(dòng)的心是由兩個(gè)部分組成的。
一個(gè)部分是外圍的律動(dòng)的粉色圓形，通過ellipse函數(shù)，這個(gè)圓形的圓心坐標(biāo)就是當(dāng)前鼠標(biāo)的坐標(biāo)，寬和高是變化的，我們可以設(shè)置一個(gè)變量size，size不斷變大，到達(dá)臨界值就減少，然后繼續(xù)增大就可以了，代碼如下：
size = size + 3; if (size > 50) size = 20; ellipse(mouseX, mouseY, 20+size, 20+size);
一個(gè)部分就是中間的愛心，愛心是三個(gè)半圓組成，上面是兩個(gè)小半圓，下面是一個(gè)大半圓，律動(dòng)的效果和上面的一樣。代碼如下：
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);//半圓
具體代碼實(shí)現(xiàn)
//準(zhǔn)備畫板
function setup() {
createCanvas(1000, 1000);
}
//開始作畫
function draw() {
background(50); //背景顏色
for (var i =1;i < 15; i++) // for循環(huán)實(shí)現(xiàn)變化的重復(fù)
{
//其中前三個(gè)參數(shù)是顏色的RGB值，最后一個(gè)參數(shù)i實(shí)現(xiàn)各個(gè)圓形之間的變化
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);
}
//時(shí)針繪制函數(shù)
function drawBoll(r, g, b, interval){
fill(r, g, b);
var x = 500; //圓周運(yùn)動(dòng)圓心的x坐標(biāo)
var y = 500; //圓周運(yùn)動(dòng)圓心的y坐標(biāo)
var t = 6 * millis() / 3600000; // 控制旋轉(zhuǎn)速度的參數(shù)
var xChange //圓周運(yùn)動(dòng)x坐標(biāo)變化值
var yChange; //圓周運(yùn)動(dòng)y坐標(biāo)變化值
var radius = interval * 15;//圓周運(yùn)動(dòng)的半徑
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);
}
//分針繪制函數(shù)
function drawBoll2( r, g, b, interval){
fill(r, g, b);
var x = 500; //圓周運(yùn)動(dòng)圓心的x坐標(biāo)
var y = 500; //圓周運(yùn)動(dòng)圓心的y坐標(biāo)
var t = 6 * millis() / 60000; // 控制旋轉(zhuǎn)速度的參數(shù)
var xChange //圓周運(yùn)動(dòng)x坐標(biāo)變化值
var yChange; //圓周運(yùn)動(dòng)y坐標(biāo)變化值
var radius = interval * 15;//圓周運(yùn)動(dòng)的半徑
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);
}
//秒針繪制函數(shù)
function drawBoll3( r, g, b, interval){
fill(r, g, b);
var x = 500; //圓周運(yùn)動(dòng)圓心的x坐標(biāo)
var y = 500; //圓周運(yùn)動(dòng)圓心的y坐標(biāo)
var t = 6 * millis() / 1000; // 控制旋轉(zhuǎn)速度的參數(shù)
var xChange //圓周運(yùn)動(dòng)x坐標(biāo)變化值
var yChange; //圓周運(yùn)動(dòng)y坐標(biāo)變化值
var radius = interval * 15;//圓周運(yùn)動(dòng)的半徑
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;
// 實(shí)現(xiàn)鼠標(biāo)交互的函數(shù)（律動(dòng)的愛心）
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);//半圓
}
以上便是此次實(shí)驗(yàn)的全部內(nèi)容。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)彈出菜單功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
JavaScript使用ZeroClipboard操作剪切板
這篇文章主要為大家詳細(xì)介紹了JavaScript使用ZeroClipboard操作剪切板的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
本文主要分享了canvas繪制七巧板的示例代碼。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了通過js來判斷iframe里的頁面是否加載完成,需要的朋友可以參考下2014-06-06
javascript是基于原型(Prototype based)的面向?qū)ο蟮恼Z言，這點(diǎn)不同于我們熟悉的.NET，Java語言，是基于類模式(Class based)。2010-03-03
這篇文章主要介紹了js對(duì)象簡介與基本用法,結(jié)合實(shí)例形式分析了JavaScript對(duì)象的概念、功能、基本用法與操作注意事項(xiàng),需要的朋友可以參考下2020-03-03
這篇文章主要介紹了JS處理json日期格式化問題的相關(guān)資料,需要的朋友可以參考下2015-10-10
這篇文章主要給大家介紹了關(guān)于JS中6個(gè)對(duì)象數(shù)組去重的方法,javascript數(shù)組去重是一個(gè)比較常見的需求,解決方法也有很多種,文中每種解決方法都給出了示例代碼,需要的朋友可以參考下2023-07-07
功能要求:使用原生代碼實(shí)現(xiàn)，不可使用任何框架、只針對(duì)英文字符進(jìn)行匹配，并且匹配到的內(nèi)容在菜單中加粗、通過鍵盤上的上下箭頭可以對(duì)菜單進(jìn)行選擇等等，感興趣的你可以參考下2013-03-03
本篇文章主要介紹了通過JS來判斷頁面控件是否獲取焦點(diǎn)的方法。需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-01-01