碼繪與手繪的對比——動態

版權宣告：本文為博主原創文章，未經博主允許不得轉載。
圖形學最動人的地方就是可以用程式碼實現圖形的動態效果，之前比較了靜態效果下的碼繪與手繪，傳送門：https://blog.csdn.net/weixin_42235718/article/details/84324912
現在比較一下動態效果下的碼繪與手繪

普通動態

碼繪結果


手繪結果

程式碼實現

float outerRadius = 9;   
int numSpikes = 5;  
PVector [] points = new PVector[numSpikes *2 ];   
void setup(){
     size(640,480);
     background(0,0,32);   
     float angle = TWO_PI /points.length;     
     for(int i= 0;i<points.length;i++){
           float x,y;      
           if(i%2==0){
                    x = cos(angle * i) * outerRadius;         
                    y = sin(angle * i) * outerRadius;      
                    }      
           else {          
                    x = cos(angle * i ) * innerRadius; 
                    y = sin(angle * i ) * innerRadius;      
                    }      
           points[i] = new PVector(x,y);     
           }   
}   
void star(){
      translate(width/2,height/2);     
      smooth();      
      fill(240,238,31);      
      noStroke();      
      beginShape();      
      for(int i =0 ;i< points.length;i++){
           vertex(points[i].x,points[i].y);
      }   
      endShape(CLOSE);   
}   
void draw(){
    for(int j = 0; j<20; j++)  {
      float dx = random(-320,320);    
      float dy = random(-240,240);    
      translate(dx,dy);    
      float ang = random(5);    
      scale(ang,ang);    
      star();
      }    
    saveFrame("star" + ".png");  
}

互動動態

碼繪結果
由於GIF圖片太大無法上傳，這裡上傳簡單的幾張效果圖



手繪結果

程式碼實現

float innerRadius = 14;  
float outerRadius = 36;   
int numSpikes = 5;   
PVector [] points = new PVector[numSpikes *2 ];   
void setup(){
     size(640,480);      
     background(0,0,32);   f
     loat angle = TWO_PI /points.length;     
     for(int i= 0;i<points.length;i++){
           float x,y;      
           if(i%2==0){
                    x = cos(angle * i) * outerRadius;         
                    y = sin(angle * i) * outerRadius;      
           }      
           else {
                    x = cos(angle * i ) * innerRadius;          
                    y = sin(angle * i ) * innerRadius;
          }      
          points[i] = new PVector(x,y);     
     }  
}   
void draw(){
      translate(width/2,height/2);     
      smooth();      
      fill(255,128,0);      
      noStroke();      
      beginShape();      
      for(int i =0 ;i< points.length;i++){
           vertex(points[i].x,points[i].y);   
      }   
      endShape(CLOSE);      
      saveFrame("images/star-" + numSpikes + ".png");  
}   
void mousePressed(){
     if(mouseButton == LEFT){
          numSpikes += 1;  //add an angle   
          outerRadius -= 10;      
          PVector [] points1 = new PVector[numSpikes *2 ]; //double the number of the angles    
          points = points1;     
     }     
     if(mouseButton == RIGHT){
          innerRadius += 10;     
     }       
     setup();      
     redraw();   
}  

比較內容

技法

碼繪主要就是基於程式設計能力，繪製影象，將想法通過程式碼表達出來，其中主要包含了圖形中出現的運算，將視覺藝術轉化為程式設計問題，進而變成一部分數學問題；

在碼繪動圖的過程中：就是考慮所繪圖形頂點的個數，然後通過計算將點分類，儲存到陣列中，最後連線各個定點；此外，星星的出現是動態隨機的，設定了隨機數迴圈繪製，最後，設計了互動的部分，點選滑鼠左鍵，就會給星星加一個角，角之間的度數減少10；點選滑鼠右鍵，教的數量不變，但角之間的度數會增加10。

手繪的技法就是個人的繪畫水平了，然而直接在平板上繪畫和用鉛筆在紙上繪畫又不太一樣。相對而言在紙上畫畫更容易一些。由於碼繪的場景有背景色和圖形色，所以我直接在平板上設定了顏色進行繪畫。但是手繪星星圖案並不止侷限於一種順序，可以憑個人喜好來繪製目標圖形，但手繪結果並不是很好看。

雖說手繪的場景也是沒有星星順序的，但憑著個人直覺，會潛意識要求自己下一個星星畫在哪裡，感性支配的隨機並不是真正意義上的隨機。

手繪互動那張圖的時候，就是通過連線對角線，線條太多的時候已經沒辦法精確繪製了，整張圖就很粗糙。

就技法而言，碼繪屬於技術範疇，手繪屬於藝術範疇，兩者其實沒有很大的關係。碼繪的結果更加規範、美觀、嚴謹；手繪方法較多，有一種塗鴉的樂趣感。

工具

碼繪是基於processing實現的，通過setup和draw兩個函式，首先設定畫布的大小及顏色，再繪製圖形函式，最後在draw裡面迴圈呼叫；通過mousePressed函式實現滑鼠互動。

手繪基於平板上的軟體，也是設定了背景色和畫筆顏色，用觸膜筆直接繪畫，最後匯出檔案為png格式。

