互動期中報告
## 步驟一 介面建構（HTML + CSS）

<div class="canvas-container">
  <div id="tv-screen">互動程式設計期中報告</div>
</div>
這段建立了一個「電視螢幕」的容器（canvas-container），裡面有個 #tv-screen 元素，初始顯示文字「互動程式設計期中報告」。

.canvas-container {
  position: relative;
  width: 90vw;
  height: 90vh;
  margin: 0 auto;
  background: #000;
  border: 10px solid #444;
  border-radius: 15px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
這段 CSS 把 canvas-container 設計成一個黑色的、圓角、有陰影、90% 視窗大小的方塊。很像一個電視畫面。

## 步驟二 按鈕互動功能
每個按鈕都綁了一個 onclick，點擊時會改變 #tv-screen 內部的內容，例如嵌入一個 iframe（首頁按鈕），或者直接換成文字（作品、筆記、自我介紹）。

每個 onclick 對應的動作是：

首頁：嵌入台灣淡江大學（TKU）首頁。
作品、筆記：直接改成文字。
自我介紹：換成一段個人簡介+圖片。

  <button onclick="...">首頁</button>
  <button onclick="...">作品</button>
  <button onclick="...">筆記</button>
  <button onclick="...">自我介紹</button>
</div>

## 步驟三 Shader 繪製動畫效果（WebGL + TWGL.js + Shaders）
這段很簡單：直接把輸入的頂點（position）設定成螢幕座標（無變形）。

片段著色器（Fragment Shader）
很長的 GLSL 程式，主要做以下事情：

計算 Voronoi圖形（一種網格式、細胞狀的花紋）
建立一個動態的「高度地圖」 (map 函式)
做出光照、材質貼圖、陰影效果
隨時間 (u_time) 和滑鼠位置 (u_mouse) 變動畫面
最重要的是，片段著色器每個畫素根據相機位置、方向，計算出顏色，讓整個畫面像是在動態生長、流動一樣。

#version 300 es
precision highp float;
in vec4 position;
void main() {
  gl_Position = vec4( position );
}

## 步驟四 滑鼠互動與貼圖加載
這個 Mouse 類別會追蹤滑鼠的位置 (this.x、this.y) 和是否在拖曳 (this.drag)。它會更新全域的 u_mouse 變數，影響 Shader 裡面相機的角度旋轉。
getImage(url) 會非同步載入圖片（例如木紋、石頭紋理）。
loadTexture(imageList) 把圖片轉成 WebGL 可用的貼圖，提供給 Shader 使用，讓材質有更豐富的細節。

滑鼠追蹤（Mouse Class）

class Mouse { ... }

取圖+載入貼圖

const getImage = (url) => { ... }
const loadTexture = (imageList) => { ... }