溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

使用p5.js實(shí)現(xiàn)動(dòng)態(tài)GIF圖片臨摹重現(xiàn)

發(fā)布時(shí)間：2020-10-09 08:10:31 來(lái)源：腳本之家 閱讀：227 作者：顧清宇 欄目：web開(kāi)發(fā)

前言

根據(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ò)展圖。

原圖

使用p5.js實(shí)現(xiàn)動(dòng)態(tài)GIF圖片臨摹重現(xiàn)

實(shí)現(xiàn)步驟

規(guī)律總結(jié)

1、觀察圖片可以看到，整個(gè)圖是由兩個(gè)部分組成的，其中一個(gè)是棍狀體，一個(gè)是螺旋狀體。

2、棍狀體從外到內(nèi)越來(lá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)的瞬間：

使用p5.js實(shí)現(xiàn)動(dòng)態(tài)GIF圖片臨摹重現(xiàn)

那么怎么實(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è)部分來(lái)講：

1、棍狀體：其實(shí)很簡(jiǎn)單，我們可以看到靜止的棍狀體就是由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ù)變換得來(lái)的，可以看到的是，螺旋體的每個(gè)圓形都一樣大，不一樣的是什么呢？圓形的顏色和旋轉(zhuǎn)半徑，還有的就是他們初始就存在的弧度間隔。那么，我們要做的其實(shí)就是畫(huà)出一個(gè)勻速圓周運(yùn)動(dòng)的圓形，其它的就可以通過(guò)修改參數(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)備畫(huà)板
function setup() {
 createCanvas(1000, 1000);
}

//開(kāi)始作畫(huà)
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);
}

遇到的問(wèn)題以及解決方案

1、怎樣實(shí)現(xiàn)勻速圓周運(yùn)動(dòng)？

接著上面說(shuō)的，怎么實(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ì)算出來(lái)的差，算出圓周運(yùn)動(dòng)的各個(gè)點(diǎn)的坐標(biāo)，以這些坐標(biāo)為圓心畫(huà)小圓，這些小圓就是我們要的圓形了。

勻速圓周運(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與之前接觸的編程語(yǔ)言的一些不同

一個(gè)是在p5.js中寫(xiě)函數(shù)的時(shí)候，括號(hào)里面的形參不需要聲明，舉個(gè)例子吧：

function drawBoll(r, g, b, interval)

上面這個(gè)就是正確的示例，下面是錯(cuò)誤的例子：

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

也就是說(shuō)，形參里面不可以寫(xiě)var聲明，不然會(huì)報(bào)錯(cuò)。

還有一個(gè)就是p5.js中聲明變量用 var 就可以了，不要用int， char， string這些。

結(jié)果圖

使用p5.js實(shí)現(xiàn)動(dòng)態(tài)GIF圖片臨摹重現(xiàn)

擴(kuò)展作品

使用p5.js實(shí)現(xiàn)動(dòng)態(tài)GIF圖片臨摹重現(xiàn)

擴(kuò)展作品介紹

這是我的擴(kuò)展作品，是一個(gè)時(shí)鐘，加上一個(gè)鼠標(biāo)的交互

中間的分別是時(shí)針，分針，秒針，他們的實(shí)現(xiàn)就和上面那個(gè)gif圖中的棍狀體的實(shí)現(xiàn)一樣，改了一下角速度和圓形大小。改了 參數(shù)而已，我就不再細(xì)說(shuō)。

主要來(lái)介紹一下這個(gè)簡(jiǎn)單的鼠標(biāo)交互事件。

關(guān)于交互的話，可以看到的是這個(gè)律動(dòng)的心是由兩個(gè)部分組成的。

一個(gè)部分是外圍的律動(dòng)的粉色圓形，通過(guò)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è)部分就是中間的愛(ài)心，愛(ài)心是三個(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)備畫(huà)板
function setup() {
 createCanvas(1000, 1000);
}

//開(kāi)始作畫(huà)
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)的愛(ài)心）
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)的全部?jī)?nèi)容。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手