Real Threads

Real Threads

Energy — Primer

Project Primer: Energy

Origins

Inspired by the creator's daughter's science test and the work of artist Olafur Eliasson, this project presents a series of interactive "installations" exploring the theme of energy. Each installation is a standalone HTML5 Canvas experience that teaches a science concept through direct interaction — pressing, dragging, sliding, and clicking rather than reading.

The project bridges science education with digital art, treating each concept as an Eliasson-style installation: immersive, interactive, and visually striking.

Structure

Six installations, each wrapped in a React component that loads a sandboxed iframe:

  1. Introduction (energy1_intro.html / Energy1Intro.tsx) — Energy as the fundamental force driving change and motion. Follow the light to begin exploring
  2. Particles (energy2_particles.html / Energy2Particles.tsx) — Kinetic energy of particles determines state of matter. A slider adds energy to show how solids, liquids, and gases behave at a microscopic level
  3. State Change (energy3_state_change.html / Energy3StateChange.tsx) — Adding energy causes phase transitions. Press and hold to apply heat, watching a crystal transform from solid to liquid to gas
  4. Living Things (energy4_life.html / Energy4Life.tsx) — Organisms capture, store, and use energy. Click the sun to gather light energy, then use stored energy to grow a plant
  5. Reactions (energy5_reactions.html / Energy5Reactions.tsx) — Chemical reactions involve breaking and forming bonds. Drag reactants together to trigger an exothermic reaction
  6. Seasons (energy6_seasons.html / Energy6Seasons.tsx) — Earth's axial tilt creates seasons by varying how directly sunlight hits each hemisphere. A slider changes orbital position to show energy distribution

Each component renders in a 75vh-height dark container with rounded corners, giving each installation a gallery-like presentation.

Key Concepts

  • Kinetic energy and state of matter: Particle motion determines whether matter is solid, liquid, or gas
  • Phase transitions: Energy input breaks molecular bonds, causing matter to change state
  • Photosynthesis / energy capture: Living organisms convert light energy into chemical energy for growth
  • Exothermic reactions: Chemical processes that release energy when bonds form
  • Axial tilt and seasons: The Earth's 23.5° tilt causes seasonal energy distribution variation

Thematic Clusters

  1. Science Education: Each installation teaches a Key Stage science concept through hands-on interaction
  2. Digital Art Installation: Inspired by Olafur Eliasson's immersive works — each piece is a standalone experience
  3. Interaction as Pedagogy: Every concept requires the visitor to do something — press, drag, slide, click — rather than passively read
  4. Energy Transformations: The installations form a narrative arc from fundamental energy concepts to planetary-scale phenomena

Conceptual Vocabulary

  • Installation: A self-contained interactive HTML5 experience, displayed in an iframe — borrowing art gallery terminology
  • Canvas animation: The HTML files use HTML5 Canvas for rendering particles, phase transitions, and orbital mechanics
  • Sandboxed iframe: Each installation runs in a sandboxed iframe (allow-scripts allow-same-origin) for security isolation

Related Projects

  • Roads: Another project using embedded interactive HTML files for mathematical/scientific visualisation
  • Interactive Data Viz: Shares the philosophy of making abstract concepts tangible through interaction
  • A Liquid Glass Menagerie: Both projects present visual experiences inspired by real-world artists/phenomena

Agent Guidance

When discussing Energy:

  • Lead with the inspiration: A daughter's science test + Olafur Eliasson = interactive science installations. This personal origin story grounds the project
  • Walk through the six installations: Each teaches a distinct concept; describing the progression shows the project's pedagogical arc
  • Emphasise interaction: The point is that visitors do things — they don't just watch. Mention specific interactions (slider for particles, press-and-hold for state change, drag for reactions)
  • Technical highlights: Pure HTML5 Canvas animations in static HTML files, embedded via sandboxed iframes in React wrapper components
  • Common questions: "What age is this aimed at?" (Key Stage science, roughly 10–14, but engaging for all ages), "Can I use this for teaching?" (it's a personal project, not a licensed educational resource, but demonstrates concepts well), "How were the animations made?" (HTML5 Canvas with AI assistance)
  • Avoid: Calling the individual installations "pages" — they're installations (Eliasson-inspired); overstating the educational rigour (this is an art/science passion project, not a curriculum resource)
← Back to home