算法可视化平台 - 让算法学习变得直观生动
Algorithm Visualizer
Algorithm Visualizer 是一个交互式在线平台，旨在通过可视化技术将算法代码转化为生动的动画演示。无论您是学生、教师还是专业人士，这个平台都提供了一种引人入胜的方式来探索和理解各种算法。
功能特性
- 代码可视化：将多种编程语言（JavaScript、C++、Java）的算法代码实时转换为可视化动画
- 丰富的可视化组件：提供数组、图表、图形、散点图、日志等多种可视化追踪器
- 交互式学习：支持单步执行、进度控制、速度调节等交互功能
- 在线编辑：内置代码编辑器，支持语法高亮和折叠功能
- 草稿纸功能：用户可以创建自己的可视化项目并分享
- 多语言支持：完整的国际化支持，适应不同用户需求
安装指南
本地运行
- Fork 并克隆仓库：
git clone https://github.com/<your-username>/algorithm-visualizer.git
- 安装依赖：
cd algorithm-visualizer
npm install
- 配置代理服务器（可选）：
- 修改
package.json中的代理设置：
"proxy": "https://algorithm-visualizer.org"
- 启动应用：
npm start
- 在浏览器中访问
http://localhost:3000/
系统要求
- Node.js 12.0 或更高版本
- 现代浏览器（Chrome、Firefox、Safari、Edge）
使用说明
基础使用
平台提供直观的界面，包含三个主要工作区：
- 导航器：浏览算法分类和示例
- 代码编辑器：编辑和查看算法代码
- 可视化查看器：观看算法执行过程
核心API示例
// 创建数组追踪器
const array1DTracer = new Array1DTracer('一维数组');
const array2DTracer = new Array2DTracer('二维数组');
// 创建图表和图形追踪器
const chartTracer = new ChartTracer('图表');
const graphTracer = new GraphTracer('图形');
// 创建日志追踪器
const logTracer = new LogTracer('控制台');
// 设置布局
Layout.setRoot(new VerticalLayout([
array1DTracer,
array2DTracer,
chartTracer,
graphTracer,
logTracer
]));
可视化算法示例
// 可视化递归函数
function highlight(line) {
if (line >= messages.length) return;
const message = messages[line];
logTracer.println(message);
array2dTracer.selectRow(line, 0, message.length - 1);
Tracer.delay();
array2dTracer.deselectRow(line, 0, message.length - 1);
highlight(line + 1);
}
核心代码
应用主组件
import React from 'react';
import ReactDOM from 'react-dom';
import { combineReducers, createStore } from 'redux';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { Provider } from 'react-redux';
import { routerReducer } from 'react-router-redux';
import App from 'components/App';
import * as reducers from 'reducers';
import './stylesheet.scss';
const store = createStore(combineReducers({
...reducers,
routing: routerReducer
}));
ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
<Switch>
<Route exact path="/scratch-paper/:gistId" component={App}/>
<Route exact path="/:categoryKey/:algorithmKey" component={App}/>
<Route path="/" component={App}/>
</Switch>
</BrowserRouter>
</Provider>,
document.getElementById('root')
);
API 请求处理
import Promise from 'bluebird';
import axios from 'axios';
axios.interceptors.response.use(response => response.data);
const request = (url, process) => {
const tokens = url.split('/');
const baseURL = /^https?:\/\//i.test(url) ? '' : '/api';
return (...args) => {
const mappedURL = baseURL + tokens.map((token, i) =>
token.startsWith(':') ? args.shift() : token
).join('/');
return Promise.resolve(process(mappedURL, args));
};
};
const GET = URL => {
return request(URL, (mappedURL, args) => {
const [params, cancelToken] = args;
return axios.get(mappedURL, { params, cancelToken });
});
};
可视化追踪器基类
import { Tracer } from 'core/tracers';
import { Array2DRenderer } from 'core/renderers';
class Element {
constructor(value) {
this.value = value;
this.patched = false;
this.selected = false;
}
}
class Array2DTracer extends Tracer {
getRendererClass() {
return Array2DRenderer;
}
set(array2d = []) {
this.data = array2d.map(array1d =>
[...array1d].map(value => new Element(value))
);
super.set();
}
patch(x, y, v = this.data[x][y].value) {
if (!this.data[x][y]) this.data[x][y] = new Element();
this.data[x][y].value = v;
this.data[x][y].patched = true;
}
select(sx, sy, ex = sx, ey = sy) {
for (let x = sx; x <= ex; x++) {
for (let y = sy; y <= ey; y++) {
this.data[x][y].selected = true;
}
}
}
}
代码编辑器组件
import React from 'react';
import { connect } from 'react-redux';
import { languages } from 'common/config';
import { Button, Ellipsis, FoldableAceEditor } from 'components';
class CodeEditor extends React.Component {
constructor(props) {
super(props);
this.aceEditorRef = React.createRef();
}
handleResize() {
this.aceEditorRef.current.resize();
}
render() {
const { editingFile } = this.props.current;
if (!editingFile) return null;
const fileExt = extension(editingFile.name);
const language = languages.find(language => language.ext === fileExt);
const mode = language ? language.mode :
fileExt === 'md' ? 'markdown' :
fileExt === 'json' ? 'json' : 'plain_text';
return (
<div className={styles.code_editor}>
<FoldableAceEditor
ref={this.aceEditorRef}
mode={mode}
theme="tomorrow_night_eighties"
onChange={code => this.props.modifyFile(editingFile, code)}
value={editingFile.content}
/>
</div>
);
}
}
播放器控制组件
import React from 'react';
import { connect } from 'react-redux';
import { TracerApi } from 'apis';
import { BaseComponent, Button, ProgressBar } from 'components';
class Player extends BaseComponent {
constructor(props) {
super(props);
this.state = {
speed: 2,
playing: false,
building: false,
};
this.tracerApiSource = null;
this.reset();
}
reset(commands = []) {
const chunks = [{
commands: [],
lineNumber: undefined,
}];
while (commands.length) {
const command = commands.shift();
const { key, method, args } = command;
if (key === null && method === 'delay') {
const [lineNumber] = args;
chunks[chunks.length - 1].lineNumber = lineNumber;
chunks.push({
commands: [],
lineNumber: undefined,
});
} else {
chunks[chunks.length - 1].commands.push(command);
}
}
this.props.setChunks(chunks);
this.props.setCursor(0);
this.pause();
}
}
该项目通过精心设计的架构，将复杂的算法转化为直观的可视化效果，为算法学习和教学提供了强大的工具支持。
更多精彩内容 请关注我的个人公众号 公众号（办公AI智能小助手）
对网络安全、黑客技术感兴趣的朋友可以关注我的安全公众号（网络安全技术点滴分享）
公众号二维码
公众号二维码
浙公网安备 33010602011771号