I started programming on a Commodore 64 and my dad’s IBM XT, experimenting with trigonometry-based animations in Supermon 64 assembler, Advanced BASIC, and Turbo Pascal. Back then, code was shared through computer clubs, BBSs, and magazines—a far cry from today’s tools.
I taught game design and interactive multimedia, then built learning games and motion graphics at boutique studios using Renderman, Director, and Flash. It was the golden age of kiosks, interactive CDs, and the early web. The early web was vibrant and experimental—full of playful layouts, animations, and surprises, a stark contrast to today’s clean but boxy designs.
Recently, watching C64 and Amiga demos reignited those early experiments. With tools like ChatGPT and GitHub Copilot, I wondered—can AI recapture the magic of those early creative sessions? Can it accelerate learning while still leaving room for discovery?
I decided to revisit trigonometry-driven animations, modernize them with AI, and produce real-time interactive art on CodePen. What follows are both the results and the lessons any developer can take away from using AI to explore creative coding. You can explore the code and interact with the solutions in real time on CodePen.
Experimentation Thrives Within Constraints
I quickly realized I couldn’t revisit the original Commodore 64 or Amiga workflow—assembling code and sharing it with friends was a thing of the past. With only three days and about 30 minutes each day to experiment, I pivoted.
I recalled the Keyhole Software app “Mockola” and my experience with Canvas and JavaScript, and decided to see what AI could suggest—choosing CoPilot and ChatGPT as my experiment partners.
Lesson: You don’t need a complex setup to prototype creatively. Constraining yourself — limited tools, time, or scope — often accelerates learning because you focus on essentials, not infrastructure.
Selected Constraints: Using Vanilla JavaScript, Canvas, and generative AI, how could I quickly spin up some cool graphic demos with sound that I could share instantly? I could set up an elaborate GitHub repo with actions to deploy a static page on cloud storage with DNS—but I wanted something even faster, real-time: CodePen.
AI as a Coding Partner — Not Just an Autocomplete
Day 1: Experimenting with Canvas, JavaScript, AI, and CodePen
Constraints: Using Vanilla JavaScript, Canvas, and generative AI, how could I quickly spin up some cool graphic demos with sound that I could share instantly? I could set up an elaborate GitHub repo with actions to deploy a static page on cloud storage with DNS—but I wanted something even faster, real-time: CodePen.
Experiment: Sine Wave
Prompt: “Using Canvas and JavaScript, generate a sine wave.”
Using Copilot (More Interactive)
It gave me an example and recommended amplitude, frequency, stroke style, and line width, even asking if I wanted to animate it.
Using ChatGPT (More Creative)
ChatGPT gave me a cyan oscillating sine wave running across the screen and suggested adding multiple colored sine waves overlapping it. After some repeated querying during lunch, I had something that emulated a Commodore 64 demo, with type animation following the wave.
The combination of both gave me not just runnable code but design inspiration — the kind that used to come from late-night tinkering in BASIC.
View CodePen Demo
Lesson: Treat AI as a collaborator, not a crutch. Use one tool for structure (Copilot) and another for exploration (ChatGPT). The magic happens when you combine their strengths — fast scaffolding and creative suggestion.
Sound + Interaction Bring Ideas to Life
Day 2: Adding Sound and Interaction
One of my other obsessions is sound. I play guitar and enjoy experimenting with modular synths. In the early 2000s, boutique agencies always tried to outdo one another with sound and animation. Why not make my own sound-generating sine wave synth?
Prompt: “Using this CodePen, can you generate sound?”
Copilot (Faster, More Educational)
CoPilot suggested using the Web Audio API with webkitAudioContext
and even provided a code snippet. It also suggested creating a UI for toggling sound controls.
ChatGPT (Slower, Full Solution)
ChatGPT recommended using square waves and leveraging chiptune techniques to emulate the Commodore 64 VIC sound chip. It offered a full solution that Copilot did not.
After a couple of lunch-break iterations, I had a polished interactive proof-of-concept with my own tweaks and enhancements.
Debugging with AI Is Still an Art Form
Day 3: Problems, Solutions, and Lessons Learned
Prompt: “I need you to fix the sine, square, sawtooth, and triangle oscillators so that users can interact with them directly in this CodePen.
Copilot: Quick suggestions for edits, links to other repos, and ideas for syncing waveform animations to oscillator types—but accuracy was inconsistent.
ChatGPT: Solved the oscillator issue, though some changes risked breaking other parts of the code.
After a few more iterations I was able to produce this:
Lesson: AI will happily produce code — even incorrect code. The key skill isn’t accepting answers; it’s validating, refining, and debugging with discernment. Think of AI as an intern who’s fast but untested.
AI Experiment Lessons Learned
- Using CodePen to track each day’s experiments was a smart approach. Still, I found myself wishing for more robust source control—features like branching, GitHub Actions, and CI/CD integrated with GCP Cloud Storage would have been invaluable in the long run.
- I would also consider exploring Python’s Manim library for trigonometry and math animations, or even building a custom framework for similar experiments.
- Each AI tool had its strengths and weaknesses. I preferred ChatGPT’s suggestions over Copilot, though both tools present challenges with code versioning and can sometimes overwrite work unexpectedly.
- Working with the HTML Canvas can be processor-intensive, but using WebAssembly (WASM) significantly improves performance—something I’d like to explore in future experiments.
- AI enables rapid prototyping and iteration, but often at a cost: bugs and defects can be introduced just as quickly as ideas are implemented.
Key Takeaways For Developers
- Start with Curiosity. Recreate something simple — a sine wave, an animation, a sound effect — and see how AI enhances it.
- Compare Tools. Copilot excels at structure and efficiency; ChatGPT shines in creative exploration and conceptual clarity.
- Document Daily. Use tools like CodePen or Replit to preserve snapshots of learning.
- Push Performance. Once you have a baseline, explore WebAssembly or GPU acceleration to evolve your prototype.
- AI Accelerates Creation, But Can Also Amplify Mistakes. Iteration and testing remain essential.
- Reflect, Don’t Just Ship. The best insight often comes from what didn’t work.
The Broader Lesson: Rediscovering the Joy of Coding
These quick experiments reminded me of why I started coding in the first place — to learn by doing and to play with ideas.
I’ve since continued expanding these experiments! Dive into my latest CodePen—a playground of advanced trigonometry and next-level interactive experiments, now with Export/Import JSON functionality! https://codepen.io/cmvaught/full/pvgNpEm My teenage boys declared it the coolest CodePen I’ve ever made.
AI tools aren’t replacing creativity; they’re amplifying it. But they also remind us to stay curious, question output, and keep experimenting. That’s how innovation happens — not through perfection, but through iteration. Just wait until my next blog on the Keyhole Software blog!