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

這是原圖：

下面進行分析：

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

旋轉(zhuǎn)我打算用rotate來實現(xiàn)，事實上這個判斷是錯的，因為之后我才知道，rotate的作用太局限了，可費勁死我了

我們創(chuàng)建這4種扇形，因為我是用rotate實現(xiàn)旋轉(zhuǎn)，所以創(chuàng)建的扇形都在原點（0，0）處，之后再將它們移動到相應(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)方式，我們再研究一下旋轉(zhuǎn)方式：

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

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

if (sin(c)>=0){

? ? a=sin(c);

? }

? if (sin(c)<0){

? ? a=0;

? }

這樣就行了

此時出大問題了，上面說到過，rotete太局限了，它只能繞原點旋轉(zhuǎn)，然后，最煩的一點，無法取消它的影響，也就是說，第二個扇形在正常旋轉(zhuǎn)同時，它仍然會繞原點轉(zhuǎn)動

此時我用了push與pop，解決了這個問題

但是

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

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

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

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é)果：

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

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)自畫像就放在下一個專欄啦