手绘vs码绘2——动态弓箭

手绘与码绘动态对比

前言

在上一次博客中，我们已经成功用代码重现了手绘的Q版小人，对手绘和码绘进行了几个方面的对比分析。不得不承认，码绘由于形状和编写时间的限制，在绘制静态图像的方面和手绘还是有很大差距的，但是代码也有自己的独特之处——动态感。这一次我就展示一下如何用代码编写出简单的图像动态效果。

流程目录

1.手绘内容
2.码绘内容
2.1.编写过程
2.2.最终结果
3.手绘与码绘对比
4.完整代码

手绘内容

这一次手绘我用电脑软件画了一柄弓（西幻传说那种）：

其实是试图用拉弓的手势体现出动态感，不过效果好像不太如人意…

码绘内容

编写过程

首先，想要画出静态的弓箭还是很简单的，由于弓的弯曲形状，在这里介绍一个新的函数：bezier(x1,y1,x2,y2,x3,y3,x4,y4)。
相信对贝塞尔曲线有所了解的人可以轻松理解这个函数意义，简单解释一下，就是以x1,y1确定曲线起点，以x4,y4确定曲线终点，中间两个点则决定曲线的弯曲方向和程度，这两个点的运用需要自己琢磨。

function setup() {
   
   

  createCanvas(640,480);
  noStroke();
}
function draw() {
   
   
  background("white");
  drawbow();//画弓
  drawwing();//画弦
  drawarrow(300);//画箭
}
function drawbow()
{
   
   
    stroke(220,101,107);
    strokeWeight(7);
    noFill();
    bezier(360,80,360, 120, 270, 90, 270, 200);
    bezier(360,320,360, 280, 270, 310, 270, 200);
    stroke(157,52,57);
    strokeWeight(10);
    line(270,185,270,215);
}
function drawwing(){
   
   
    
  stroke(93,76,92);
  strokeWeight(1);
  noFill();
  line(350,100,350, 300);
}
function drawarrow(x){
   
   
  strokeWeight(0);
  fill(112,210,167);
  beginShape();
  vertex(x+70, 200);
  vertex(x+80, 190);
  vertex(x+100, 190);
  vertex(x+90, 200);
  endShape(CLOSE);

  beginShape();
  vertex(x+70, 200);
  vertex(x+80, 210);
  vertex(x+100, 210);
  vertex(x+90, 200);
  endShape(CLOSE);

          stroke(68,90,69);
          strokeWeight(3);
          line(x-70,200,x+88,200);
          strokeWeight(0);
          fill(112,210,167);
          beginShape();
          vertex(x-80, 200);
          vertex(x-60, 190);
          vertex(x-65, 200);
          vertex(x-60, 210);
          endShape(CLOSE);
}

先来解释一下上述代码：线条粗细和填充已经在上一篇博客里解释过，如果看过上一次博客最终代码，就会发现代码非常繁多且没有条理，所以在这一次编写时我运用了自定义函数功能。将弓，弦和箭的代码分别写在不同函数里，在draw中调用，就能让整个代码看起来清爽很多，为了方便之后做动态，我还给箭的函数增加了代入值，可以方便控制箭的位置。

结果是这样的：

接下来，我要让弓箭动起来，这一部分的制作以及弓箭的形态其实都来源与花瓣网里的一个设计动图：http://huaban.com/pins/55607735/

我希望最后能完成弓箭循环射出的效果，因此就需要了解P5中的时间控制：

var s = second();

var m = millis();
var s = millis()/1000;

seconds()和millis()可以获取程序开始运行后的秒数和毫秒数，为了实现高精度的时间控制，我们将millis()获取的值除以1000就能得到精度高的秒数了。
繁琐的位置确定和时间分割的细节就不在这里提了，最后使用简单的if控制就能使弓箭完成一次3秒内的射击。

if(640-s*1000>=260)//0.38   注释里写的是秒数
  {
   
   
    drawarrow(640-s*1000);
  }
  e