Coding Experiments

Setup

This was surprisingly easy. I already had a personal github, but needed to install the iOS app. Once that was done, Claude Code walked me through linking to it. CC will create a branch and do its work, but then I need to manually create a PR to merge that branch to main. This is probably a good guardrail for real development work

Triangle Generator

I started in a very informal manner, getting CC to generate a random right angled triangle and to provide various information (angles, lengths, sin, cos, tan, etc) about it. Then, dictating additional prompts into my phone, I went through various iterations, adding additional triangle types (isosceles, equilateral, scalene), additional info (circumcenter, incenter, centroid, and orthocenter) and improving the UI. The appropriate display of angle and side names and values in the canvas area seemed to cause many issues, and in several iterations the display of the triangle was clearly incorrect, through calculated values seemed to be right.

Random Robby

This time, I'm going to be more formal, and spec out what I want and ask CC for a plan before building:

Prompt	Output
I want to create a page to generate random outcomes. The screen should show a logo "Random Robby" and below it, five six-sided dice rolling for two seconds and then each settling randomly on one side. A button, "Go" should allow me to roll again. The user can choose to roll from one to five dice, and for the dice to have from two to ten sides. If two sides are chosen, then the animation should show coins flipping. It should be optimized for mobile. Make a plan to code this, giving justifications for technology and coding choices.
This is a good first version, but let's make some improvements: I should be able to choose any number of sides between 2 and 10, not just even numbers The coin flipping animation is great, but it should spin vertically, rather than horizontally The dice animation is more of a shaking than rolling. Is it possible to give the impression of a solid polygon rolling in place and then settling? The options panel takes up too much space. It should be collapsible and hide behind a button to the right of the logo, It should be collapsed by default and show the current settings in the form of a number and a polygon representing the number of sides. The dice/coins should be sized to take up to 80% of the screen width. Let's change the default to one coin When I first visit, it should spin for five seconds and then randomly land Let's also change the button so it says "Flip" or "Roll" depending on the number of sides chosen.
Okay, this is a big improvement, but let's make some more adjustments: The animation is too fast, let's reduce the speed by half. Let's also reduce the initial loading animation to 3 seconds The dice animation is not very nice. It looks like a card being turned around. Can we make it like a real solid cube? (even if that isn't realistic when anything but six-sides is selected?) Let's add some branding by having a cute monkey hanging from the logo, and changing the coin images to the monkey's head and his butt for heads and tails respectively.
I think we're pretty close now: Dice are too close together. There should be clear space between them I don't like the switch to numbers when I select more than six sides. Let's continue to represent numbers higher than six with pips arranged in pleasing patterns. Can we modify the monkey butt so we see it from the side, and emphasize the tail more. When I first load the page, I'd like to just see the spinning coin taking up eighty percent of the screen width, and only when it has stopped should it shrink down and show the rest of the UI
I don't like the new butt! Can we make it a simply 2-D rendition of the lower half of a monkey with a nice curling tail! Also let's make the overall design more coherent, by giving the background a jungle vibe
Finally, I prefer the original butt graphic. Can we revert to that? Also, I notice that on mobile, the collapsed settings panel covers the monkey in the logo. Can we put it in the right hand corner? Finally, coins and dice are too spaced out vertically when we have more than three. Let's limit vertical spacing to the same as the horizontal spacing.
Once the initial loading animation is complete, can we make the options button shake and glow for two seconds. Also, if the options panel is open, can we auto-close it when we click the "Flip/Roll" button.