A free weather simulator where you make the wind, storms and hurricanes

Your own weather simulator, built in stages

Weather looks impossibly complicated, but most of what you see comes from a handful of simple rules: air flows from place to place, Earth's spin turns it, rising air cools, and cool air can't hold as much water. That makes it a brilliant thing to build with AI. You describe the rules and how it should look in plain English, and the assistant writes the code. You won't write any yourself. You describe, paste, test and paste back any errors.

• A world map with every country outline, in a natural style and a glowing neon style
• Thousands of streaks that flow with the wind, following the real trade winds and westerlies
• Drag to blow a gust of wind, and watch Earth's spin bend it
• Hurricanes that spin the right way for their side of the equator, curve away from it, feed on warm sea and die over land
• Heat, moisture and pressure you can paint on, with clouds, rain and fog that form by themselves
• Mountains that make rain on one side and leave the other side dry

Good for: geography and science lessons, anyone who has ever watched a hurricane on the news and wondered how it works, and anyone who has built our gravity simulator and wants a bigger physics challenge.

What you need

The trick to bigger builds

Big projects go wrong when you ask for everything at once. So this guide builds the simulator in stages. After each stage, play with it, check it works and save a copy (weather-v1.html, weather-v2.html and so on). If a change goes badly, open the last good copy, paste it back into the chat and say "Let's go back to this version."

The idea behind it is called a fluid simulation on a grid: the world is cut into thousands of little boxes, each holding its own wind, temperature and water, and every box is updated many times a second. AI assistants know it well. For inspiration, look at the real wind maps on earth.nullschool.net and Windy. Yours will be a toy version you can play with.

Build it in six steps

Step 1 gives you a simple version that works, and each step after it adds more. The simulator at the top of this page is roughly what you'll have once you've done every step. Yours will look a bit different, because the AI writes its own version each time.

1. A world map with flowing wind

   The first version is a map of the world with thousands of little streaks drifting along the planet's main wind belts. It already looks like the wind maps on the news.

   Copy this promptCopy

   I don't know how to code. Please make me a world wind map that runs in a web browser.
   
   Requirements:
   - Everything in ONE single HTML file (HTML, CSS and JavaScript together), so I can save it and double-click it. The only outside things it may load are the free world map outlines: topojson-client from https://cdn.jsdelivr.net/npm/topojson-client@3 and the countries from https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json
   - A flat map of the whole world (longitude across, latitude down, twice as wide as it is tall) filling the width of the page. Deep blue sea, land in natural colours (green, sandy deserts near 25 degrees north and south, white ice near the poles), thin dark country borders. Make it sharp on high-resolution screens using devicePixelRatio.
   - Split the world into a grid of 240 by 120 boxes. Each box holds a wind speed east-west and north-south.
   - Fill the grid with Earth's real wind belts: trade winds blowing from the east between the equator and 30 degrees (and slightly towards the equator), westerlies blowing from the west between 30 and 60 degrees, and weaker polar easterlies beyond 60 degrees, mirrored in both hemispheres.
   - Draw about 4,000 particles that drift with the wind, each leaving a short fading streak. Do the fading by drawing over the streak layer with a little transparency every frame. Give each particle a random lifetime, then restart it somewhere random.
   - Colour the streaks by speed: soft white for light winds, then yellow, orange and red for strong winds.
   - The map wraps round: anything leaving the right edge comes back on the left.
   - Run it with requestAnimationFrame.
   
   Please give me the complete file in one code block, then tell me in simple steps how to save and open it.

   Save it as weather.html and double-click it. You should see streaks blowing west across the tropics and east across the middle of each hemisphere, just like the real winds.

   Nothing happens? Press F12 (or Cmd+Option+I on a Mac), click the Console tab, copy any red text and paste it into the chat. The AI fixes most errors straight away once it can see the message.

2. Gusts of wind and Earth's spin

   Now the air becomes a real fluid you can push around. Drag across the map to blow a gust, and watch it swirl and bend as it goes, because the Earth is spinning underneath it.

   Copy this promptCopy

   That works, thank you! Now let me push the air around:
   - Keep the wind belts as a fixed background, and add a second "extra wind" grid on top that I can change. The wind anywhere is the background plus the extra.
   - Each frame, update the extra wind like a simple fluid: carry it along with the total wind (semi-Lagrangian advection: look back along the wind to see what arrives in each box), then remove any piling up or emptying out with a pressure solve (about 18 Jacobi iterations), then smooth it very slightly so neighbouring boxes don't flicker in opposite directions. Slowly let the extra wind fade away, faster over land than over the sea.
   - Add Earth's spin (the Coriolis effect): every frame, turn the extra wind slightly to the right in the northern hemisphere and to the left in the southern, by an amount that grows with the sine of the latitude. It should be zero at the equator.
   - Dragging on the map blows a gust along my drag. Faster drags blow harder. Fill a soft circle of boxes about 5 boxes wide along the whole path of the drag, and show a short glowing streak where I dragged that fades in under a second.
   - Use pointer events so it works with a mouse, a pen or a finger, and don't let the page scroll while I'm dragging on the map.
   - Put a hint on the map, "Drag anywhere to blow a gust of wind", and hide it after my first drag.
   - Never take a negative or very long time step: limit each frame's step to a twentieth of a second.
   
   Send me the whole updated file, not just the changed parts.

   Always ask for the whole file. Then you replace everything, save, and refresh the browser tab (F5, or Cmd+R on a Mac).

