Hanabi

練習了JS對Canvas的操作,並且利用requestAnimationFrame以利瀏覽器以最大效能渲染煙火點。每一個產生的煙火約有500個煙火點,利用不斷堆疊的透明黑色,製造出殘影的效果。透過對煙火物件Property的改變,可以輕易達到改變顏色的效果。

在不同的參數設定下,意外產生出規律圖形。有一個如梅花般的效果,於是就保留下來了,有空會在新增更多的種類,並且為顏色做最佳化,有些色彩實在不像是煙火XD

玩法:

  1. 選擇煙火種類,可用鍵盤數字選擇
  2. 用滑鼠左鍵綻放你的天空

Go to page

 

待更新項目:

  • 將陸續增加煙火種類,並且預訂新增背景。

Solar System

1969年阿姆斯壯搭乘美國阿波羅11號登陸月球,現在,你可以透過手機裡的瀏覽器,前往太陽系的每一個角落。點擊星球,就能夠飛往該行星,以當地視角,一覽不同的宇宙風光,顛覆你對世界的想像。針對地球,甚至看得到燈火通明的夜晚!我們不必成為太空人,就能上太空看地球。

利用了開學前的寒假,全力投入的結晶,研究Three.js的物體包覆,以及Camera 的使用,搭配Raycaster已獲取滑鼠在3D視圖中的座標向量所指到的目標等。資料方面則收集了來自NASA官網的行星資訊,從Planet Pixel Emporium下載到大量高品質的地圖素材等,練習使用Require.js,另外由於圖檔較大,在預載之後用到了Microcache.js來做緩存,並且自行寫了函式僅在當下星球使用高畫質圖檔,以減緩瀏覽器渲染的負擔,使畫面更為流暢。

將陸續新增各個行星的資訊頁面,以提供更多精彩的行星故事。

Go to page