《前地煙花》p5.js 課堂示範
《前地煙花》p5.js 課堂示範
AI（Claude）示範作品，只供課堂教學或私人收藏。不可參加「壓縮式垃圾桶飾面設計比賽」，也不可描摹或改作後參賽。 比賽聲明書第 2 條要求作品「並無使用任何人工智能技術生成」。每張畫稿都印有紅字「AI 示範作品・課堂用・不可參賽」。
內容
| 畫稿 | 主角 | 細節 |
|---|---|---|
| 1 左側 | 議事亭（民政總署大樓）＋大型菊花煙花 | 綠色百葉窗、小露台欄杆、屋頂欄杆、中央山花；中門透出暖光；門前清潔工人和小壓縮桶；前段有葡式彩色小屋、紅燈籠串和祥雲 |
| 2 右側 | 大三巴牌坊＋三組煙花 | 四層牌坊、柱列、拱窗；一家人在牌坊下看煙花；前段有燈籠串和小屋 |
| 3 頂部 | 葡式藍白瓷磚 | 四瓣花紋，相鄰瓷磚的四角拼成圓點 |
| 3 尾部 | 中葡並置：左邊媽閣廟山門（紅牆、綠瓦、燕尾翹脊），右邊東望洋燈塔（光束掃過夜空），中間葡式藍白瓷磚畫（azulejo）：葡國帆船（nau）乘浪航行，天上一朵藍色煙花，赭黃外框、3 × 2 瓷磚拼縫 | 三組煙花、燈籠串、葡式碎石波浪 |
三張畫稿底部都是議事亭前地的葡式碎石波浪紋，把三面連成一套。
其他葡式細節： 議事亭和大三巴兩旁的鑄鐵街燈；彩色小屋二樓的鑄鐵捲花露台；部分小屋鋪上里斯本式藍白小瓷磚外牆；議事亭樓層之間的藍白瓷磚飾帶。
教學重點（程式在 程式/fireworks_design.js）
- 煙花
firework()／rays()：從中心放射幾十條線，每條分 12 段，用u²加入重力下垂；顏色和粗幼用lerpColor由內到外漸變，尾端加星點和下墜火花。外瓣、內環、垂柳金尾三層疊加。 - 碎石波浪
calcada()：同一條正弦曲線平移，相鄰兩條之間填色，黑白交替。 - 瓷磚
azulejo()：一個 11 mm 單元，四角各畫四分之一圓，平鋪後自動拼成圓點，屬於重複紋樣。 - 燈籠串
lanternString()：拋物線y + sag·4u(1−u)模擬繩子下垂，等距掛燈籠。 - 祥雲
spiral()：半徑逐漸縮小的螺旋線。 - 葡式細節
streetLamp()／ironBalcony()／tileFacade()／tileFrieze()：街燈、露台、瓷磚外牆及飾帶，都是小單元重複或對稱繪製。 - 瓷磚畫
azulejoPanel()／sail()：單色藍線描繪帆船；quadraticVertex畫出鼓風的方帆和船身弧線。 - 可重現：seed = 8、t = 0。改 seed 或按播放，煙花形狀就會變化。
開啟
- 成品：
成品/AI示範_前地煙花_A3三頁_不可參賽.pdf（A3、300 dpi，三頁） - 互動版：用 Chrome 開
程式/index.html，可以播放、改 seed、切換灰階和遠看測試
已知限制
- 畫稿底圖是學校收到的 A4 掃描本放大，不是官方向量原稿。
- 未做實物試印；深藍夜空大面積印出來會比螢幕暗。
- 「懷舊葡國」只以建築及街道文化表現（議事亭、大三巴、碎石路、瓷磚），不涉政治內容。
公開教學版整理記錄（2026-10-30）
原 fireworks_design.js 在最後一行被截斷；公開教學版採用同資料夾完整衝突副本恢復末段。內部原件保留，公開版只保留一個正式程式檔。
