AI for Interactive Demos
When trying to communicate an idea or concept in a business environment, an interactive demo can increase your chances of successfully getting your point across and making it memorable. The trouble is that this requires writing code, and most people can’t do this. This is where a Large Language Model (LLM) such as ChatGPT can help.
First let’s consider an interactive demo, then let’s see how this was made by AI. It’s an elegant equation-free “proof” of Pythagoras’ theorem, remember that? We all learn it at school, but most people can’t prove it. In the demo below, there are 4 identical right-angled triangles:
What’s the area of the white square in the middle in terms of c?
Drag the triangles around until you can form 2 white squares, instead of the initial 1 white square.
What’s the area of the 2 white squares you have now formed, in terms of a and b?
Is the total white area the same as when you started?
The interactive demo above was written by a LLM called Claude 3.5 Sonnet, which is one of the best for writing code right now. However, you can try it with another LLM too. To make the demo I typed this in as the prompt:
Produce an interactive demo to show the Rearrangement Proof of Pythagoras' Theorem. Use html and java script.
There is a large square of size 300 x 300 pixels.
Inside the large square there are 4 right angled triangles with sides 200 and 100 pixels. They are blue, red, green and yellow.
Here's the starting orientation of the 4 triangles.
Position the blue triangle standing tall so it is 200 pixel side is on the left and the 100 pixel side on the bottom. Check the blue triangle's right angle is positioned bottom left.
The red triangle's position is the same as the blue triangle but rotated 90 degrees clockwise.
The green triangle's position is the same as the blue triangle but rotated 180 degrees clockwise.
The yellow triangle's position is the same as the blue triangle but rotated 270 degrees clockwise.
The 4 triangles can be dragged around anywhere within the square, but cannot cross the border of the square, so they stay inside the square. Make sure that to drag the triangle the cursor is actually inside the triangle. Be consistent about keeping the triangles inside the border of the 300 x 300 square.
It should produce a load of code which you paste into a text file and save it as index.html. Now when you double click on that file it will run the demo. Now that you have the basis for your demo you can add extra instructions. For example I asked it to label each side of the triangles as a, b and c. Sometimes it will make mistakes, and you can either retry or start again. If you make the demo too complicated it will start making more mistakes and become pretty frustrating.
There are AI tools such as Replit and Cursor that are specifically designed to help programmers write code. However, for the average non-technical person this is probably overkill as they require another subscription.
Here’s another interactive demo that was devised to communicate the concept of the AI intelligence explosion. It represents how the better AI becomes, the faster we can develop better AI, in a recursive loop. it was made with the prompt:
Produce a html and javascript file that I can run from a browser.
Include a demo that shows a circle with a gap in the edge. Show 5 small balls bouncing around in the circle, when they pass through the gap they escape and disappear, however this generates 3 new balls inside the circle. This continues until there are 1000 balls, then explodes. There should be a restart button.
The ball count was added later.
The interactive demos you can come up with to help you convey your ideas are limited only by your imagination.