Create complex, infinite algorithmic patterns with our free Cellular Automata Rule 30 visualizer. Explore 1D elementary automata, customize rules, and export images.
AI Generation Prompt
Technical Specification: Elementary 1D Cellular Automata Generator
Overview
A high-performance, browser-based utility that generates 1D elementary cellular automata patterns on an HTML5 Canvas. The tool allows users to input any rule (0-255), customize aesthetic parameters, and export the resulting generative art as a PNG file.
Core Functionality
- Algorithm Engine: Pure JavaScript implementation of 1D cellular automata.
- Rule Input: Users can input a decimal number (0-255) to map the evolution logic.
- Pattern Customization:
- Cell size control (1px to 20px).
- Speed control (generation frame rate).
- Color picker (for living vs. dead cells).
- Pattern reset and generation triggers.
- Export: One-click download of the canvas state as a PNG.
UI Layout
- Header: Simple, clear title and short application description.
- Sidebar/Control Panel (Left/Top on Mobile):
- Rule Input Field (Number).
- 'Generate' Button.
- 'Clear' Button.
- Color Pickers (Foreground/Background).
- Download Image Button.
- Main Display Area:
- A centered HTML5
<canvas>element with a soft shadow and subtle border. - Responsive resizing: The canvas should auto-fit the container width.
- A centered HTML5
Design & Aesthetics
- Palette: Pure light mode. White background (
#ffffff), soft gray borders (#e2e8f0), and vibrant action colors (e.g.,#2563ebfor primary buttons). - Typography: Sans-serif font (Inter or System UI) for maximum readability.
- Animations:
- Smooth hover states on buttons (CSS transitions 0.2s).
- Micro-loading indicators when generating complex patterns.
Technical Directives
- Single File: All CSS/JS/HTML must be inside one file.
- No External Frameworks: Pure Vanilla JS only. Do not use React/Vue/Angular.
- State Management:
- CRITICAL: Do NOT use
localStorage,sessionStorage, or cookies to save state. - Use in-memory variables to track the current rule and canvas settings.
- CRITICAL: Do NOT use
- Iframe Compatibility:
- No
alert(),confirm(), orprompt(). Use custom modal components if user interaction is needed. - Ensure no blocked external assets are loaded that would trigger security warnings.
- No
- Responsiveness: Use CSS Flexbox/Grid for layout. The canvas must scale proportionally based on the
window.innerWidth.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
What is Rule 30 in cellular automata?
Rule 30 is a specific elementary cellular automaton introduced by Stephen Wolfram in 1983. It is a one-dimensional binary cellular automaton that displays chaotic, non-periodic, and complex patterns despite following a simple deterministic rule set. Because the rule creates a complex visual structure from simple, local interactions, it is frequently used to demonstrate the concepts of emergence, chaos, and complexity in computer science and algorithmic mathematics.
How can I export the patterns I generate?
Since this tool operates entirely within your browser for privacy and security, we do not store your generated patterns on a server. However, you can easily save your work by using the 'Download PNG' button included in the tool interface. This function captures the current state of the HTML5 canvas element and converts it into a high-resolution image file that you can download directly to your local device for use in digital projects, research, or artistic explorations.
Can I test rules other than Rule 30?
Yes, while Rule 30 is the most famous example due to its chaotic properties, this generator includes a manual input field allowing you to select any integer rule from 0 to 255. Each rule defines a unique set of behaviors for how the cells evolve based on their neighbors. By experimenting with different integers, you can visualize the full spectrum of elementary cellular automata, from simple periodic structures and fractal-like triangles to highly chaotic and randomized visual patterns.
Is this tool optimized for mobile browsers?
This application is fully responsive and built to function across all screen sizes, from mobile phones and tablets to high-resolution desktop monitors. The interface utilizes a fluid grid system to ensure that the canvas area and control panel remain accessible. For the best experience on mobile devices, we recommend using the device in landscape mode to ensure the generated pattern has sufficient horizontal space to display the cellular growth correctly without unnecessary clipping or scrolling.
