Chapter3 - canvas动画续篇 加入Z轴也能使2D画面产生立体的空间感

https://jerry-the-potato.github.io/ChapterX-demo/
https://jerry-the-potato.github.io/MusicPlayer%20v1.1/test.html

相信敏锐的你看过昨天的文章，或多或少猜到了，这两个应用一个正是Ch1的衍生物、另一个则是以此基础再扩充的Ch2，显而易见的也运用到了物件的观念，不过由於前几天已经花了不少篇幅解释物件，暂时就先不急着着墨，给大家多一点沉淀和消化的时间，那麽就来到今天的小主题：空间深度

从2D到3D

实际上再建立canvas物件之初，我们就知道它是专门绘制2D物件的，然而，这并不妨碍我们制作3D效果，请注意，我这边的用词是「效果」，也就是说，我们没必要去追求真正的3D，只想要在2D原有的天然优势基础上，透过加入Z轴让画面中的空间显得更立体，如同美术课会学到的多点透视图，根据数量不同的透视点，在平面的画作上也能表现出不同的张力。

不过也因为原理涉及空间概念和美术经验，因此笔者这边想从程序面片面解释即可，实作上跟单点透视很像，并且把概念减化成：「离我越近的物体移动越快，离我越远的物体移动越慢」。

引力效果

那们细心的朋友们应该有在第二个应用中，找到引力效果的选项，在该实验中，想试图赋予玩家对画面的更多控制能力，因此加入引力效果，根据滑鼠相对於画面的位置，去提供变化，但如果每个图案都往一样的地方移动，那显然是有点无聊呢！因此为了赋予每个图案不同的效果，需要有一个参照物，这边可以想像成，这些星星月亮都是从远方过来，在我面前坠落，那麽，就表示，越早出现的，将会越靠近我，那就不一定要额外用一个Z轴了，或者也可以解读成：
let zIndex = dT * constant // Z轴的变化和时间成正比

那麽，只要在星星的秋风函式中这麽写：

if(focusGravity == "gravityOn"){
    this.pointX-= mouseX / WIDTH * (dT / 10);
    this.pointY-= mouseY / HEIGHT * (dT / 10);
}

就能让星星随着滑鼠反向移动了，就会有种滑鼠在星空中漫游的错觉
或者，在漩涡函式中改写：

if(focusGravity == "gravityOn"){
    this.pointX-= mouseX / WIDTH * (dT / 10) * Math.cos(revolve);
    this.pointY-= mouseY / HEIGHT * (dT / 10) * Math.sin(revolve);
}

便会使得所有的星星是朝向正中间，而有蜂拥而至的效果了。

连假的最後祝大家中秋佳节愉快！是时候收心，继续前进噜