A watercolour yacht race where boats tack upwind because their polars say so.
Each boat's speed comes from a polar diagram: nothing inside the no-go zone of about 32 degrees off the wind, fastest on a beam reach, best upwind progress (velocity made good) at about 46 degrees. So the fleet has to zigzag to the windward mark and gybe its way back down. Every boat computes its apparent wind and trims its mainsail to it, so sails flog while it tacks and lose speed exactly as the polar says, and booms swing across in a gybe. The wind oscillates and gusts drift down the course as darker washes with more pressure and a small shift; AI skippers play those shifts, look ahead for pressure, and tack onto the layline when the mark can be fetched. The water is a precomputed watercolour wash with pigment rims and paper grain, and dashed pencil tracks record every tack.
Try it. Hold the pointer where you want your boat (the coral sail) to go, and watch it stall if you aim into the no-go zone. Arrow keys or A and D nudge the helm, T or Space tacks or gybes, and R starts a new race. Leave it alone and a skipper sails it for you. The polar card shows where your boat is on its speed curve.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a top-down sailing race simulator driven by a real boat polar, using JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- The wind blows from the top of the screen. A boat's target speed depends on its true wind angle (TWA, the angle between its heading and the wind): zero below 32 degrees (the no-go zone), rising to about 5.7 knots at 46 degrees, 7.2 at 90, and 5.1 dead downwind. Store this polar as a small table and interpolate.
- Each boat has a position, heading and speed. Every frame, turn the heading toward a desired heading at a limited rate and ease the speed toward the polar speed, so tacking through the wind costs speed.
- Put a windward mark near the top and a start line at the bottom. Draw boats as little hulls with a triangle sail.
- Write a simple skipper: for each tack, find the heading that maximises speed x cos(angle to the mark) (velocity made good), sail the better tack, and only tack when the other side is clearly better.
- Start six boats on the line and watch them zigzag to the mark.
Once they race, make it beautiful:
- Paint the water as a watercolour wash: noise-based blue tones with darker rims, a little grain, and a vignette.
- Add gusts that drift downwind as darker patches with more wind and a small shift, and let skippers look ahead for them.
- Compute the apparent wind for each boat and swing the boom to about half the apparent wind angle on the leeward side. Leave fading white wakes behind each hull.
- Let me steer one boat by holding the pointer where I want it to go.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as a downwind leg with gybing, a live polar diagram inset, or right-of-way rules between boats.
