p5.js是個(gè)很方便的圖形編程器，甚至可以線上編寫(xiě)，作為一名初學(xué)者，我在這里對(duì)一幅動(dòng)圖進(jìn)行臨摹

這是原圖：

下面進(jìn)行分析：

首先這36個(gè)圓其實(shí)是270度扇形，一共只有4種旋轉(zhuǎn)方式，這都很簡(jiǎn)單

旋轉(zhuǎn)我打算用rotate來(lái)實(shí)現(xiàn)，事實(shí)上這個(gè)判斷是錯(cuò)的，因?yàn)橹笪也胖?，rotate的作用太局限了，可費(fèi)勁死我了

我們創(chuàng)建這4種扇形，因?yàn)槲沂怯胷otate實(shí)現(xiàn)旋轉(zhuǎn)，所以創(chuàng)建的扇形都在原點(diǎn)（0，0）處，之后再將它們移動(dòng)到相應(yīng)位置：

arc(0,0,100,100,0,PI+HALF_PI);

arc(0,0,100,100,PI+HALF_PI,PI);

arc(0,0,100,100,HALF_PI,0);

arc(0,0,100,100,PI,HALF_PI);

每一種扇形又一種旋轉(zhuǎn)方式，我們?cè)傺芯恳幌滦D(zhuǎn)方式：

可以發(fā)現(xiàn)，每一個(gè)扇形不是勻速轉(zhuǎn)動(dòng)，而是先快后慢，這很簡(jiǎn)單就能想到與三角函數(shù)有關(guān)，這里我打算采用sin函數(shù)的積分

與此同時(shí)，扇形旋轉(zhuǎn)在每旋轉(zhuǎn)90度都會(huì)停下，這要求我們改造一下所求的三角函數(shù)

if (sin(c)>=0){

? ? a=sin(c);

? }

? if (sin(c)<0){

? ? a=0;

? }

這樣就行了

此時(shí)出大問(wèn)題了，上面說(shuō)到過(guò)，rotete太局限了，它只能繞原點(diǎn)旋轉(zhuǎn)，然后，最煩的一點(diǎn)，無(wú)法取消它的影響，也就是說(shuō)，第二個(gè)扇形在正常旋轉(zhuǎn)同時(shí)，它仍然會(huì)繞原點(diǎn)轉(zhuǎn)動(dòng)

此時(shí)我用了push與pop，解決了這個(gè)問(wèn)題

但是

與此同時(shí)，每一次rotate的旋轉(zhuǎn)的參數(shù)d的實(shí)際效果竟然是所有我設(shè)的rotate(d)的累加，也就是說(shuō)每有一個(gè)扇形，就會(huì)使所有扇形旋轉(zhuǎn)角度多一倍

我實(shí)在搞不太懂rotate，它太龍鳴了，最后我只能按36個(gè)扇形，設(shè)了36個(gè)參數(shù)，代碼也受此影響飆到了將近900行，其實(shí)本來(lái)2，30行就能解決，之后的代碼也不好進(jìn)行修改了

好了，調(diào)整一些刷新速度和旋轉(zhuǎn)速度，進(jìn)行數(shù)學(xué)計(jì)算，這樣每一個(gè)扇形的代碼如下（要36個(gè)...）：

c=frameCount/(4*PI);

? if (sin(c)>=0){

? ? a=sin(c);

? }

? if (sin(c)<0){

? ? a=0;

? }

? d+=1/16*a;

? rotate(d);

? fill(220,220,210);?

? arc(0,0,100,100,0,PI+HALF_PI);

剩下的就很好解決了，以下是輸出結(jié)果：

下面進(jìn)行稍微修改代碼，將背景進(jìn)行霓虹化（這rotate搞得我也沒(méi)辦法搞別的新花樣了）：

let b=38;

let n=38;

let m=38;

if(b<255){

? ? b=b+1;

? }

? else{b=38;}

?if(n<255){

? ? n=n+1.5;

? }

? else{n=38;}

?if(m<255){

? ? m=m+1.7;

? }

? else{m=38;}

?

? background(m,n,b);

結(jié)果如下：

原創(chuàng)自畫(huà)像就放在下一個(gè)專欄啦