A lightweight visualization tool that converts text into directional movements using a Base-4 encoding system.
Developed by Peyman Majidi
Experience Base4 in your browser:
🔗 Live Demo:
Base4 Agent — Turn Characters into Movement
Convert every character into a unique movement path using a Base4 direction system:
- ⬆️
00→ Up - ➡️
01→ Right - ⬇️
10→ Down - ⬅️
11→ Left
Watch how binary data transforms into a visual path generated by the Base4 Agent.
Base4 (Direction) Agent demonstrates how binary data can be transformed into geometric movement on a two-dimensional grid.
Each input character is converted into its 8-bit ASCII binary representation. The binary value is then divided into four 2-bit segments. Every segment is interpreted as one of the four cardinal directions (Up, Right, Down, Left), allowing the application to generate and animate a unique path for the input text.
The project provides an intuitive way to explore the relationship between binary encoding, Base-4 representation, and path generation.
Each 2-bit value represents one movement direction.
| Binary | Direction | Movement |
|---|---|---|
00 |
Up | ↑ |
01 |
Right | → |
10 |
Down | ↓ |
11 |
Left | ← |
Since an ASCII character contains 8 bits, every character always generates four movement steps.
Character:
A
ASCII:
65
Binary:
01000001
2-bit groups:
01 00 00 01
Movement sequence:
→ ↑ ↑ →
- Convert text into 8-bit binary representation
- Encode binary data as Base-4 directional movements
- Animate the generated path on an infinite grid
- Automatic canvas scaling and zoom adjustment
- Display the binary representation of the input
- Display the generated direction sequence
- Step-by-step execution visualization
- Adjustable animation speed
- Responsive interface built with HTML5 Canvas
For every input character, the application performs the following steps:
- Read the ASCII value.
- Convert it into an 8-bit binary number.
- Split the binary into four 2-bit groups.
- Map each group to a movement direction.
- Move the agent one step in the corresponding direction.
- Draw the path on the canvas.
The final result is a deterministic trajectory that depends entirely on the binary representation of the input.
The project consists of a single HTML file containing three main sections.
Responsible for:
- User interface
- Canvas
- Input controls
- Information panels
Provides:
- Dark theme
- Responsive layout
- User interface styling
- Canvas appearance
Implements:
- ASCII to binary conversion
- Base-4 direction encoding
- Animation engine
- Path generation
- Infinite grid rendering
- Automatic zoom calculation
- User interaction
For a character C:
ASCII(C)
↓
8-bit Binary
↓
Split into four 2-bit values
↓
00 → Up
01 → Right
10 → Down
11 → Left
↓
Movement Path
Input:
PEYMAN
The application generates:
- ASCII values
- Binary representation
- Base-4 directional sequence
- Animated movement
- Complete path visualization
Every execution produces the same path for identical input, making the algorithm fully deterministic.
This project can be used for:
- Binary encoding visualization
- Computer science education
- Algorithm demonstrations
- Grid-based simulations
- Procedural path generation
- Creative coding experiments
- Interactive data visualization
- HTML5
- CSS3
- Vanilla JavaScript
- HTML5 Canvas
No external libraries or frameworks are required.
The following example illustrates how the algorithm converts text into directional movements.
Input:
PEYMAN
Binary representation (8 bits per character):
P = 01010000
E = 01000101
Y = 01011001
M = 01001101
A = 01000001
N = 01001110
Each byte is divided into four 2-bit groups.
Example for the character P:
01010000
01 01 00 00
→ → ↑ ↑
Example for the character A:
01000001
01 00 00 01
→ ↑ ↑ →
Using the direction mapping
| Bits | Direction |
|---|---|
00 |
↑ Up |
01 |
→ Right |
10 |
↓ Down |
11 |
← Left |
the word PEYMAN becomes the following movement sequence:
→ → ↑ ↑
→ ↑ → →
→ → ↓ →
→ ↑ ← →
→ ↑ ↑ →
→ ↑ ← ↓
The agent executes these movements sequentially, producing a deterministic path on the grid.
Just as binary data can be represented using encodings such as Base32 and Base64, this project introduces a geometric interpretation called Base4 Direction Encoding.
Instead of converting binary into printable characters, every 2-bit value is mapped to one of four movement directions:
00 → ↑
01 → →
10 → ↓
11 → ←
This makes the binary data directly executable as movement instructions, allowing any text to generate a unique visual trajectory.
Peyman Majidi
GitHub: https://github.com/peymanx
This project is open source.
You are free to use, modify, and extend the source code while preserving attribution to the original author.
© Peyman Majidi