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}><FoldableAceEditorref={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智能小助手）
对网络安全、黑客技术感兴趣的朋友可以关注我的安全公众号（网络安全技术点滴分享）
公众号二维码
公众号二维码
