생성형 패턴 직조기 (Generative Pattern Weaver)

A sophisticated interactive web application for composing and visualizing complex generative art through the orchestration of multiple configurable algorithmic modules. Built with HTML5 Canvas and modern JavaScript (ES Modules).

Features

• Modular Architecture: Layer-based composition system.
• Generative Modules:
  • Fractal Noise: Perlin/Simplex noise with configurable octaves, persistence, and lacunarity.
  • L-Systems: String rewriting and turtle graphics for plant-like structures and fractals.
  • Particle Systems: Physics-based particles with forces (gravity, friction) and trails.
  • Cellular Automata: Grid-based evolution (e.g., Game of Life) with custom rules.
  • Reaction-Diffusion: Gray-Scott model simulation running in a Web Worker for high performance.
• Interactive Control: Real-time parameter adjustment for all modules.
• Animation Timeline: Play, pause, scrub, and speed control. Loop support.
• Layer Management: Add, remove, reorder, and blend layers using standard composition modes.
• Performance: Utilizes OffscreenCanvas (via Worker) and optimized rendering loops.
• Save/Load: Export projects to JSON and import them back.
• Export: Save high-resolution images of your creation.

Demo

Prerequisites

• Node.js and npm installed.

Installation & Running

1. Clone the repository.
2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open your browser at the URL provided (usually http://localhost:5173).

Usage

1. Add Layer: Select a module type (e.g., Fractal Noise) and click "Add Layer".
2. Edit Properties: Click on the layer in the list to reveal its parameters in the properties panel. Adjust sliders and colors.
3. Layer Management: Use Up/Down buttons to reorder layers. Use the "Remove" button to delete.
4. Animation: Click "Play" to start the animation loop. Use the scrubber to jump in time.
5. Save/Load: Save your project configuration to a JSON file or load an existing one.
6. Export: Click "Export Image" to download a snapshot.

Architecture

The project follows a modular, component-based architecture:

• src/core/: Core engine classes.
  • Renderer: Manages the main canvas and render loop.
  • Layer: Abstract base class for all generative modules.
  • LayerManager: Handles layer composition and ordering.
  • Timeline: Manages animation time and playback state.
  • State: Singleton for global application state.
• src/modules/: Generative algorithm implementations.
  • Each module extends Layer and implements specific draw and update logic.
• src/workers/: Web Workers for intensive tasks (Reaction-Diffusion).
• src/ui/: UI management and event handling.
• src/utils/: Helper utilities (Storage, Exporter, Math).

Performance Optimization

• Web Workers: The Reaction-Diffusion module runs its simulation in a separate thread to prevent UI blocking.
• Layer Caching: Each layer draws to its own offscreen canvas (buffer), which is then composited onto the main canvas. This allows expensive layers to update less frequently if needed.
• Efficient Rendering: Utilizes requestAnimationFrame for smooth 60fps rendering.

Credits

• Simplex Noise implementation based on simplex-noise.js.
• Project structure generated and implemented by Jules (AI Software Engineer).