看下來兩者之間並沒有很大關係，一個是計算機合成，一個是人工操作，但原理上都是確定兩個點，然後連線，只是計算機合成的更加標準。

理念

無論是碼繪還是手繪，都是通過一些圖形合成自己想要的一幅影象，它蘊含了你在繪畫時想表達思想內容,想給欣賞者傳遞什麼資訊並在意識上交匯產生共鳴,在確定這些以後用什麼的繪畫工具風格來表現繪畫這題內容。

所以兩者的區別在於確定內容後所選擇的繪畫工具，選擇碼繪是為了呈現很規範的圖形和動態的效果，選擇手繪是呈現出每一個圖形都不太一樣的效果，好像自己在反轉。

創作體驗

碼繪過程中，由於之前沒有用過processing程式設計，然後先去網站上看了幾個主要函式的用法和如何通過演算法畫出五角星；遇到的一大難點就是怎麼保留上一幀的繪製並且持續隨機繪製，一開始是在迴圈裡面寫入演算法，發現不行，然後把星星演算法寫入函式star（），在draw裡面呼叫，嘗試了把for迴圈寫到各種地方，把演算法寫進draw（）函式，都沒有想要的效果；還嘗試了讓星星出現一下再消失，發現閃爍效果不好看，就刪掉了那部分程式碼。互動部分的內容是上網查詢資料，然後看到類似程式碼，直接拿過來用的。

手繪過程中，發現畫出來的星星一點都不規範，在遠處的小星星就直接用點來表示，塗色過程中，經常塗到外面去，就破環了之前的形狀；一開始是一個角一個角的畫，發現總是畸形，後來就一筆畫完五個角，發現效果反而好一點。

呈現效果

碼繪呈現出隨機出現星星的動態圖，關閉執行之後生成影象，黃色印在深藍色上面，給人一種發光的效果，有大有小呈現了一部分遠近關係，很像童話裡的夜晚，坐在山坡上看星星的故事，靜謐悠遠。

實現互動內容的程式碼換掉了星星的顏色，他首先形成一個星星，然後點選滑鼠左鍵，會一點一點增加角的數量，中間的圖案越來越小。這裡先放了三張圖呈現總體效果。執行過程中也試了點選滑鼠右鍵的效果，發現很醜，就沒有儲存。當點選次數達到40以上，就會給人一種太陽發出光芒萬丈的感覺，由星星到太陽，也算是收穫了意外之喜。還會隱隱覺得線條在動。

手繪就是在“醜陋”中尋找塗鴉的“可愛”，跳躍的孩子，有大有小，動來動去，跳起來、轉個方向、坐下等動作（想象）。但是手繪沒有碼繪產生的一種背景和圖形融合在一起、形成一幅完整的星空圖的感覺，手繪更像是用黃色的筆在深藍色的布上繪製的。

手繪的互動場景就比較“慘不忍睹”了，沒辦法像計算機那樣精確的繪製出每個角的度數再呈現在畫布中央。像一堆紮在一起的草。

載體

碼繪是在processing上執行的，通過滑鼠實現互動的功能，計算機自動合成影象；手繪是在平板上繪製的,用畫筆實現互動。

侷限性

碼繪沒有動態的展示每一筆的過程，在程式碼實現過程中，會出錯，例如在寫如下程式碼時，出錯了好幾次，首先是先畫star（）在進行平移和縮放，就沒有顯示，後來直接在star（）裡面新增平移和縮放，執行的時候每一個星星顯示出來會消失再顯示下一個，這並不是想要的結果，嘗試了大概五六次，才成功。

手繪的侷限性就在於畫畫過程中，有時候太醜了…畫不出有稜有角的五角星，我個人還會糾結下一個星星畫在哪裡。在繪製互動那個影象時，根本畫不出計算機執行出來的x角星，角的大小、線條長度，都是憑感覺畫滿畫布。

但是在國畫、水粉、素描方面，碼繪是遠遠不及手繪的，下圖是我在假期繪製的一張靜物素描，一筆一筆的明暗是程式碼表現不出來的。

應用

碼繪主要應用在規範的場景繪製中，如動畫背景、動態的二維或者三維場景、互動等，當需要規範精確的圖形影象時，選擇碼繪是最有效的方法。碼繪是學術追求與藝術追求的結合體。

手繪主要源於興趣，臨摹、創作、寫生…是一種藝術追求，也是中國的一種傳統文化，當今時代比較缺少比較珍貴的手法。

參考文獻

1.用程式碼畫畫——搞藝術的學程式設計有啥用？
https://blog.csdn.net/magicbrushlv/article/details/77922119
2.開始第一幅“碼繪”——以程式設計作畫的基本方法
https://blog.csdn.net/magicbrushlv/article/details/77840565
3.以程式設計的思想來理解繪畫——（一）用“一筆畫”表現“過程美”
https://blog.csdn.net/magicbrushlv/article/details/82634189
4.Processing基本函式繪製圖形
https://blog.csdn.net/hewes/article/details/76358957
5.百度——processing互動實現
https://zhidao.baidu.com/question/333052777029474605.html