Day18 - 物理模拟篇 - 弹力、引力与磁力III - 成为Canvas Ninja ～理解2D渲染的精髓

二维弹性模拟(第二部分)

我们在上一篇文做完了整体案例场景的搭建，而我们接下来则是要把後续的物理运算做完~

简单用图片讲解一下这个案例的物理模型 :

画面中每一颗球都是以具有弹力的Cord(弦) 来串连，而球本身会具有重量，
这意味着整条弹力链在静止的时候，重力 和弹力 其实会维持打平的状态。

而若今天我们用某种手段去改变球与球之间的距离，这样就会破坏弹力和重力之间的平衡。

当弦(Cord) 被拉长的时候，两颗球之间的弹力就会变强，进而导致上面的球被往下拉，下面的球被往上拉，而上面的球又连锁影响更上面的球。

实录影片：

怎麽实作抓取球的部分？

这部分的话可以利用泡沫排序法(Bubble Sorting);

逻辑流程上大概是像这样的:

监听滑鼠点击到Canvas, 抓取clientX/clientY
用for loop 一一比对滑鼠点击点和每一颗球的距离
距离最小者(并且同时要小於最大容许抓取距离)就是被抓取到的那颗球

grabBall(x, y) {
    if (!!this.ballGrabbed) return;
    // 用泡沫排序法去求得目前距离滑鼠位置最近的球
    this.ballGrabbed = this.balls[0];
    let shortestDist = this.getDist(x, y, this.ballGrabbed);
    for (const ball of this.balls) {
      const dist = this.getDist(x, y, ball);
      if (dist <= shortestDist) {
        shortestDist = dist;
        this.ballGrabbed = ball;
      }
    }
    if (this.ballGrabbed.fixed || shortestDist > MAX_GRAB_DIST) return;
    this.pullBall(x, y, shortestDist)
  }