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);
}

便會使得所有的星星是朝向正中間，而有蜂擁而至的效果了。

連假的最後祝大家中秋佳節愉快！是時候收心，繼續前進嚕