A satellite loop of a hurricane, driven by a vortex you can steer over a warm ocean.
The wind is a modified Rankine vortex, spinning like a solid body inside the radius of maximum wind and decaying outside, with low-level inflow and counterclockwise rotation as Coriolis dictates in the northern hemisphere, all carried by a steering current that bends north and recurves. Cloud water is advected semi-Lagrangian through that wind: convection is born in the eyewall and on logarithmic spiral bands, the vortex shears it into rain bands, and sinking air keeps the eye clear. Two flow-mapped fractal noise layers ride the wind for pixel-scale texture. Intensity relaxes toward a potential intensity set by the sea surface temperature under the eye, the storm churns up a cold wake behind it, and land starves it.
Try it. Press and hold to pull the storm toward the pointer: over warm water it strengthens, over land or cool water it falls apart. Switch between visible, infrared (with a cloud-top temperature enhancement) and sea temperature views, where the cold wake shows. The Ocean heat slider or the up and down arrows warm or cool the sea, and N starts a new storm.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a fake weather satellite loop of a hurricane with JavaScript and the HTML canvas element, driven by a simple vortex model. 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:
- Make a canvas that fills the window, stays sharp on high-DPI screens, and resizes with the window. Paint a dark blue ocean.
- Write a small 2D value or Perlin noise function yourself (no imports).
- Create a cloud grid about 240 by 150 cells. Fill it with noise-based cloud patches.
- Define the wind from a storm center: a Rankine vortex (speed rises linearly to a maximum at the radius of maximum wind, then falls off like 1/r outside), turning counterclockwise, plus a little inflow toward the center.
- Each frame, advect the cloud grid semi-Lagrangian (trace each cell backward along the wind, sample with bilinear interpolation), add new cloud in a ring around the center (the eyewall), let cloud slowly evaporate, and clear the eye.
- Draw the cloud as white with alpha over the ocean, scaled up with smoothing.
Once that works, make it beautiful:
- Add cloud sources on logarithmic spirals outside the eyewall, broken up with noise, and watch the vortex shear them into rain bands.
- Shade the clouds with a light direction using the density gradient, and draw a darkened, offset copy underneath as cloud shadows.
- Move the storm with a steering current and give it an intensity that grows over warm water and decays over land.
- Let the pointer pull the storm around.
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 an infrared view with a cloud-top temperature color scale, a cold wake the storm leaves in the sea surface temperature, or flow-mapped noise for finer cloud texture.
