spirals

🌪️ Canvas Spiral Generator

After building the Python version, I wanted to see if I could recreate the same spiral magic in the browser using HTML5 canvas and JavaScript.

What you'll see

The exact same galaxy spiral pattern as the Python version, but this time you can watch it being drawn in real-time in your browser. It starts from the center and spirals outward with that same mesmerizing yellow-on-black pattern.

How to run this

# Just open the HTML file in any web browser
# Double-click spiral_generator.html
# Or open it from your browser: File -> Open

No server needed, no installation required - just pure browser magic!

How it works

This was so cool to figure out! Instead of using Python's turtle, I'm using HTML5 canvas which is like having a drawing surface right in the browser.

The math is identical to the Python version - those same two magic variables:

a += 2;      // Move farther each time  
b += 0.8;    // Turn more each time
angle += b;  // Update rotation

But instead of turtle commands, I'm using trigonometry to calculate where to draw each line:

const newX = x + a * Math.cos(radians);
const newY = y + a * Math.sin(radians);

The requestAnimationFrame() makes it draw smoothly - way cooler than the Python version because you can actually watch the spiral grow!

Try changing this

• a += 2: Change to 1, 3, or 5 to see tighter or looser spirals
• b += 0.8: Try 1.0 or 0.5 to change how fast it curves
• ctx.strokeStyle = "yellow": Try "cyan", "magenta", "lime", or any color
• Challenge: Make it draw multiple spirals starting from different points!

What I learned

Canvas is incredibly powerful! I had no idea you could do graphics programming right in the browser without any special software. Learning how requestAnimationFrame() works for smooth animation was a game-changer.

Also discovered that the same mathematical concept can look completely different depending on how you present it. The Python version draws instantly, but this animated version feels way more alive and engaging. Sometimes the presentation is just as important as the algorithm!