Pixel Weave

A generative art piece that creates unique, symmetric pixel patterns using procedural algorithms and hash-based randomness.

Overview

Pixel Weave generates deterministic, infinitely varied abstract artworks by combining multiple painting algorithms with different color palettes and symmetry modes. Each artwork is uniquely defined by a random hash, ensuring reproducibility while maintaining endless variation.

Examples

Here are some generated artworks showcasing different palettes and symmetry modes:

Tapestry - Vertical	Synthwave - Quadrant	Ocean - Horizontal
Heat - Diagonal	Retro - Vertical

Each piece is unique and reproducible via its hash seed.

Features

• Deterministic Generation: Each hash produces the same artwork every time
• Multiple Painter Algorithms:
  • Ikat Pattern: Organic, woven textile-inspired shapes
  • Geometric Shapes: Rectangular forms with noise variation
  • Flow Field: Perlin noise-driven particle paths
  • Checkerboard: Classic grid patterns with randomization
  • Brocot Tree: Mathematical Stern-Brocot sequences
  • Radial Lines: Star-burst emanating patterns
  • Waves: Sinusoidal flowing lines
• Symmetry Modes: Vertical, Horizontal, Quadrant, and Diagonal
• Color Palettes: Tapestry, Synthwave, Retro, Ocean, and Heat themes
• Responsive Canvas: Automatically scales to fit the browser window
• Interactive Controls: Click, keyboard, or window resize to regenerate

Usage

Opening the Artwork

Simply open weave.html in any modern web browser. No build process or server required.

Controls

• Click anywhere: Generate a new random artwork
• Press Space or Enter: Generate a new random artwork
• Press 'S': Save the current artwork as a PNG file
• Resize window: Automatically regenerates and rescales

Understanding the Generation

Each artwork is created through:

1. A random 64-character hexadecimal hash is generated
2. The hash seeds a deterministic pseudo-random number generator (PRNG)
3. A color palette and symmetry mode are randomly selected
4. 2-5 painter algorithms are randomly chosen and layered
5. The final composition is rendered with subtle texture and spacing

The hash and configuration are logged to the browser console for reproducibility.

Technical Details

Built With

• p5.js v1.9.0 - Creative coding library
• Vanilla JavaScript (ES6+)
• HTML5 Canvas

Algorithm Highlights

• PRNG: Xorshift algorithm for fast, deterministic randomness
• Grid System: Configurable cell-based pixel grid (default 4px cells)
• Aspect Ratio: 2:3 portrait orientation
• Color Mode: HSB (Hue, Saturation, Brightness) for intuitive palette design
• Rendering: Rounded rectangles with subtle stroke for texture

Symmetry Implementation

The setColor() function applies symmetry transformations:

• Vertical: Mirrors horizontally across the center
• Horizontal: Mirrors vertically across the center
• Quadrant: Reflects across both axes (4-way symmetry)
• Diagonal: Swaps and reflects coordinates (with bounds checking)

Customization

Adding New Color Palettes

Edit the PALETTES object around line 52:

myPalette: {
  bg: [hue, saturation, brightness], // Background color
  colors: [
    [h, s, b],  // Color 1
    [h, s, b],  // Color 2
    // ... add more colors
  ],
}

Adjusting Detail Level

Change CELL_SIZE at line 47:

• Smaller values (2-3): Higher detail, slower rendering
• Larger values (6-10): Chunkier pixels, faster rendering

Modifying Painter Selection

Edit line 124 to control how many painters are used:

const numPainters = r_int(2, 5); // Min 2, max 5 painters

File Structure

Weave/
├── weave.html          # Complete standalone artwork
├── README.md           # This file
└── examples/           # Example output images
    ├── HOW_TO_GENERATE.md
    └── example-*.png   # Generated artwork samples

Browser Compatibility

Tested and working on:

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+

Requires JavaScript enabled and HTML5 Canvas support.

Performance

• Initial generation: ~50-200ms (depending on device)
• Typical canvas size: 600x900 pixels @ 4px cells = 150x225 grid
• Memory usage: Minimal (~5-10MB)

Known Limitations

• Very small window sizes may produce minimal patterns
• Diagonal symmetry mode may have fewer visible effects on non-square grids
• No undo/history functionality (each regeneration is random)

License

This is a personal project. Feel free to use and modify for educational purposes.

Credits

Created using p5.js by the Processing Foundation. Inspired by generative art pioneers and algorithmic pattern design.