Spirolateral Generator

· 6 min read

Spirolateral Generator

A beautiful web application that generates 90-degree Spirolaterals with customizable colors and parameters.

What is a Spirolateral?

A Spirolateral is a geometric pattern created by drawing lines in sequence: up, right, down, left, repeating the pattern. The number you choose determines how many steps to take in each direction before turning.

Features

  • 5 Customizable Numbers: Input 5 different numbers (1-20) that cycle through the pattern
  • Custom Direction Order: Choose your own sequence of directions (up, left, down, right)
  • Complex Pattern: Numbers repeat 4 times, directions repeat 5 times for a total of 20 steps
  • Color Customization: Pick different colors for each direction
  • Real-time Generation: See your Spirolateral update as you change parameters
  • Smooth Animation: Watch the pattern draw itself with beautiful animations
  • Download Images: Save your creations as PNG files
  • Responsive Design: Works on desktop, tablet, and mobile devices

Keyboard Shortcuts:

  • Ctrl/Cmd + G: Generate new Spirolateral
  • Ctrl/Cmd + S: Download image
  • Ctrl/Cmd + R: Clear canvas

How to Use

Set the 5 Numbers

Input 5 different numbers (1-20) that will cycle through the pattern:

  • Number 1: 2 (default)
  • Number 2: 3 (default)
  • Number 3: 5 (default)
  • Number 4: 6 (default)
  • Number 5: 7 (default)

Customize Direction Order

Use the dropdowns to choose your direction sequence:

  • Direction 1: Left (default)
  • Direction 2: Down (default)
  • Direction 3: Right (default)
  • Direction 4: Up (default)

Choose Colors

Click on the color pickers to select colors for each direction

Generate

Click "Generate Spirolateral" or change any parameter to automatically generate

Download

Click "Download Image" to save your creation

Clear

Click "Clear" to start over

Pattern Logic

The Spirolateral follows this exact pattern:

Numbers cycle: 2, 3, 5, 6, 7, 2, 3, 5, 6, 7, 2, 3, 5, 6, 7, 2, 3, 5, 6, 7 (4 repetitions)

Directions cycle: up, left, down, right, up, left, down, right, up, left, down, right, up, left, down, right, up, left, down, right (5 repetitions)

Result: 2 up, 3 left, 5 down, 6 right, 7 up, 2 left, 3 down, 5 right, 6 up, 7 left, 2 down, 3 right, 5 up, 6 left, 7 down, 2 right, 3 up, 5 left, 6 down, 7 right

Coordinate System

The pattern starts at origin (0,0) and follows standard mathematical coordinates:

  • Up: Positive Y direction (0, +number)
  • Left: Negative X direction (-number, 0)
  • Down: Negative Y direction (0, -number)
  • Right: Positive X direction (+number, 0)

Example with numbers 2,3,5,6,7:

  • Start at (0,0)
  • 2 up → (0,2)
  • 3 left → (-3,2)
  • 5 down → (-3,-3)
  • 6 right → (3,-3)
  • 7 up → (3,4)
  • And so on...

Building the Generator

The Spirolateral Generator was built as a pure web application using HTML5 Canvas for rendering, allowing for smooth animations and high-quality image exports. The interactive interface makes it easy to experiment with different number combinations and color schemes.

The generator demonstrates how mathematical patterns can be visualized beautifully through code, creating an engaging tool for exploring geometric concepts.

Try it yourself at spirolateral.roycerex.com!