Skip to content

Chaos Dotter

Math Chaos

Chaos Visualization

Section titled “Chaos Visualization”

This HTML project creates an interactive visualization of a mathematical concept known as the Chaos Game. It generates fractal patterns by repeatedly plotting a point that moves a certain percentage toward randomly chosen vertices of a polygon.

Key Features

Section titled “Key Features”

Interactive Canvas

  • Real-time fractal generation on HTML5 canvas
  • Dynamic polygon vertex selection
  • Adjustable movement percentage
  • Smooth animation at 60 FPS

Audio Integration

  • Ambient background music
  • Loop-enabled playback
  • Enhances the chaotic atmosphere

User Controls

  • Vertex count input (minimum 3)
  • Distance ratio slider
  • One-click pattern generation

How It Works

Section titled “How It Works”

  1. Initialize Audio Audio playback begins automatically with Gesaffelstei-Aleph.mp3 looped in the background.

  2. Setup Parameters

    • Choose polygon vertex count (≥3)
    • Set movement ratio (e.g., 0.618 for golden ratio)

  3. Canvas Preparation

    • Position vertices equidistantly on a circle
    • Initialize starting point randomly
    • Clear previous drawings

  4. Chaos Generation

    • Select random vertex
    • Move current point toward vertex by specified ratio
    • Plot new point
    • Repeat thousands of times for pattern emergence

Technical Details

Section titled “Technical Details”

Libraries & Dependencies

Section titled “Libraries & Dependencies”
jQuery 3.1.1 Semantic UI 2.4.2

Core Elements

Section titled “Core Elements”
  • Canvas: Primary drawing surface
  • Inputs: Parameter collection
  • Button: Trigger generation
  • Audio: Background ambiance

Key Functions

Section titled “Key Functions”
  • playForSide() - Input validation and initialization
  • init() - Canvas preparation
  • draw() - Main chaos algorithm loop
  • colorCircle(), colorRect() - Canvas drawing helpers

Showcase

Interactive fractal visualization demonstrating the beauty of mathematical chaos.

Try different vertex counts to discover unique patterns!

Recommendations

  • Vertices: Start with 5 or 6 for interesting symmetries
  • Ratio: 0.5 creates dense patterns; 0.67 produces triangles
  • Golden Ratio: 61.8% often yields the most visually striking results