Contour

A web-based generative art application for creating fluid, wave-like contour designs with customizable parameters and preset dimensions.

Overview

Contour is an interactive tool that generates organic, flowing artwork by combining smooth wave interpolation, color mixing, and blur effects. The application provides an intuitive interface for adjusting canvas dimensions, colors, amplitudes, and other parameters to create unique visual compositions.

Features

• Flexible Canvas Settings: Choose from preset dimensions or specify custom sizes

• Customizable Generation Parameters:

  • Base color and background color selection
  • Adjustable amplitude and blur radius
  • Configurable squiggle points for wave smoothness
  • Position grid selector (9 positions)

• Seed Management: Reproducible generations with seed control and randomization

• Configuration Export/Import: Save and load generation settings as JSON

• Real-time Preview: Fast preview rendering at 25% quality

Project Structure

contour/
├── index.html           # Application UI
├── app.js               # Client-side logic and controls
├── style.css            # Custom styling
├── generator.py         # Image generation engine
├── requirements.txt     # Python dependencies
├── screenshot.png       # Application screenshot
└── README.md            # This file

Technology Stack

• Frontend: HTML5, TailwindCSS, DaisyUI, Vanilla JavaScript
• Image Generation: Pillow (PIL) via Python
• Runtime Environment: Pyodide (Python compiled to WebAssembly, runs entirely in the browser)
• Deployment: GitHub Pages (static hosting)

Deployment

The application is deployed on GitHub Pages at https://thenabbu.github.io/contour/ and runs entirely in the browser using Pyodide, making it a fully static site.

Local Development

1. Clone or download the repository
2. Open index.html in your browser, or serve locally with a simple HTTP server:

   python -m http.server 8000

3. Navigate to http://localhost:8000

Usage

Basic Workflow

1. Set Canvas Dimensions: Select a preset or enter custom width and height values
2. Configure Colors: Choose background and base colors
3. Adjust Parameters:
   • Amplitude: Controls the intensity of wave deformation
   • Blur Radius: Sets the softness of the generated image
   • Squiggle Points: Determines wave smoothness and complexity
4. Position: Select from 9 position options for wave placement
5. Generate: The image updates automatically as you adjust parameters
6. Export: Download the generated image or save your configuration

Advanced Features

• Randomize Seed: Generate different variations with the same settings
• Reset Controls: Reset individual parameters to defaults
• Save Configuration: Export settings as JSON for future use
• Load Configuration: Import previously saved settings

Core Generation Algorithm

The generator.py module implements:

• Catmull-Rom Interpolation: Smooth curve interpolation for wave generation
• Perpendicular Unit Vectors: Perpendicular offset calculations for wave effects
• Color Mixing: Blending colors with white for variation
• Blur Filters: Gaussian blur effects on generated images
• Polygon Rotation: Transform shapes and waves at specified angles

Styling

The application uses:

• TailwindCSS: Utility-first CSS framework
• DaisyUI: Component library built on TailwindCSS
• Theme: Dark theme ("night") by default
• Responsive Layout: Adapts to mobile and desktop viewports

How It Works

1. Browser-Based Processing: No backend server required. All image generation happens in your browser.
2. Pyodide Runtime: The application loads Pyodide, which allows Python code to run in the browser as WebAssembly.
3. Generator Engine: generator.py is executed client-side using Pyodide to process images in real-time.
4. Static Deployment: The entire application is static and can be deployed on any CDN or static hosting service.