Java 實現資料排序算法視覺化教學系統

專案背景與目標

針對資料結構教學中「儲存方式與處理算法抽象難懂」的痛點，利用 Java Applet 跨平台、互動性強的特性，開發排序算法視覺化演示系統。學生可透過網頁輸入資料、選擇自動/單步執行、同步觀察圖形變化與算法描述，將抽象邏輯具體化。

系統功能特色

• 資料輸入：文字方塊輸入數列，支援預設範例
• 執行控制：自動執行、單步執行、結束演示三種模式
• 狀態顯示：即時顯示當前最小值、執行狀態、資料筆數
• 同步視覺化：圖形元素移動、箭頭指示、列表框算法描述三位一體同步
• 異常處理：try-catch 捕獲執行緒中斷異常

直接選擇排序算法邏輯

基本思想：第 i 趟在後 n-i 個元素中選出最小者，與第 i 個位置交換。

步驟：

1. 在 v[i]~v[n-1] 中找最小關鍵碼元素
2. 若非第一個，與第一個交換
3. 縮小範圍至 v[i+1]~v[n-1] 重複，直到剩 1 個元素

視覺化符號設計

核心實作片段

1. 使用者輸入處理

TextField edit1 = new TextField(22);
edit1.setText("36 25 48 12 65 43 20 58"); // 預設資料
add(edit1);

// 解析輸入
StringTokenizer st = new StringTokenizer(edit1.getText());
array = new int[st.countTokens() + 1];
for (int i = 1; st.hasMoreTokens(); i++)
    array[i] = Integer.valueOf(st.nextToken()).intValue();

2. 算法描述同步列表

List list1 = new java.awt.List();
list1.addItem("template  void Sort(datalist &list){");
// ... 依執行順序加入各行算法描述
list1.addItem("}");

// 執行時同步高亮
list1.select(currentLineIndex);

3. 繪圖與動畫主迴圈（在 run() 中）

// 排序核心邏輯配合視覺化
nowup_p = 3;
nowdown_p = 1;
for (nowdown_p = 1; nowdown_p < array.length - 1; nowdown_p++) {
    int aa = array[nowdown_p];
    int aap = nowdown_p;
    for (nowup_p = nowdown_p + 1; nowup_p < array.length; nowup_p++) {
        repaint(); // 觸發重繪，顯示掃描動畫
        if (aa > array[nowup_p]) {
            aa = array[nowup_p];
            aap = nowup_p;
        }
        Thread.sleep(100); // 控制動畫速度
    }
    // 交換
    array[aap] = array[nowdown_p];
    array[nowdown_p] = aa;
    repaint();
}
nowup_p = nowdown_p = 0;
repaint();

4. 繪圖實作

public void paint(Graphics g) {
    // 繪製表格與元素
    for (int i = 1; i < array.length; i++)
        g.drawString(String.valueOf(array[i]), X, Y);
    // 繪製箭頭：g.drawLine(), g.setColor()
}

執行緒控制模式

• Thread allinone：主動畫執行緒
• allinone.start()：啟動自動執行
• allinone.stop()：結束演示（已淘汰，教學用）
• 單步模式：step==1 時 suspend() 掛起，下一步 resume() 恢復

發布部署

<applet code="SortDemo.class" codebase="classes/" width="800" height="600">
</applet>

現代化重構建議

• 前端：HTML5 Canvas/SVG + JavaScript (D3.js, Chart.js) 或 React/Vue 組件
• 後端：Spring Boot 提供算法 API，前端輪詢或 WebSocket 推送步驟
• 桌面端：JavaFX 替代 Applet，保留跨平台優勢
• 演算法視覺化庫：visu.algo.net、algorithm-visualizer.org 參考

此專案展示了 Java Applet 全盛期的教學創新應用，其核心思想——「互動式視覺化降低抽象門檻」——在現代前端技術棧中依然閃耀。