Bitfielder

A minimalist live shader editor for bitfield patterns.

Features

• Live coding - Real-time shader compilation and rendering
• Performance controls - Adjustable FPS (15/30/60) and resolution scaling
• Shader library - Save, search, and organize shaders
• Live performance mode - Minimal UI for fullscreen presentations
• URL sharing - Share shaders via encoded URLs

Installation

npm install
npm run dev

Usage

Basic Controls

• Ctrl+Enter - Execute shader code
• H - Toggle minimal UI mode
• F11 - Fullscreen
• R - Random shader
• M - Cycle value modes
• S - Share URL

Shader Variables

• x, y - Pixel coordinates
• t - Time (enables animation)
• i - Pixel index

Operators

• ^ & | - XOR, AND, OR
• << >> - Bit shift
• + - * / % - Math operations

Library

Hover the right edge of the screen to access the shader library. Save shaders with custom names and search through your collection.

Examples

x^y                    // Basic XOR pattern
(x*y)%256             // Multiplication pattern
(x+y+t*10)%256        // Animated pattern
((x>>4)^(y>>4))<<4    // Bit-shifted XOR

Build

npm run build