algorithm visualizer:將程式碼演算法視覺化的互動式線上平臺

文字說明和靜態圖片中學習演算法是很枯燥的。 因此有許多很棒的網站提供了檢視各種演算法的動畫。 然而,對於程式設計人員來說,沒有什麼比將實際運作程式碼視覺化更容易理解的了

algorithm-visualizer 是一個互動式線上平臺,可以將程式碼中的演算法視覺化。

筆記

algorithm-visualizer 有部署到一個公開的網站 https://algorithm-visualizer.org/讓你在線上測試,進去後你就會看到這個測試平台已經內建了許多演算法程式範例,目前這些範例都是用 javascript 寫的

但是在 UI 上你會看到可以切換到 Java/C++/Javascript 這三種版本

原來algorithm-visualizer 的 UI 左下方有一個 Scratch Paper ,這些選項是讓你切換 Java/C++/Javascript 程式語言來練習你自己的演算法,文件上說明是在 Scratch Paper 下方的 New 去新增你的演算法,例如我選 Java,algorithm-visualizer 會幫我產生一個可以馬上執行的 Java 的測試演算法框架,使用者就利用這個產生的框架開始在裡面寫演算法練習,螢幕的左邊可以看到演算法視覺化的輸出結果

線上的測試平台還可以跟你的 Github 帳號做整合,原本以為這個功能會去同步你的 github 專案中的程式碼做程式碼視覺化,但是目前還找不到這個功能 ( 也許會將你寫的演算法存成 gist ,可以試看看)

algorithm-visualizer 內建有 fork 功能,也就是你也可以 fork 內建的演算法範例然後再去修改成自己的版本做練習

你也可以為這個便利的開源工具貢獻演算法,作者是將演算法放在這個 repository

algorithm-visualizer 也可以安裝到你自己的電腦中,方法如下

1. Fork 這個開源專案

2. git clone https://github.com/<your-username>/algorithm-visualizer.git

3. 安裝 Docker

4. 安裝相依套件

cd algorithm-visualizer 
npm install
npm run dev

5. 開啟瀏覽器到 http://localhost:8080/

專案網址

相關線上課程

找線上課程?試看看 Soft & Share 網站搜尋引擎

✍ 搜尋結果太多?可參考 Soft & Share 搜尋引擎使用技巧


追蹤 Soft & Share

幫我們個小忙!


Comments are closed.

Powered by WordPress.com.

Up ↑

%d 位部落客按了讚: