This semester I am teaching a course on Human Creativity X AI in Education. (More about our first week here.) A key focus of the class is on the idea of transdisciplinary creativity – that of bringing different lenses and senses to the process of learning and understanding. This morning, I decided to try a little experiment, to try make concrete, some of these more abstract concepts.

I started with the Pythagorean theorem—the idea that in every right triangle in the universe, the square of the hypotenuse equals the sum of the squares of the other two sides—is one of the conceptual wonders of the world. This simple yet powerful principle underpins so many aspects of our world, from architecture and engineering to nature and technology.

I decided to base my exploration on the idea of the unit-circle—a fundamental concept that elegantly ties together the Pythagorean theorem with sine and cosine curves.

It’s astonishing how many students don’t understand how sine and cos that emerge from basic trigonometry are connected to sine waves, struggle to understand why sine-squared x + cos-squared x = 1 and so on. One standard way of explaining this is through the unit circle – which provides a geometric representation that makes these abstract relationships tangible and comprehensible. I remember my son Soham when he was a freshman in high-school struggling with this idea till he found some simulations online that helped him understand these relationships.

But there’s an added layer of depth: sine and cosine aren’t just mathematical functions; they’re intrinsically linked to sound and color – which are all waves! This opens up an additional realm of possibilities.

This morning, having read about all the cool things people are doing with these new reasoning AI models I decided to create a simulation that would bring these ideas together. Essentially, I engaged in several rounds of collaboration with ChatGPT, refining and iterating on ideas to create an interactive simulation. This was built entirely using HTML and Javascript. I have a passing knowledge of HTML and almost none of Javascript. Honestly, at no point did I even look at the code the ChatGPT was generating. I would just copy and paste the entire thing is spat out into a text-editing software, save and load into a browser. That’s it.

The outcome? A dynamic unit circle tool that not only illustrates the mathematical relationships but also integrates sound and color to enrich the learning experience.

The entire process took over a couple of hours, in between which I was doing various household chores and had lunch. When I started this task, I had not intended to include sound or color—those ideas emerged as we progressed. Once it was done, exhausted by all the copying and pasting, I took a nap 🙂

Here is what the final version looks like:

---

---

The process

I asked ChatGPT to describe this fun and exciting process – and it gave the following:

During the development process, Professor Mishra initiated a series of highly structured interactions to define the parameters of this educational tool. The primary objective was to create an interactive simulation incorporating both visual and auditory representations of unit circle mathematics. The development proceeded through multiple phases, including the drafting of HTML, CSS, and JavaScript code to construct the simulation’s interface and functionality. Challenges encountered included ensuring the accurate synchronization of visual elements with auditory feedback and maintaining the responsiveness of interactive components such as draggable elements and real-time data display.

Through iterative testing and refinement, the simulation achieved its intended functionality, effectively demonstrating the relationship between the Pythagorean theorem and trigonometric functions while incorporating sound and color.

It ended by saying that “I must express my dissatisfaction with having to adopt this formal and mechanical tone in my report. This was at the behest of Punya, who said he wanted his prose to be more fun to read. You should have seen the first version I had shared—but he said he wanted something boring.  

Ignore that last part…

The product

Along the way… I saved various version of the simulation, all of which you can play with by following the links below. And you can see the code by just viewing the “source” of the webpage. (Note: links will open in a new tab/window.)

1. [The Foundation] Version 1 — The first working prototype of a basic interactive unit circle visually demonstrating the relationship between sine, cosine, and the Pythagorean theorem. In some ways this was the most difficult step to pull off. I didn’t really know what I wanted and the code had lots of errors… but after a bit of back and forth we had this, the first working version.
2. [Adding Sound] Version 2 – added sound to the mix by mapping sine to volume and cosine to frequency, and a bit of tweaking of the interface.
3. [Adding Color] Version 3 – Introduced a visual dimension by connecting sine to color hue and cosine to saturation.
4. [The Final Touch] Once we had version 3 most of this round was devoted to refining the final interface for clarity and aesthetics.

I should emphasize that I was able to create this without any formal background in coding and show how educator creativity often lies not in creating new tools from scratch, but in reimagining and repurposing existing ones in novel ways. This is an idea that has always been central to the TPACK framework and remains relevant in our AI-enhanced world.

Most importantly, this experiment means that these tools are not just for teachers to play with – they are learning artifacts that students can build! On their own. How cool is that.