羊肝
← 專案

Web/React/p5.js

羊·實驗

數學與演算法的互動實驗站:用可調參數的圖形,把抽象概念變成能操作的頁面。

背景

學數學或演算法時,光看公式不容易理解參數改變後圖形怎麼變;我想用網頁把這些關係做成可以試的實驗。

我做了什麼

建立實驗站架構與共用版面,將各主題做成獨立互動頁,以 p5.js 繪製圖形並綁定參數控制。

設計重點

  • 滑桿、輸入與圖形即時連動
  • 動畫節制,避免干擾閱讀與操作
  • 新主題可以照同一套模式擴充

技術

  • React
  • TypeScript
  • p5.js
  • 演算法視覺化

成果

已上線 lab.lambliver.dev,目前包含繁花曲線等實驗,可直接在瀏覽器調參數觀察變化。

畫面

  • 羊實驗首頁畫面

    互動視覺化實驗站首頁

  • 繁花曲線互動畫面

    可調參數的繁花曲線視覺化