“運動”主題創作

在上一篇文章中，我介紹了利用p5.js繪製一個靜態的圖片的過程。但事實上，很多規律運動的物體也是十分具有美感的。比如下圖：

在這兩幅動圖中，方塊兒經過一系列的變換回到初始的位置，迴圈往復。同時，三原色的應用簡潔、讓人舒適。接下來，我們一起來用Unity實現第二個動圖的製作。

思路

第二個動圖中，大方塊最終分裂成3 * 3 * 3個正方體，所以我們可以用27個小方塊進行變換重組得到我們的動圖。
由於需要三維的正方體，所以我使用c4d建好模型後直接匯入Unity中進行下一步操作。
在Unity中實現物體的位移是十分簡單的。但這27個立方體的運動需要遵循一定的規律。因此將這些立方體分為六組（上下左右前後），這樣每次運動只需要呼叫相應的分組就可以了。
運動的問題解決了，但怎樣讓它們按照順序依次移動位置並迴圈呢？在這裡我們設定可以隨時間變化的引數，當滿足條件時則進行下一步運動。

指令碼

1.分組

public GameObject[] left = new GameObject[9];
public GameObject[] right = new GameObject[9];
public GameObject[] front = new GameObject[9];
public GameObject[] back = new GameObject[9];
public GameObject[] up = new GameObject[9];
public GameObject[] down = new GameObject[9];

2.引數

    public float timer1 ;
    public float timer2 ;
    public float timer3;
    public float timer4;
    public float timer5 ;
    public float timer6 ;
 

3.移動

void moveX1(GameObject []a)
    {
        int i = 0;
        for (i = 0; i < 9; i++){      
            a[i].transform.position = Vector3.MoveTowards(a[i].transform.localPosition, new Vector3(-0.05f, a[i].transform.localPosition.y, a[i].transform.localPosition.z), speed * Time.deltaTime);
        }
    }
 

成果

碼繪：

手繪：

總結

實現這個動圖很簡單，難點在於怎樣構思這樣一個巧妙的運動。從自己實現的效果中可以看出，有一部分並沒有完全遮住，雖然我調節了很多引數，但還是沒有辦法完全做到像例圖一樣。

一點思考

所謂動畫技術，較規範的定義是採用逐幀拍攝物件並連續播放而形成運動的影像技術。博文 https://blog.csdn.net/magicbrushlv/article/details/77922119 中提到”程式設計可以實現畫不出的效果，接軌前沿藝術",而在我們這次的繪製過程中，碼繪通過計算機精確的時間控制達到逐幀繪製從而動起來。而手繪要實現運動，可以採用我們小時候翻連環畫的方法，快速翻頁讓方塊動起來，但這並不是真正的“運動”。
從寬泛的角度考慮，Ae等軟體實現動畫也是間接靠程式碼完成。我記得在開學初時有位老師跟我們講，我們數字媒體技術專業就是為藝術生服務的，他們負責設計，而我們需要考慮的是怎樣實現。就動畫而言，如果程式設計師不瞭解動畫的製作流程，不懂得畫是如何動起來的，又怎能寫出能夠服務於藝術的程式碼呢？

參考

1.《用程式碼畫畫》：
0.1 用程式碼畫畫——搞藝術的學程式設計有啥用？
https://blog.csdn.net/magicbrushlv/article/details/77922119
1.1 開始第一幅“碼繪”——以程式設計作畫的基本方法
https://blog.csdn.net/magicbrushlv/article/details/77840565
2. 以程式設計的思想來理解繪畫—— （一）用”一筆畫“表現“過程美”
https://blog.csdn.net/magicbrushlv/article/details/82634189