手绘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进行动态码绘的基础知识.