Building an Interactive Kaleidoscope with AI: A Creative Coding Journey
|
| artDrawingSymmetry/ |
Have you ever been mesmerized by the intricate, ever-shifting beauty of a kaleidoscope? That sense of ordered complexity and vibrant wonder was something I wanted to recreate digitally. Recently, I embarked on a fun project to build a web-based, interactive kaleidoscope using p5.js — and I had a fascinating collaborator: Google’s Gemini AI.
This journey wasn’t just about coding; it was an exploration of what it means to collaborate creatively with AI. In this post, I’ll walk you through how the idea evolved, the unexpected challenges we encountered, and how AI accelerated the process beyond what I could have imagined.
The Spark: An Idea Comes to Life
The concept was simple yet compelling: create a digital kaleidoscope where mouse movements generate complex, colorful, symmetrical patterns. I wanted it to feel instantly gratifying — a playful, generative art experience.
But beyond the aesthetic appeal, I also saw educational potential: a hands-on way to explore rotational symmetry and color theory (hue, saturation, brightness).
Choosing p5.js was natural. It’s an excellent JavaScript library for creative coding, making canvas drawing, input handling, and color manipulation easy. To structure the page neatly and quickly, I decided to use standard HTML and Tailwind CSS for styling.
Meeting the AI Collaborator
Figuring out the math behind reflections and rotations can get tricky. Instead of diving straight into transformations myself, I decided to prompt Gemini AI for help:
"Design a kaleidoscope that generates symmetrical patterns based on mouse movements. Use p5.js."
Within seconds, Gemini delivered a working foundation: a p5.js sketch that:
-
Set up the canvas and centered the origin,
-
Calculated symmetry angles,
-
Used translate(), rotate(), and scale() to draw mirrored lines.
Watching the first version come alive — lines mirroring elegantly as I moved the mouse — was thrilling. The core idea worked!
Iteration 1: Making It Educational and Interactive
While visually engaging, the first version offered little interaction beyond drawing. I wanted to make it more educational, so I asked:
"Make it more educational for art education."
Gemini responded with a series of major upgrades:
-
Interactive Controls: Sliders to adjust symmetry (number of axes) and stroke weight, powered by the p5.dom library.
-
Real-Time Feedback: Values displayed next to sliders, showing users exactly how their adjustments affected the kaleidoscope.
-
Conceptual Explanations: An information panel explaining rotational symmetry and the HSB color model, styled neatly with Tailwind CSS.
-
Improved Layout: A clean, two-column responsive design, placing the canvas beside the controls and explanations.
This wasn’t just a toy anymore — it was becoming an interactive learning tool where users could experiment, observe, and understand the underlying concepts.
Iteration 2: Visualizing Symmetry and Adding Rotation
While the patterns were symmetrical, the structure behind them wasn’t obvious. I asked:
"Show the symmetry axes with dotted lines."
Gemini added a drawAxes() function, using push() and pop() to draw subtle, semi-transparent guide lines that updated dynamically with the symmetry slider.
Next, I wanted users to rotate the axes dynamically, so I requested:
"Allow the symmetry axes to be rotated."
This involved:
-
Adding a rotation slider,
-
Managing a new
axesRotationvariable (stored in radians), -
Rotating both the axes and the drawing space correctly.
With these changes, users could tilt the entire kaleidoscope and see how rotation impacted the resulting patterns.
Challenges and AI-Powered Problem Solving
Adding rotation exposed a new problem:
The mouse pointer and drawing felt out of sync when rotated.
I told Gemini:
"When rotated, the mouse position is not synced to screen position."
Gemini quickly diagnosed the issue:
We were rotating the whole coordinate system, causing the mouse movements to "feel" rotated too.
To fix it, Gemini applied inverse rotation math:
-
Adjusting the mouse coordinates using cos(-rotation) and sin(-rotation),
-
Recalculating the cursor’s position relative to the unrotated space before drawing.
This clever adjustment restored the intuitive feel — drawing now stayed precisely under the cursor, even with dynamic rotation.
Refinements: Perfecting Symmetry at 1 Axis
When I asked:
"Allow symmetry axes to have a minimum of 1 instead of 2,"
we discovered another subtle bug:
-
At symmetry = 1, the reflection looked wrong — it was mirroring vertically instead of horizontally.
After reviewing screenshots and my feedback ("symmetry line looks wrong"), Gemini identified the issue:
-
For 1 axis, the reflection needed a horizontal flip (
scale(-1,1)) instead of the usual vertical one.
With that correction — and extending the guide line across the full screen — the kaleidoscope worked perfectly even with just a single symmetry axis.
Final Touches: Boilerplate and Credits
To wrap up, I asked Gemini to:
-
Add Google Analytics and AdSense snippets in the
<head>, -
Include a credit footer acknowledging its role in the project and providing links to learn more.
Gemini handled these flawlessly, rounding off the project with a professional finish.
Reflections on AI Collaboration: Amplifying Creativity
This project showed just how powerful AI can be as a creative collaborator:
-
Accelerated Prototyping: The first working version came together in minutes, letting me test and refine ideas quickly.
-
Effortless Feature Building: Describing new features in plain English was often enough — Gemini turned those descriptions into working code.
-
Insightful Debugging: Gemini not only fixed bugs but explained the underlying issues clearly (like the coordinate rotation).
-
Handling Tedious Tasks: Boilerplate code, HTML structure, and styling were handled efficiently, freeing me to focus on creative decisions.
The iterative loop of prompting, testing, feedback, and refinement felt natural and highly productive. Rather than getting stuck in syntax or math, I could concentrate on user experience, visual impact, and learning design.
The result?
An interactive, educational, and beautiful digital kaleidoscope — born from a true partnership between human creativity and artificial intelligence.
You can explore the final code and experience the kaleidoscope yourself on the interactive canvas!
[text]
For Teachers
[SIMU_TEACHER]
Software Requirements
[SIMU_SWREQ]
Translation
[text]
Research
[text]
Video
[text]
Credits
Gemini 2.5 Pro
Version:
https://weelookang.blogspot.com/2025/04/symmetry-explorer-building-interactive.html
https://github.com/lookang/artDrawingSymmetry
Other Resources
[text]