運用p5.js臨摹旋轉(zhuǎn)愛心,供大家參考,具體內(nèi)容如下
創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù),包含不限于成都做網(wǎng)站、成都網(wǎng)站制作、荔浦網(wǎng)絡(luò)推廣、重慶小程序開發(fā)、荔浦網(wǎng)絡(luò)營銷、荔浦企業(yè)策劃、荔浦品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等,從售前售中售后,我們都將竭誠為您服務(wù),您的肯定,是我們最大的嘉獎;創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供荔浦建站搭建服務(wù),24小時服務(wù)熱線:18980820575,官方網(wǎng)址:muchs.cn
原圖
我的臨摹
效果不錯的樣子,讓我們看看實現(xiàn)過程。
第一步、分析原圖GIF
因為原圖中旋轉(zhuǎn)速度較快,無法用肉眼直觀地找到規(guī)律。所以我把gif分解,共90幀,一幀一幀的尋找旋轉(zhuǎn)規(guī)律。
從上往下順序,第一層到第六層。從簡單的說起。
第六層:逆時針勻速旋轉(zhuǎn)一圈。
第五層:先逆時針旋轉(zhuǎn)α,速度由v1變?yōu)?。再順時針旋轉(zhuǎn)180°+2α,速度由0變?yōu)関2,再變?yōu)?。最后逆時針旋轉(zhuǎn)α,速度由0變?yōu)関1。(觀察原圖,我將α設(shè)為30°0)
第四層:先逆時針旋轉(zhuǎn)α,再順時針旋轉(zhuǎn)3×180°+2α,最后逆時針旋轉(zhuǎn)α。速度規(guī)律與第五層相同。
第三層:先逆時針旋轉(zhuǎn)α,再順時針旋轉(zhuǎn)5×180°+2α,最后逆時針旋轉(zhuǎn)α。速度規(guī)律與第五層相同。
第二層:先逆時針旋轉(zhuǎn)α,再順時針旋轉(zhuǎn)7×180°+2α,最后逆時針旋轉(zhuǎn)α。速度規(guī)律與第五層相同。
第一層:先逆時針旋轉(zhuǎn)α,再順時針旋轉(zhuǎn)9×180°+2α,最后逆時針旋轉(zhuǎn)α。速度規(guī)律與第五層相同。
(注:使用時記得轉(zhuǎn)化為弧度制。)
第二步、繪制基本形狀
首先創(chuàng)建畫布,設(shè)置背景色
function setup() { createCanvas(windowWidth, windowHeight,WEBGL); } function draw() { background(220); }
繪制第一層立方體
值得注意的是translate()函數(shù)使用的是偏移量,而不是坐標(biāo)值。
function drawHeart1(BoxSize,posX,posY,posZ,r,g,b) //第一排方塊 { fill(r,g,b); translate(posX-(10/9)*BoxSize,posY,posZ); box(BoxSize); translate(-(10/9)*BoxSize,0,0); box(BoxSize); translate(3*(10/9)*BoxSize,0,0); box(BoxSize); translate((10/9)*BoxSize,0,0); box(BoxSize); translate(0,0,(10/9)*BoxSize); box(BoxSize); translate(-(10/9)*BoxSize,0,0); box(BoxSize); translate(-2*(10/9)*BoxSize,0,0); box(BoxSize); translate(-(10/9)*BoxSize,0,0); box(BoxSize); }
在draw()函數(shù)中,添加代碼。
drawHearts()中第一個參數(shù)是立方體的邊長,第二到第四個參數(shù)是XYZ軸的偏移量,最后三個為立方體顏色RGB值。
push(); translate(0,0); drawHeart1(40*size1,0,-2*40*10/9,-20,251,68,104); pop();
以此類推畫出其余五層的立方體。
效果圖如上(此處調(diào)整了一下相機(jī)位置)
第三步、旋轉(zhuǎn)
在之前繪制每一層時,要注意物體的X、Z為0,因為rotateY()函數(shù)繞Y軸旋轉(zhuǎn),否則每一層在旋轉(zhuǎn)時不是以繞其中心旋轉(zhuǎn)。
第六層的旋轉(zhuǎn)
①設(shè)置旋轉(zhuǎn)角度變量
②在draw()函數(shù)中關(guān)于第六層代碼。其中theta6-=360*PI/180/90表示一幀旋轉(zhuǎn)的弧度增量。
②在draw()函數(shù)中關(guān)于第五層代碼。
③RotateCubes5()函數(shù)。第一個參數(shù)表示逆時針旋轉(zhuǎn)角度,第二個參數(shù)表示順時針旋轉(zhuǎn)角度的二分之一,第四、五、六個參數(shù)用來判斷旋轉(zhuǎn)時幀的范圍,并用于計算旋轉(zhuǎn)角度。
以第一個if語句為例
在第一幀到第f1幀時,theta5減小,即實現(xiàn)逆時針繞Y軸旋轉(zhuǎn)。其中,frameCount表示當(dāng)前第幾幀。frameCount%90,因為原圖有90幀。(f1-frameCount%90)* delta1 * PI *180/Summation(0,f1-1)實現(xiàn)1到f1范圍內(nèi)當(dāng)前幀數(shù)越大,旋轉(zhuǎn)弧度越小。
function RotateCubes5(delta1,delta2,f1,f2,f3){ if(frameCount%90>=1&&frameCount%90<=f1) { theta5-=(f1-frameCount%90)*delta1*PI/180/Summation(0,f1-1); } if(frameCount%90>=f1+1&&frameCount%90<=f2) { theta5+=(frameCount%90-f1-1)*delta2*PI/180/Summation(0,f2-f1-1); } if(frameCount%90>=f2+1&&frameCount%90<=f3) { theta5+=(f3-frameCount%90)*delta2*PI/180/Summation(0,f2-f1-1); } if(frameCount%90>=f3+1&&frameCount%90<=89) { theta5-=(frameCount%90-f3-1)*delta1*PI/180/Summation(0,f1-1); } if(frameCount%90==0) { theta5-=(90-f3-1)*delta1*PI/180/Summation(0,f1-1); } return theta5; }
③Summation()函數(shù),即高斯求和。
function Summation(n1,n2) { return (n1+n2)*(n2-n1+1)/2; }
第一到四層的旋轉(zhuǎn)
第一到四層的旋轉(zhuǎn)與第五層一致,修改傳入?yún)?shù)即可。
其實RotateCubes()的內(nèi)容是一致的,最后返回一個theta。但當(dāng)我為theta賦值后return(如下圖),產(chǎn)生效果發(fā)生錯誤 ,分配數(shù)據(jù)發(fā)生錯誤。第一次接觸p5.js,感覺代碼寫得比較冗余,后續(xù)學(xué)習(xí)中優(yōu)化。
以上,即完成了對原圖的臨摹。
拓展作品
讓立方體的大小隨幀數(shù)變化,90幀一循環(huán)。
隨幀數(shù)增加,深粉立方體變小,淺粉立方體變大。并在一瞬間,深粉立方體和淺粉立方體大小相同,形成一個完整的愛心。
if(frameCount%200>=0&&frameCount%200<=99) //擴(kuò)展作品2 { size1=frameCount%100*0.02; size2=(100-frameCount%100)*0.02; size3=frameCount%100*0.02; size4=(100-frameCount%100)*0.02; size5=frameCount%100*0.02; size6=(100-frameCount%100)*0.02; } if(frameCount%200>=100&&frameCount%200<=199) { size1=(100-frameCount%100)*0.02; size2=frameCount%100*0.02; size3=(100-frameCount%100)*0.02; size4=frameCount%100*0.02; size5=(100-frameCount%100)*0.02; size6=frameCount%100*0.02; }
體會:
三維圖形比起二維圖像要多一個z參數(shù),所以在排布位置的時候難度增大,且translate()函數(shù)的參數(shù)是偏移量,又為圖形繪制增加了難度。
本GIF又一難點在于運動規(guī)律不能用肉眼直接獲得,需要把GIF分解到每一幀,逐幀觀察。運動規(guī)律相對復(fù)雜,且每一層運動規(guī)律都不同,需要控制的變量較多。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
本文名稱:p5.js臨摹旋轉(zhuǎn)愛心
分享路徑:http://muchs.cn/article48/ihdehp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供手機(jī)網(wǎng)站建設(shè)、做網(wǎng)站、搜索引擎優(yōu)化、App設(shè)計、ChatGPT、定制網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)