算法可视化平台 - 让算法学习变得直观生动

Algorithm Visualizer

Algorithm Visualizer 是一个交互式在线平台，旨在通过可视化技术将算法代码转化为生动的动画演示。无论您是学生、教师还是专业人士，这个平台都提供了一种引人入胜的方式来探索和理解各种算法。

功能特性

• 代码可视化：将多种编程语言（JavaScript、C++、Java）的算法代码实时转换为可视化动画
• 丰富的可视化组件：提供数组、图表、图形、散点图、日志等多种可视化追踪器
• 交互式学习：支持单步执行、进度控制、速度调节等交互功能
• 在线编辑：内置代码编辑器，支持语法高亮和折叠功能
• 草稿纸功能：用户可以创建自己的可视化项目并分享
• 多语言支持：完整的国际化支持，适应不同用户需求

安装指南

本地运行

1. Fork 并克隆仓库：

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

2. 安装依赖：

cd algorithm-visualizer
npm install

3. 配置代理服务器（可选）：

• 修改 package.json 中的代理设置：

"proxy": "https://algorithm-visualizer.org"

4. 启动应用：

npm start

5. 在浏览器中访问 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智能小助手）
对网络安全、黑客技术感兴趣的朋友可以关注我的安全公众号（网络安全技术点滴分享）

公众号二维码

公众号二维码