Isaac & Benji

A tiny web app of calm, simple games for two brothers. Works on tablet and iPhone, installs to the home screen, and works offline.

• Home – pick Isaac or Benji.
• Isaac → World Map – a 3D globe where every country is painted with its flag. Drag to spin, pinch (or use ＋/－) to zoom, tap a country to see its flag, name and capital. 🔊 reads it aloud, 🎲 jumps to a random country.
• Isaac → Insects – seven little creatures in 3D (Whymper's chafer beetle Paulosawaya whymperi, honey bee, carpenter ant, ladybug, housefly, jumping spider, giant centipede), built in code with real anatomy: swipe to turn, pinch to zoom, tap a part to learn about it, remove parts, show only one part, or explode the whole insect. EN/ES, spoken names. Walk and Fly buttons bring them to life: insects walk on alternating tripods, the spider on alternating sets of four legs, the centipede ripples its body with a wave of legs, and the flyers lift their wing covers, unfold their wings and hover (ant and spider only walk).
• Benji → Numbers – count the animals, 1–10. A number bubble appears on one side and that many animals (one kind, a different kind each round) on the other, smaller the more there are. Benji drags the number onto the animals: the bubble pops away and the app counts them out loud (recorded EN/ES voice), lighting each animal up with its own number badge, then says the number once more. A few seconds later the next number comes. No wrong answers and no autoplay: after ~9 s a ghost hand shows the move, but nothing is counted unless he drags the number.
• Benji → Fruits – pretend play for flexible thinking: a different animal (from the Animals game, or the teddy) is hungry every round and shows the fruit it wants in a thought bubble; Benji drags that fruit from the table to its mouth (it opens as the fruit comes close), it munches, hears "mmm" and the fruit's name (EN/ES recorded voices), then the animal says thanks in its own voice. Next round the request AND the friend change. A wrong fruit is never an error: the friend shakes its head and the fruit slides back. Nothing is said or eaten unless he touches something; a ghost hand hints after 12 s. After 5 fruits the scene changes colour.
• Isaac → Space – the Sun, 8 planets, Pluto and the main moons in 3D (swipe to turn, pinch to zoom, tap a body or pick one from the chips). Every body is a sleepy face carved into its surface (it turns with the planet; moons are tidally locked, so their face always looks at their planet; Uranus rolls on its side): it appears from nothing when you press Wake up on its card, and fades away again on Sleep. EN/ES facts, ⏸ to pause the orbits.
• Isaac → Storms – a 3D town (32 houses plus a downtown with glass towers, apartments, shops, gas station, school, football field, church, big-box store with a parking lot, warehouses, water tower, mobile home park, railway with a freight train, farm with barn and silos, billboards, cars, trees) you run a tornado (EF0–EF5, Enhanced Fujita scale) , a storm (rain shower → thunderstorm → severe thunderstorm with hail → derecho) or a hurricane (Saffir–Simpson categories 1–5, with a calm clear eye, an eyewall of the strongest wind, spiral rain bands and a storm-surge flood that rises over the town, floats cars and drains as the storm moves away) through. One finger drags the storm, two fingers turn/pinch the camera. The wind field is a Burgers–Rott vortex (tornado) or a downburst (storm); every roof, wall, garage door, car, tree, fence and pole lets go near the wind speed where it fails in real life, then is thrown by drag + gravity and breaks into boards, plywood, shingles, siding, bricks and branches. Live damage counter, path scar on the ground, hail, lightning, rain, slow motion, optional synthesized sound, EN/ES.
• Benji → Animals – a big picture of an animal with two big arrows (previous ◀ / next ▶, no swiping) and the animal's name in a colourful bubble underneath inside a soap bubble: pop the bubble and the name is set free (said aloud, with a pop sound); it also pops by itself after the animal's sound. Arriving at an animal plays its real sound, then its name 500 ms after the sound ends; tap the picture to hear it again. Tapping the picture also plays the sound. EN/ES switch, credits under ⓘ. 17 animals.

Run it

No build step and no Node needed:

python3 -m http.server 8123

Open http://localhost:8123. To try it on an iPad/iPhone on the same Wi-Fi, open http://<your-mac-ip>:8123 in Safari.

For the offline / "Add to Home Screen" (full-screen app) experience, host the folder anywhere with HTTPS (Netlify Drop, Cloudflare Pages, GitHub Pages…), open it in Safari → Share → Add to Home Screen.

Layout

index.html, css/style.css      shell + styling
js/app.js                      hash router (#/ · #/isaac · #/benji · #/isaac/map)
js/map-game.js                 the globe game
sw.js, manifest.webmanifest    offline + installable app
data/ flags/ vendor/ icons/    downloaded once by tools/fetch_data.py and tools/make_icons.py
js/space-game.js              Isaac's solar system (planet data + procedural textures in js/space/bodies.js)
js/jet-game.js                Isaac's balsa F-16: realistic model + derived kit (keel, formers, sheets)
js/iqon-game.js               Isaac's IQON tower + disaster lab
js/insects-game.js            Isaac's 3D insect viewer; models in js/insects/ (lib.js toolkit, beetle.js, bee.js, ant.js, ladybug.js, fly.js, spider.js, centipede.js, rhino.js, pillbug.js, worm.js, snail.js, slug.js)
js/animals-game.js             Benji's animals game (data/animals.json, sounds/animals/, images/animals/)
tools/build_animal_audio.py    finds real recordings (BigSoundBank CC0, Wikimedia Commons), trims them, builds audition pages
tools/devserver.py             local server with caching off: python3 tools/devserver.py
tools/fetch_animal_images.py    downloads the animal pictures (Microsoft Fluent Emoji 3D, MIT)
tools/pick_animals.py          copies the clips chosen by ear into sounds/animals/ and writes data/animals.json

Adding a game for Isaac: add a tile in #view-isaac (index.html), a route in js/app.js.

Isaac — Body (#/isaac/body)

A realistic human body in 3D, modelled by hand in code (no downloaded models) with 10 organs to put in and take out: brain, heart, lungs, stomach, pancreas, liver, kidneys, small and large intestine, bladder. Turn the body with a finger, pinch to zoom, a button shows/hides the skin. Drag an organ from the tray onto the body (its outline lights up where it lives; dropped anywhere on the body it glides home), drag it out or tap it and press the arrow to take it out. Tap an organ for what it does (it zooms in; heart beats, lungs breathe), 🔊 reads it, (i) has grown-up facts. Voices: python3 tools/build_body_voices.py (names + one-line jobs, EN/ES, from data/body.json). Code: js/body-game.js, js/body/model3d.js (anatomy), js/body/gen.js (noise, swept tubes, lofted bodies).

Isaac — Tsunamis (#/isaac/tsunami)

A 3D coast with a real shallow-water wave simulation (js/tsunami/sim.js: nonlinear shallow-water equations on a 300×170 grid of 30 m squares; wave speed = √(gravity × depth)). Tap the sea to shake the seabed with an earthquake (small 6.5 / big 8 / giant 9). The wave splits, races across the deep sea (~600 km/h, low), slows and grows tall on the shelf, the sea pulls back from the beach (a natural warning), then floods the town, breaks houses (they float away as debris) and drains back. A warning buoy and siren (bell button) send the little people up the hill — turn the siren off to see the difference. Cards explain each of 7 steps in kid words (EN/ES) with real numbers behind the (i) button; the HUD shows live wave speed / height / depth. One finger turns the camera, two pinch/pan; buttons: sound, speed (×1/×3/×8), siren, follow-the-wave, start again. Code: js/tsunami-game.js, js/tsunami/sim.js, js/tsunami/scene.js (terrain, GPU water shader fed by the simulation).

The tsunami is filmed like a movie: the pace races across the open sea and slows as the wave arrives, a tall curling wall of water with a foam lip and flying spray rides the biggest crest, the sky turns stormy, a flashing TSUNAMI WARNING banner appears, and a little film crew cuts between shots (rising water → alongside the wave → in the street as it looms → high above the flood). The speed button cycles AUTO / ×0.5 / ×2.

Benji — Shapes (#/benji/shapes)

"Shape friends": drag the piece to where it belongs, and the rule keeps changing so Benji practises flexible thinking: blue scene = match the SHAPE, orange scene = match the COLOUR (same kind of piece, new rule), green scene = PATTERN train ("what comes next?" — patterns change from ABAB to AAB to ABC, and shapes vary then colours vary). Three rounds of each, then it comes round again a little harder (a 4th shape). The scene colour and a flip of the rule badge show the switch. Every right move is celebrated by a different animal that jumps in with its real sound; a wrong move just slides back (a ghost hand helps after a while). Touching a piece says its shape/colour name; tap the rule badge to hear the rule. Voices: python3 tools/build_shape_voices.py (EN/ES, sounds/shapes/). Code: js/shapes-game.js.

Grown-up levels (Shapes): press and HOLD the small gear for a second to open the panel (so a toddler can't open it by accident). Choose which games are on (shape / colour / train), the train difficulty (easiest = "the same again", then A-B, A-A-B, A-B-C), how many rounds before the rule changes, and how many shapes; or tap a quick level. For a 2-year-old it starts on shapes + colours with the train off; the easiest train is just "the same shape again". Saved on the device.

More shapes and colours (Shapes): the game starts with 3 shapes (circle, square, triangle) and 3 colours (red, blue, yellow), 3 choices per round, and the train has 4 wagons with 2 choices. A grown-up raises the variety in the panel: shapes +star, +heart, +diamond, then the look-alikes oval and rectangle last; colours +green, +orange, +purple, then pink and brown. Voices for all of them are in sounds/shapes/ (tools/build_shape_voices.py).

Insects → Soil Worm (js/insects/worm.js): an earthworm (Lumbricus terrestris, not an insect) built from the species' real anatomy: 100 drawn rings standing for ~150 segments; pointed head with the lobe (prostomium) over the mouth on ring 1; saddle (clitellum) at segments 32–37; 8 bristles (setae) on every ring except the first and last; round front, flattened tail with the anus; darker back, paler belly, the dark back vessel showing through. INSIDE, at the real ring numbers (tap an organ and the skin fades): brain (3), mouth + pharynx (1–5), esophagus with chalky pouches and glands (6–13), five pairs of hearts (7–11, they beat), seminal vesicles / sperm stores / ovaries (9–13), crop (15–16), gizzard (17–18), intestine (19–tail), back and belly blood vessels, ventral nerve cord with a ganglion per ring, nephridia. Crawl = waves of squeezing (short, fat, bristles out) and stretching travelling head to tail; the organs move with their rings. Sources: Invertebrate Anatomy OnLine (Lander University) and Wikipedia 'Earthworm'.

Insects → Garden Snail (js/insects/snail.js): Cornu aspersum (a mollusc, not an insect). The shell is a logarithmic spiral (Raup model) with real helicid proportions: 4½ whorls growing 2.8× a turn, so the last whorl is ~4/5 of the shell, a low dome spire, no umbilicus, an oblique rounded opening with a white folded-out lip and the last whorl dipping in front of it; bands broken by yellow flecks, wrinkles and growth lines. It is carried like the real animal: axis across the body, spire pointing to the snail's right (a little up and back), the opening at the bottom-front of the coil where the thick neck comes out. The foot is grey-brown, darker on the back with two dark lines along the neck, a net of skin bumps, a pale sole, a rounded tail and pedal waves; two long upper tentacles with eyes on the tips and two short lower feelers that turn inside-out when pulled in; collar with the breathing hole (pneumostome) and anus on the right. INSIDE (tap an organ and the skin fades): jaw + radula, nerve ring (brain), pull-in (columellar) muscle, mating parts (dart sac, love dart, mucus glands, penis, flagellum, bursa), gut (esophagus, crop, stomach, intestine), digestive glands, lung (the roof of the shell space), kidney, beating heart, ovotestis + albumen gland. Buttons: Glide and Hide (the whole body pulls into the shell). Sources: Invertebrate Anatomy OnLine (Lander University, Helix aspersa), Wikipedia 'Cornu aspersum' and 'Gastropod shell', Conchological Society 'Garden Snail'.

Insects → Leopard Slug (js/insects/slug.js): Limax maximus (a mollusc). A long tan-grey body with black blotches on the mantle and three rows of broken black stripes a side, long tubercles with slime grooves, a flat three-banded sole, a pointed tail with the keel along its top; the oval mantle (shield) over the front third, round in front and pointed behind, with the breathing hole (pneumostome) on its right edge just behind the middle; a plain tan head with four tentacles (eyes on the long pair) and the mating opening on the right. INSIDE: the thin oval internal shell under the back of the mantle, the lung under the mantle with the heart (atrium in front, ventricle behind) in its bag on the LEFT and the big creamy kidney on the roof to the right (ureter to the anus by the breathing hole), buccal mass with jaw and radula, the two unequal salivary glands, nerve ring, a long crop down the right side, stomach, two pale digestive-gland lobes filling the back, an intestine of five limbs looping on the left and the rectum crossing to the anus, ovotestis at the very back, hermaphroditic duct, albumen gland in the middle, coiled spermoviduct, seminal receptacle, penis with its retractor, and the tentacle/head retractor muscles joining into one tendon under the lung. Buttons: Glide (pedal waves) and Scrunch up (the body shortens and humps, tentacles turn inside out; the organs scrunch with it). Sources: Invertebrate Anatomy OnLine (Lander University, Limax maximus), Wikipedia 'Limax maximus'.

Isaac → Jet (js/jet-game.js, model in js/f16.js): a realistic F-16 at 1:40 (375 mm long, 236 mm span) lofted in code from cross-sections (chin intake, bubble canopy, strakes into a cropped-delta wing with airfoil thickness, stabilators, fin, ventral fins, nozzle, wingtip Sidewinders), and the balsa kit derived from the same geometry the way real kits are built: a 3 mm keel with the wing and tail slots and a gap for the fin tab, 11 cross-section formers egg-crated onto the keel (the three in the wing bay split above and below the wing), a tabbed fin, a one-piece sheet wing, sheet tailplanes and ventral fins, a carved nose block and canopy block. Views: Jet (painted model, Fly makes it circle), Frame (the balsa skeleton inside the ghosted skin), Sheets (every piece shelf-packed on 100 × 915 × 3 mm balsa sheets with labels; tap a piece for its size and notes). EN/ES, kid text with grown-up facts behind the (i). The same F-16 flies in the IQON city: the Jet event there circles the tower with a chase camera, fires its Sidewinders (tap the tower to aim) or drops bombs, with a Power knob.

Isaac → Stars (js/stars-game.js, js/stars/data.js): 20 real stars of the Milky Way in a straight line from the Sun to the biggest star known (Stephenson 2-18): Sun, Sirius, Vega, Regulus, Spica, Pollux, Arcturus, Aldebaran, Polaris, Rigel, Deneb, Antares, Mu Cephei, Betelgeuse, UY Scuti, KY Cygni, RW Cephei, VY Canis Majoris, NML Cygni, Stephenson 2-18. Every star is drawn by a shader (convection cells, sunspots, limb darkening, real colour for its temperature) with its own look: Sun corona streamers and prominences, hot blue stars with diffraction spikes (Sirius flickers and has its white-dwarf buddy, Vega and Regulus are squashed by spin, Vega has its dust disc, Spica is egg-shaped with a twin), Polaris pulses with rings, red supergiants have giant bubbles and dust clouds. Camera flies between stars; prev/next arrows, chips, a Fly! guided tour, Real size! (stretches to true sizes: the Sun becomes a spark), and a star lessons sheet (colours = heat, dwarf/giant/supergiant/hypergiant, a star's life, tiny stars, you are made of stars, star families that highlight groups). Cards: kid text, 4 stat tiles, the family blurb, (i) grown-up facts, Say it. Sizes of the giants are uncertain; the numbers are 'about' and taken from current Wikipedia values (2023–2026 studies); the data file notes where they disagree.

Isaac → Balsa Jet (#/isaac/balsa, js/balsa-game.js, js/balsa/{design,sim,text}.js): a twin-tail fighter glider (inspired by the F-15, not a copy) designed only from 3 mm balsa sheets (3 × 100 × 1000 mm, the common sheet size) plus a lump of modelling clay. 12 balsa pieces: spine plate, two inner plates, two outer plates with the twin fins, wing, tailplane, two taped elevators, three canopy plates; slots in the stacked fuselage plates let the wing and tailplane slide through, the 3D model has real slot holes. LOOK: orbit, tap a piece for its card (size, grain, weight, which sheet it is cut from, EN/ES kid text + grown-up facts), Pull apart slider with labels, six paint jobs. BUILD: nine steps, parts fly in from the sheets. SHEETS: the pieces packed on 2 real-size balsa sheets with the grain along the sheet (wing cut tip to tip). FLY: balance meter (computed centre of gravity as % of the wing's mean chord, green zone 20–32%), clay slider and elevator trim, then Throw: a small 2D flight model (lift, drag, pitch stability with a neutral point at 40% MAC) decides glide / stall / tumble / dive. Balsa density 150 kg/m3; the CG rule of thumb varies between sources (about 25–50% of chord for hand-launch gliders) and the page says so.

Note: another session built a different 'Balsa F-16' at #/isaac/jet (js/jet-game.js, keel and formers). Both coexist under different names.