Algorithm Visualizer

A block algorithm is a project that allows you to create blocks with your own specific functions, which can be plugged and played with other blocks.

Block Structure

id: number;
x: number;
y: number;
name: string;
description: string;
nInputs: number;
nOutputs: number;
inputNames: string[];
outputNames: string[];
fn: Function;
style: string;

Demo

Todo List

• BasedBlock class
• Connection between blocks
• Test cases for BasedBlock class
• Block UI component
• Block Editor UI component
• Create Block Button
• Delete Block Button
• Curve Connection
• Zoom In/Out
• Cancel Connection
• Preset Blocks (Logic, Math, etc.)
• Load pre-built template
• console.log() block for debugging
• Animation when block is running.
• Add edit button for block
• Add stop point for line connection to make it more readable
• Add syntax highlighter for block code (Create/Edit)
• Import/Export blocks data
• Implement infinite canvas

Contributor

• RuffLogix