3. Hurricanes

   The star of the show. Press and hold on the sea to start a storm. It spins the right way for its side of the equator, drifts west, curves away from the equator, then gets swept east, just like real hurricane tracks.

   Copy this promptCopy

   Please add hurricanes:
   - A "Hurricane" tool button next to a "Wind" button. With Hurricane chosen, pressing and holding on the map grows a dashed ring for up to 2 seconds. Letting go starts a hurricane there. Holding longer makes it bigger and lets it grow stronger.
   - Keep each hurricane as an object with a position, a size, a top wind speed and its own velocity.
   - Every frame, write the hurricane's spin into the extra wind grid around it: wind going round the centre, strongest at the edge of the eye and weaker further out. Anticlockwise north of the equator and clockwise south of it.
   - Steer it smoothly. Its target velocity is the wind belt at its latitude plus a gentle drift west and away from the equator (the real "beta drift"), plus a little of the extra wind on a ring well outside the storm. Ease its velocity towards that target over a few seconds so it turns like something heavy, and cap its speed. Never let it cross the equator.
   - It grows towards its full strength over sea warmer than about 26°C (work the sea temperature out from latitude: about 30°C at the equator, falling towards the poles). It weakens over land and cold water, and disappears when it's too weak or reaches 55 degrees from the equator.
   - Draw it as a white spiral of cloud bands with a clear eye, made once on an offscreen canvas and rotated as it spins, mirrored for the southern hemisphere. Label it with a name, its category (Tropical storm, Cat 1 to Cat 5) and its wind speed in km/h. Show a dotted line of where it has been.
   - If I start one over land or cold sea, show a short message saying it has no warm sea to feed on.
   - A gust blown through a hurricane should push the whole storm off course.
   - Add "Hurricane season", "Pause" and "Clear" buttons. Hurricane season starts six storms where real ones start: the tropical Atlantic, the Caribbean, the western and eastern Pacific, and the southern Indian and Pacific oceans.
   
   Send me the complete updated file.

4. Temperature, humidity, clouds and rain

   Now the air carries heat and water too. Rising air cools, cool air can't hold its water, and the water turns into cloud and rain. Hover anywhere to read the weather there.

   Copy this promptCopy

   Please add weather to the air:
   - Give every box a normal temperature: about 30°C at the equator falling to about -20°C at the poles, a little warmer over tropical land, and 6.5°C colder for every kilometre of height. Also give every box a temperature difference from normal, its water vapour, and its cloud water. Carry all three along with the wind every frame. Let temperature differences fade over about 30 seconds.
   - The sea keeps adding water vapour towards 80% humidity. Land adds much less.
   - Work out how much water air can hold from its temperature (about 3.8 x e^(0.0655 x temperature) grams per kilogram).
   - Give each latitude a natural amount of rising or sinking air: strong rising at the equator, sinking near 25 degrees (where the deserts are), gentle rising near 55 to 60 degrees. Rising air is cooler, so it can hold less.
   - When a box has more water vapour than its air can hold, turn the extra into cloud. When it has less, cloud evaporates back. Thick cloud rains: turn the cloud above a threshold into rain.
   - Draw the clouds on their own layer from a small 240 x 120 image, scaled up smoothly with a little blur, white for cloud and darker grey-blue where it's raining. Cut wispy holes in it with a drifting noise texture. Draw short slanted rain streaks in rainy places.
   - Fog: when the air is almost full of water, the wind is light and it's fairly cool, draw a pale grey haze.
   - Hurricanes keep the air round their centre full of water, so they always rain.
   - Hovering the mouse over the map shows a small panel in the corner with the place's latitude and longitude, temperature, humidity, wind speed in km/h and "Clear", "Cloudy", "Rain", "Heavy rain" or "Fog".
   - Add "Show" buttons: Clouds, Temperature, Humidity and Pressure (leave Pressure for the next step). Temperature and Humidity colour the map from a small image with a key in the corner.
   
   Send me the complete updated file.

   Something stopped working? Tell the AI exactly what you did and what happened, for example: "When I add a hurricane, the clouds disappear everywhere. It used to work." That's usually all it needs.

