手繪VS碼繪-2

這系列文章主要是記錄博主在互動媒體課程中的收穫和體會

上次我們比較了手繪和碼繪在繪製靜態圖畫中的異同。今天我們要嘗試的是繪製出動態的作品。
使用的工具與上次相同，爲VSCode編輯器和 p5.js庫，不再贅述。
這次我想在上次的靜態蜘蛛的基礎上繪製一個可以與鼠標互動，自身也有動畫的小蜘蛛出來。

首先修改上次的繪製蜘蛛的代碼使得其包含了座標變量和腿移動還有縮放的變量，以便後續編寫移動函數的操作。

function drawspider(x,y,m,n) {
  background(220); 
  // translate(p5.Vector.fromAngle(millis() / 1000, 80));  
  scale(m);  
  noStroke();  
  fill('#CD0000');  
  ellipse(x+75,y+55,230,210);  
  //身體  f
  ill('#EEC900');  
  ellipse(x+75,y+75,210,160);   
  fill('#A52A2A');  
  ellipse(x+75,y+100,190,100);   
  fill('#8B0000');  
  ellipse(x+75,y-200+225,20,30);  
  ellipse(x+35,y-200+235,15,20);  
  ellipse(x+115,y-200+235,15,20);
  //腿  
  fill('#8B0A50');  
  beginShape();//左上  
  vertex(x+25,y-200+200)  
  vertex(x-200+175,y-200+155);  
  vertex(x-200+120+n,y-200+225);  
  vertex(x-200+175,y-200+175);  
  vertex(x-200+225,y-200+200);  
  endShape();  
  beginShape();
  //左中上  
  vertex(x-200+200,y-200+250)  
  vertex(x-200+150,y-200+205);  
  vertex(x-200+95+n,y-200+275);  
  vertex(x-200+150,y-200+225);  
  vertex(x-200+200,y-200+250);  
  endShape();  
  beginShape();//左中下  
  vertex(x-200+200,y-200+280)  
  vertex(x-200+150,y-200+235);  
  vertex(x-200+95+n,y-200+305);  
  vertex(x-200+150,y-200+255);  
  vertex(x-200+200,y-200+280);  
  endShape();  
  beginShape();
  //左下  
  vertex(x-200+220,y-200+330)  
  vertex(x-200+170,y-200+285);  
  vertex(x-200+115+n,y-200+355);  
  vertex(x-200+170,y-200+305);  
  vertex(x-200+220,y-200+330);  
  endShape();  
  beginShape();
  //右上 
  vertex(x-200+325,y-200+200)  
  vertex(x-200+375,y-200+155);  
  vertex(x-200+430+n,y-200+225);  
  vertex(x-200+375,y-200+175);  
  vertex(x-200+325,y-200+200);  
  endShape();  
  beginShape();
  //右中上  
  vertex(x-200+350,y-200+250);
  vertex(x-200+400,y-200+205);  
  vertex(x-200+455+n,y-200+275);  
  vertex(x-200+400,y-200+225);  
  vertex(x-200+350,y-200+250);  
  endShape();  
  beginShape();
  //右中下  
  vertex(x-200+350,y-200+280)  
  vertex(x-200+400,y-200+235);  
  vertex(x-200+455+n,y-200+305);  
  vertex(x-200+400,y-200+255);  
  vertex(x-200+350,y-200+280);  
  endShape();  
  beginShape();
  //右下  
  vertex(x-200+330,y-200+330)  
  vertex(x-200+380,y-200+285);  
  vertex(x-200+435+n,y-200+355);  
  vertex(x-200+380,y-200+305);  
  vertex(x-200+330,y-200+330);  
  endShape();
  //眼睛  
  fill(255);  
  ellipse(x-200+245,y-200+320,85,100);  
  ellipse(x-200+310,y-200+320,85,100);  
  noStroke();  
  ellipse(x-200+280,y-200+320,55,55);  
  stroke(0);  
  //眼珠  
  fill(0);  
  ellipse(x-200+260,y-200+320,23,23);  
  ellipse(x-200+295,y-200+320,30,30);  
  fill(255);  
  ellipse(x-200+256,y-200+315,10,10);  
  ellipse(x-200+290,y-200+315,15,15);}

接着我們編寫鼠標相應事件，主要思路是使用兩個數組，一個用來存放蜘蛛現在的位置，一個用來存放在鼠標pressed事件發生的時候鼠標的座標，並計算兩者差值和將來移動的步長，同時限制鼠標在畫布之外的時候點擊不起作用。

function mousePressed() {
  if(a1==mouseX && b1==mouseY){
      return;  
  }else if(mouseX>650||mouseX<0||mouseY>650||mouseY<0){
      return;  
  }else{
      a2=mouseX; 
      b2=mouseY;  
      var t=(sqrt((a2-a1)*(a2-a1)+(b2-b1)*(b2-b1))/5);  
      ta=(a2-a1)/t;  
      tb=(b2-b1)/t;  
   }
}

接下來輪到在開頭的設置和全局變量的聲明，以便在draw（）函數中可以使用mousePressed（）函數中計算出的值。

function setup() {
  createCanvas(650, 650);  
  background(220);  
  frameRate(10);}
var a1=200; var b1=200;
var a2=a1;var b2=b1;
var ta;var tb;
var n=0;var m=1;

最後是繪製函數draw（）。這裏我的思路是每一幀繪製一次蜘蛛，並且每次執行draw之後逐漸疊加繪製蜘蛛的座標，使其有向鼠標點擊位置移動的效果，使用if來判斷蜘蛛是否移動到位；同時嵌套不斷地加減n的值營造出蜘蛛的腿一直在移動的效果。

function draw(){
   drawspider(a1,b1,m,n);
  //line(a1,b1,a2,b2);  
  if(abs(a1-a2)>5){
      a1=a1+ta;b1=b1+tb;    
      if (n<15 && n>-15){
            n+=15    
            }else{
            n-=15;
            }  
      }  
}

最終得到的效果如下

可以看到，蜘蛛朝着鼠標點擊的方向前進，同時八條小腿在不斷擺動。

手繪如果想達到動態的效果的話基本上有兩種方法：一種是用動作線或者飄逸的繪畫手法和技巧來繪製靜態圖畫使觀看的人感覺到畫中的角色在運動；還有一種方法是紙上動畫，即繪製大量的圖片以後每張圖片作爲一幀連續播放利用視覺殘留的現象給人動起來的感覺。總而言之都比編程繪畫要來的麻煩與困難的多。
至於與鼠標的交互，那更是手繪所不能想象的事情。

可以看出，在動態效果展現這方面，碼繪是佔據着絕對的優勢的，不僅相對於手繪而言更加方便快捷，而且能夠輕而易舉的做到與鍵盤或者鼠標之間的交互，呈現的效果更加，也易於與他人分享。當然，對於熟練的動畫人員而說，碼繪還是有着很大的侷限性，無法做很多高難度的動作和角度的展示，而手繪依靠人的手和腦力，是擁有更多更大的可能性的。

總而言之，在簡單的動畫效果上碼繪的優勢是壓倒性的；如果上升到複雜動態的製作的話，手繪就會更勝一籌了。

參考鏈接:
1.手繪VS碼繪-1.

2.以編程的思想來理解繪畫—— （一）用”一筆畫“表現“過程美”.

3.使用p5.js進行動態碼繪的基礎知識.