Rens Roosloot

Gravity Toy URS

Volledige gerenderde weergave van URS.md.

Laatst gesynchroniseerd: 13 april 2026

URS - Gravity Toy

Version: 0.2.0 Date: 2026-04-12 Author: Rens Roosloot / Claude collaboration

1. Purpose

This document defines the user requirements for a browser-based 2D gravity toy to be hosted on roosloot.com as part of the Visuals collection.

The goal is to create an Osmos-inspired interactive sandbox where glowing orbs attract each other through gravity, absorb smaller orbs on collision, and produce emergent orbital behavior — calm, tactile, and endlessly watchable.

2. Scope

In scope:

  • a standalone browser page
  • 2D n-body gravity simulation on an HTML canvas
  • orb absorption on collision (larger absorbs smaller)
  • four named presets: Solar System, Chaos, Binary, Sandbox
  • drag-to-launch interaction: drag direction sets velocity, hold duration sets mass
  • pause/resume control
  • preset selector and reset button
  • NL/EN language support
  • desktop and mobile support

Out of scope for the initial release:

  • 3D rendering
  • audio
  • save/load or shareable seeds
  • score, goals, or win/fail states
  • backend services
  • accounts or persistence

3. Core Concept

The project shall present a dark canvas where glowing orbs interact through mutual gravitational attraction.

Larger orbs shall attract smaller ones more strongly.

When two orbs collide, the larger shall absorb the smaller and grow by the combined mass.

The simulation shall run without user input and produce emergent behavior — orbits, clusters, mergers — that is pleasant to observe.

4. User Interaction Requirements

  • The user shall be able to drag on the canvas to launch a new orb. Drag direction sets launch direction; drag distance scales launch velocity.
  • Holding longer before releasing shall increase the mass of the launched orb, shown by a growing ghost circle during the drag.
  • The user shall be able to pause and resume the simulation.
  • The user shall be able to reset to the active preset.
  • The user shall be able to switch between four presets.
  • The experience shall work on desktop and mobile devices.

5. Preset Requirements

5.1 Solar System

  • one large central star, fixed at canvas center, that does not drift due to planetary gravity
  • eight planets in orbit at varying radii with slight orbital eccentricity
  • the system shall feel serene and stable

5.2 Chaos

  • three groups of orbs converging toward each other from different directions
  • varied orb sizes to create immediate chain merges on arrival
  • the system shall feel explosive and energetic from the first seconds

5.3 Binary

  • two large co-orbiting stars of similar mass
  • a field of debris with mixed orbital and random velocities
  • the system shall feel dramatic and gravitationally intense

5.4 Sandbox

  • a single quiet anchor orb at canvas center
  • empty space for the user to build their own system from scratch
  • no preset trajectories or existing interaction — the user defines the initial conditions

6. Visual Requirements

  • dark background
  • orbs rendered as soft glowing circles with a visible glow hierarchy: background field (massive bodies only), outer glow, bright core
  • orb color is mapped from mass and velocity: cool tones for slow small orbs, warm gold for massive bodies
  • faint motion trails showing recent path, rendered in three opacity segments
  • faint force lines between gravitationally close orb pairs, making gravity visible
  • a brief expanding ring at the spawn point when a drag-to-launch is released
  • absorption event shall produce a double expanding ring plus a white flash on the surviving orb
  • all motion and effects shall respect prefers-reduced-motion

7. UX Requirements

  • the concept shall be understandable without extended instructions
  • a brief hint text shall appear at the bottom of the canvas on load and fade after a few seconds
  • controls shall remain minimal and unobtrusive
  • the canvas shall be the primary focus
  • the mobile experience shall be a primary target, not a fallback
  • all user-facing text shall be available in Dutch and English

8. Technical Constraints

  • the project shall run client-side in the browser
  • the project shall be compatible with the static-site deployment model
  • the runtime shall not depend on backend services
  • the runtime shall not use client-side secrets or API keys
  • no third-party runtime libraries
  • runtime-required files shall resolve from within site/
  • the page shall live at site/visuals-gravity.html

9. Performance Requirements

  • the simulation shall run smoothly at 60 fps on a modern desktop
  • the simulation shall remain responsive on a mid-range mobile device
  • initial load shall require no large assets

10. Acceptance Criteria

  • URS-01: A user can open the page and see an active gravity simulation.
  • URS-02: Orbs attract each other and merge on collision.
  • URS-03: The Solar System preset produces visible stable orbital behavior; the star does not drift off-screen.
  • URS-04: The Chaos preset produces energetic chain merges from the first seconds.
  • URS-05: The Binary preset shows two large orbs co-orbiting.
  • URS-06: The Sandbox preset starts with one orb and empty space.
  • URS-07: Dragging on the canvas spawns a new orb in the drag direction.
  • URS-08: Holding longer during a drag produces a visibly larger orb.
  • URS-09: A launch burst ring appears at the spawn point on release.
  • URS-10: A white flash appears on the surviving orb after absorption.
  • URS-11: Pause and resume work correctly.
  • URS-12: Reset restores the active preset cleanly.
  • URS-13: The page works on desktop and mobile.
  • URS-14: The project runs without backend dependencies.
  • URS-15: NL and EN text are both present and correct.
Terug naar home