看到桂X湯圓又開始廣告，元宵節來了，可惡啊～～過年都吃到肥死了，又接著來了讓人無法抗拒的元宵，這該如何是好捏？
沒關係，山川團隊為此耗時整個已經度過的 2021 年（農曆年），規劃了用網頁做元宵企劃，讓你動手做好玩又不怕胖！
認識 p5.js
這次使用的是 p5.js ，一個超強的 js 特效 library。很好上手且適合網頁初學者，可以畫出各種可互動的視覺效果。
準備工作
首先我們要先去 p5.js 的官網把相關資源載下來
其實小編也不太會寫 code，所以其實沒辦法從一切空白開始寫起，因此先想一下需要用到哪些特效。
- 元宵：需要畫球球
- 滾元宵的時候會談來彈去（誤：應該正確做元宵的方式是用搖的，但是礙於小編能力有限，加上年後案量暴增，只好...
- 最好可以互動：隨著滑鼠移動竹篩
- 移動竹篩時，元宵再開始滾
然而很幸運的，p5.js 提供的範例都可以做到上面的效果，真的是太棒了 pui pui pui
沒錯，基本上只要使用以上兩個範例就可以完成，接下來會開始介紹各步驟～～
設置場景
首先我們先複製這個範例的程式碼 https://p5js.org/examples/motion-bouncy-bubbles.html
接著修改一下程式碼，我調整了球的數量，和取消了重力
let numBalls = 50;
let spring = 0.2;
let gravity = 0.00; //0.03
let friction = -0.2;
let balls = [];
然後在 function setup() 底下新增背景，以及調整一下畫布尺寸。
如果要用我們的竹篩，請到這裡下載
bg = loadImage('assets/bg.jpg');
canvas = createCanvas(400, 400);
在 function draw() 這邊調整一下背景，把原本的 0 改為剛剛的 bg
background(bg);
然後 style 的部分可以參考
html, body {
height: 100%;
}
body {
margin: 0;
display: flex;
background: #161616;
width: 100%;
overflow: hidden;
justify-content: center;
align-items: center;
}
canvas {
border-radius: 50%;
border: 5px solid #b09781;
box-shadow: 0 10px 20px rgba(0,0,0,.15), inset 0 10px 10px #000000;
}
都完成後畫面應該會長這樣
互動
接著處理跟滑鼠互動的部分，首先先處理讓 canvas 可以跟著滑鼠跑，以及讓 canvas 在畫面上垂直置中，我們在 function draw() 底下增加
canvas.position(pwinMouseX - 200, windowHeight / 2 - 200);
然後現在元宵有點大顆，請找到 balls[i] 然後調整一下下方數值
random(15, 10),
如果發現竹篩有跟著滑鼠動就快成功囉，現在再讓元宵也跟著動起來
請找到 collide() 這邊，然後加上這個
let speed = abs(winMouseX - pwinMouseX);
這個的意思應該是算滑鼠移動的速率，接著把這個數值分別加到 dx 和 dy 後面
let dx = this.others[i].x - this.x + speed;
let dy = this.others[i].y - this.y + speed;
大功告成
到這裡就完成了！歡迎大神們有機會的話一起交流，來提高擬真度～～
謝謝觀賞，小編下台一鞠躬，祝各位元宵節愉快 pui pui pui