Shapess!

A generative art web application that creates animated geometric patterns using mathematical curves and random generation.

This project was created 4 years ago. Now published on GitHub

What it does

Shapess generates animated geometric shapes based on mathematical formulas that create spirograph-like patterns. Each generation uses random parameters to create unique visual designs that animate continuously on the canvas.

Features

• Random pattern generation with seed-based reproducibility
• Real-time animation of geometric curves
• Seed input system for recreating specific patterns
• Click-to-regenerate functionality
• Seed history display showing last 3 used seeds
• Responsive canvas that fills the browser window

How to use

1. Open index.html in a web browser
2. The application will automatically generate a random pattern
3. Click anywhere on the canvas to generate a new random pattern
4. Enter a specific seed number in the input field to recreate a pattern
5. Leave the seed field empty and click to generate random patterns
6. View the last 3 seeds used in the seed history display

Controls

• Seed Input: Enter a number to use as generation seed, or leave empty for random
• Click Canvas: Generate new pattern
• Seed History: Shows the current seed (bold), previous seed (gray), and older seed (light gray)

Technical details

• Built with p5.js for canvas rendering and animation
• Uses mathematical curve generation with random parameters
• Implements seed-based randomization for reproducible results
• Generates 1-12 curve generators per pattern with random parameters
• Animation speed and drawing parameters are configurable

Files

• index.html - Main HTML structure and p5.js setup
• script.js - Core generation logic and animation
• style.css - Styling for controls and seed display

Requirements

Modern web browser with JavaScript enabled. No additional installation required.