peymanx/base4
Contribute to peymanx/base4 development by creating an account on GitHub.
0 stars · 0 forks · 0 watchers
README
Base4 (Direction) Agent A lightweight visualization tool that converts text into directional movements using a Base-4 encoding system. Developed by Peyman Majidi
🚀 Try Base4 Agent Online 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. Overview 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.
Direction Encoding 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. Example Character: A
ASCII: 65
Binary: 01000001
2-bit groups: 01 00 00 01
Movement sequence: → ↑ ↑ →
Features
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
How It Works 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.
Project Structure The project consists of a single HTML file containing three main sections. HTML Responsible for:
User interface Canvas Input controls Information panels
CSS Provides:
Dark theme Responsive layout User interface styling Canvas appearance
JavaScript Implements:
ASCII to binary conversion Base-4 direction encoding Animation engine Path generation Infinite grid rendering Automatic zoom calculation User interaction
Mathematical Model 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
Example 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.
Possible Applications 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
Technologies
HTML5 CSS3 Vanilla JavaScript HTML5 Canvas
No external libraries or frameworks are required.
Encoding Example 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.
Relationship to Other Encodings 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. Author Peyman Majidi GitHub: https://github.com/peymanx
License 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