5. Heat, pressure and storms that form by themselves

   This is where it starts to feel alive. Warm air rises and leaves low pressure behind, the air round it starts to spin, clouds build, and over warm sea a brand new hurricane can form without you placing it.

   Copy this promptCopy

   Please add pressure and more tools:
   - Give every box a pressure difference from normal (in hPa) that moves with the wind and fades over about 40 seconds. Show pressure as 1013 hPa plus a natural pattern (lower at the equator and near 60 degrees, higher near 30 degrees) plus that difference.
   - Warmer-than-normal air slowly lowers the pressure, and colder air raises it. Low pressure makes air rise, which makes more cloud.
   - Round a low or a high, gently pull the wind towards flowing along the pressure lines: anticlockwise round a low in the north and clockwise in the south (this is called geostrophic wind: speed = pressure slope divided by the Coriolis strength). Use a minimum Coriolis strength near the equator so it never divides by zero, and cap the speed.
   - Hurricanes have very low pressure in their middle.
   - Tools: Heat, Cool, Moisture, Low pressure, High pressure and Calm. Holding or dragging paints that change in a soft circle under the pointer. Calm settles everything under it back to normal and weakens hurricanes.
   - When I pick a tool, show a short panel under the map saying what it does and what to watch for, and switch the map to the view that shows it (Heat and Cool show Temperature, Moisture shows Humidity, Low and High show Pressure).
   - Mark the centre of every strong low with a red "L" and every strong high with an orange "H", with the pressure under it.
   - New hurricanes form by themselves where the pressure is very low, there's cloud, and the sea is warmer than 26.5°C, between 6 and 26 degrees from the equator. No more than one every few seconds, and no more than six at once. Show a message like "Ana formed over warm water".
   - Every second or so, add a small random low or high in the westerlies, so everyday weather keeps passing through.
   - Add "World temperature" (-8 to +8°C) and "Sea humidity" sliders. A warmer world means more water vapour and stronger hurricanes.
   
   Send me the complete updated file.

6. Mountains, neon style and phones

   The last step adds the world's great mountain ranges, a glowing neon look, and makes it smooth on every screen.

   Copy this promptCopy

   Please finish it off:
   - Add the main mountain ranges as lines of points with a height and a width: the Himalayas and the Tibetan plateau, the Andes, the Rockies, the Alps, the Caucasus, the Atlas, the Tian Shan, the East African highlands and a few more. Use them for the weather: wind slows over mountains, wind blowing up a slope rises and makes cloud and rain, and the far side stays dry.
   - Draw the mountains sharply from a separate high-resolution height map (4 pixels per degree), not the weather grid. Add ridges and valleys with "ridged" fractal noise, ragged edges, shading lit from the north-west, and snow above about 4 km.
   - Add a "Style" choice: Natural, and Neon. Neon has a near-black background, a faint purple grid of latitude and longitude lines, glowing purple country outlines, glowing contour lines on the mountains, cyan-to-pink wind streaks drawn with the "lighter" blend mode, and pink-tinted clouds and hurricanes.
   - Make the map crisp on every screen (devicePixelRatio, up to 2) and resize properly when the window changes. Make text and labels smaller on narrow screens.
   - Stop the animation when the map is scrolled out of view or the tab is hidden, to save the battery.
   - Keep it running even if my computer has "reduce motion" turned on. The motion is the whole point.
   
   Send me the complete updated file.

Quick fixes

The weather simulator gets slow. Please make it faster: draw the cloud and colour layers only every second or fourth frame, work out the rain streaks and the H and L marks only a few times a second, use fewer particles on small screens, and make the mountain picture once when the page opens instead of every frame. Send me the complete fixed file.

Questions people ask

Twist it into something else

Once your weather engine works, you can turn it into all sorts of things:

Made something amazing? Send it to us. We feature reader projects.

How a few simple rules make the weather

The sun heats the equator far more than the poles. Warm air at the equator rises, flows towards the poles high up, sinks around 30 degrees and flows back along the ground. That loop, and two more like it nearer the poles, make the trade winds, the westerlies and the polar easterlies. Sinking air near 30 degrees is dry, which is why so many of the world's great deserts sit there.

The Earth spins under all this moving air, so anything travelling a long way seems to curve: to the right in the north and to the left in the south. This is the Coriolis effect. It turns the wind belts sideways, and it turns air flowing into a low into a spinning storm.

Clouds come from one simple fact: warm air can hold more water than cold air. When air rises it cools, and when it can't hold its water any more the extra turns into tiny droplets. That's a cloud, and when the droplets get heavy, rain. A hurricane is that process running flat out: warm sea feeds it water, the water turns to cloud and releases heat, the heat makes the air rise faster, and more air rushes in. Take away the warm sea and the engine stops, which is why hurricanes die over land.

The simulator applies these rules to thousands of boxes many times a second. Building one is a lovely way to see that a few clear rules can make something that feels alive. It also teaches the habit that matters most with AI: describe the rule clearly, test it, and adjust.

What to build next