uncategorised Examples

The theatre provides a presentation layer for files in the theatre/ directory

The theatre files showcase Polypoint features.

The files within this directory are just standard JavaScript files. They work in a standard setup, but the Polypoint site will access additional meta data within the file, such as title and imports.

Checkout the source code within the theatre directory or run one of the examples.

Examples Files Categories

uncategorised: 129 Examples

Theatre files

  • A dynamic SVG path command builder that simplifies creating relative and absolute path data.
  • Experimental stage for managing and animating point directions with dynamic rotation logic.
  • x-projected-circle thumbnail
    An experimental stage featuring dynamic Bezier curves and synchronized point rotations.
  • Real-time Voice Activity Detection (VAD) to monitor, capture, and play back speech samples as WAV files.
  • viewport-track thumbnail
    Smoothly transition a single point while shifting all other points in the scene to maintain focus.
  • widget-examples thumbnail
    Manage UI components like buttons and sliders to control real-time stage animations.
  • within-polygon-test thumbnail
    Draw connected lines and perform real-time "point within polygon" hit tests for interactive fills.
  • x-1-GPT-fail thumbnail
    Experimental kinematics demo calculating elbow positions and polar coordinate transformations.
  • tiling-1 thumbnail
    Generate complex geometric patterns like triangular, hexagonal, and cubic grids of points.
  • stage-stretch thumbnail
    Responsive stage that automatically scales its canvas dimensions to match the global window size.
  • stamping thumbnail
    Create repetitive patterns by stamping point-based shapes across the stage canvas.
  • straight-line-connected-main thumbnail
    Render dynamic straight line connections and projected paths between point sets in real-time.
  • None
  • sun thumbnail
    A solar system visualization featuring orbital data, radial gradients, and planetary scaling.
  • A dynamic Three Point Line stage featuring interactive dragging and real-time gradient updates.
  • stacks thumbnail
    Manage dynamic point stacks and coordinate complex stage movements with real-time interactions.
  • stage-example thumbnail
    A basic stage setup to generate, weight, and visualize points and their center of mass.
  • spin-plotter thumbnail
    Capture and visualize XY RAD rotation data to create dynamic timestep captures and spline walks.
  • spiral-plotter thumbnail
    Draw a rotating spiral path that leaves a trailing line of points across the screen.
  • splatout-stack thumbnail
    Create dynamic "Splat" effects by clicking to spawn and animate expanding points with easing.
  • splatout thumbnail
    Click to trigger a growing circle that changes the background color once finished.
  • split-pointlist thumbnail
    Show a collection of draggable points linked by smooth purple curves.
  • spreadline-2 thumbnail
    Generate dynamic, jittering line distributions with randomized hues and varying radii on click.
  • spreadline thumbnail
    A dynamic stage featuring a randomized swarm of jiggling points with varying scales and hues.
  • scale-selection thumbnail
    Select and scale points using a dynamic drag-to-box selection tool with center-of-mass handling.
  • A screen-locked point system that tracks and maps relative coordinates to the global viewport.
  • screenshot-example thumbnail
    Capture and export your stage visuals instantly with full and cropped image download methods.
  • Capture canvas frames and upload them to a server to generate animated GIFs.
  • speed-2 thumbnail
    Dynamic particle emitter that scales speed and density based on point velocity.
  • speed thumbnail
    A dynamic particle emitter that adjusts birthrate and velocity based on point speed.
  • spin-plotter-2 thumbnail
    A dynamic starfield and spinning plotter featuring velocity-based motion and radial plotting.
  • rainbow-arc-pointlist thumbnail
    Creates a dynamic rainbow gradient arc path with interactive dragging and smooth curve transitions.
  • random-gauge-value thumbnail
    Visualizes random number drift by comparing a raw walk against a bias-corrected gauge system.
  • Generates and renders dynamic, randomized point-to-point line paths and horizon lines on canvas.
  • ray-example thumbnail
    Ray casting & reflection logic for calculating intersection points, bounce angles, and hit detection.
  • rotate-selection thumbnail
    Click-drag to create a bounding box and select multiple points with a center rotation handle.
  • rotation-field thumbnail
    A dynamic grid of points that synchronizes their rotations based on neighboring angles.
  • Manage spatial data with Quadtree-ready Rectangle logic for point containment and intersection.
  • Interactive Quadtree visualization for spatial partitioning and dynamic point querying.
  • quad-curve-example thumbnail
    Interactive demo of Catenary Curves with draggable points and real-time rendering.
  • quad-curve thumbnail
    Render dynamic quadratic curves with real-time point coupling and interactive dragging.
  • quadratic-example thumbnail
    Interactive quadratic Bezier curve generator with draggable control points and smooth paths.
  • quantize-point thumbnail
    Manage point positions and radius quantization within a dynamic theatrical stage environment.
  • rainbow-arc-pointlist-another thumbnail
    Generates a smooth, continuous rainbow arc by connecting points using dynamic radial curves.
  • potter-dual-lines thumbnail
    Dual Line Potter Wheel: Captures XY RAD points to create smooth spline walks and dual-path curves.
  • project-cone-extended thumbnail
    Render a dynamic, curved projected cone with interactive hit detection and custom outlines.
  • project-cone thumbnail
    Renders a dynamic projected cone with wall-intersection logic and interactive rotation.
  • Constructs tangent arcs between two circles using a geometric protractor and intersection logic.
  • protractor-point thumbnail
    Geometric tool to construct and visualize tangent arcs using intersecting circles and diamond shapes.
  • Efficiently manage and query 2D spatial data using recursive Quadtree partitioning.
  • Render dynamic line projections and multi-point connections with custom styles and rotations.
  • Experience seamless 360° movement using the Pointer Lock API for immersive, FPS-style navigation.
  • pointlock-demo-between thumbnail
    None
  • pointlock-demo-radial thumbnail
    None
  • pointlock-demo-ray thumbnail
    Anchor points together using a ray lock that reacts to manual dragging actions.
  • pointlock-demo thumbnail
    Interact with a draggable point that locks its orientation and shows a visual indicator.
  • polygon-bunkbed thumbnail
    Draw connected lines to form polygons and test point-in-polygon bounds with 3D perspective.
  • Simulates multi-joint pendulum physics with chaotic motion, gravity, and adaptive sub-stepping.
  • A basic interactive stage where a red point follows your clicks and renders to the canvas.
  • planets thumbnail
    Simulate a solar system with planets orbiting the sun using radial gradients and distance scaling.
  • plotter-cos-sin thumbnail
    Captures and plots dynamic Sine/Cosine wave patterns using timed point lists and rotation.
  • plotter-raw thumbnail
    Capture and plot XY RAD point data for timestep captures like spline walks.
  • Raw drawing example demonstrating manual line, polygon, and projection rendering without a Stage.
  • offscreen-example-a thumbnail
    Manage and render offscreen canvas elements with dynamic copying to the onscreen display.
  • onclick-example thumbnail
    Interactive canvas stage that handles click events to position and render a point object.
  • origin-shift-wide thumbnail
    Experience seamless coordinate transformation and wide-scale origin shifting for complex canvas layouts.
  • origin-shift thumbnail
    Manage coordinate systems and relative positioning with Origin Shift for dynamic point placement.
  • Explore geometric relationships through interactive pairs and sibling point structures.
  • paperquilts thumbnail
    Add points via clicks or buttons and draw pink quad curves between them on a canvas stage.
  • pattern-example thumbnail
    Create repeating textures by generating and applying custom canvas patterns as fills.
  • A dynamic canvas component that renders custom logic, code snippets, and text via slot configurations.
  • A dynamic canvas component that renders custom scripts, handles multi-slot configurations, and displays text content.
  • noding-arrows-styled thumbnail
    Displays a sequence of points connected by styled arrows and dynamic alpha labels.
  • noding-arrows thumbnail
    Display a sequence of labeled points joined by paths and directional arrows.
  • noding thumbnail
    Automatically labels points with alphabetical characters based on their position in a list.
  • mesh-links thumbnail
    Create dynamic mesh networks and interactive point connections with automated line rendering.
  • A comprehensive MIDI toolset for handling note events, dial values, and real-time input mapping.
  • MIDI track functions for playing river flows, bumblebee arpeggios, and musical scales.
  • mouse-indicator thumbnail
    Display real-time mouse coordinates and smoothed speed data via a reactive UI widget indicator.
  • Manage and render multiple concurrent scenes on a single canvas using a shared base class.
  • locked-joints thumbnail
    Create joints with angular limits by constraining point rotation within a defined cone.
  • Calculate and visualize a point's orientation and projection relative to the mouse position.
  • lookat-multiplier thumbnail
    Smoothly animate points towards a target using variable rotation speeds for dynamic motion.
  • lorp-2 thumbnail
    Creates a dynamic Bezier curve tube connecting two draggable points with calculated radii.
  • lorp thumbnail
    Create dynamic Bezier curves between split points with interactive radius scaling and rotation.
  • maze-inverted-origin-shift thumbnail
    Renders inverted maze walls from JSON data by computing boundaries between grid cells.
  • lines-plain thumbnail
    A grid-based maze stage that dynamically generates walls and paths for navigation.
  • little-walkers-nn thumbnail
    None
  • little-walkers thumbnail
    Small walking points move and rotate automatically across the screen with smooth transitions.
  • locked-coupling-points thumbnail
    One-way synchronization: updates flow from the primary node to coupled points without feedback.
  • locked-joints-reverse-rotate thumbnail
    Simulate realistic joint movement where parent points rotate based on child point drag resistance.
  • Simulate a ball bouncing inside a circular boundary with gravity and rolling friction effects.
  • A physics simulation featuring a ball bouncing inside a draggable circular boundary with gravity.
  • Simulate smooth, gravity-based rolling of a ball within a circular boundary with realistic friction.
  • Simulate realistic ball physics with gravity, friction, and bounce within a circular boundary.
  • line-spline-bridge thumbnail
    Create dynamic Bezier curves and interactive line bridges with real-time dragging and FPS tracking.
  • line-spline-rider thumbnail
    Simulate a dynamic 3D-style physics demo where dots bounce and reflect off a curved geometric line.
  • hover-action thumbnail
    Interactive point interaction handling click, drag, and hover events on a dynamic stage.
  • limit-projection thumbnail
    Simulate dynamic line projections and intersection math using interactive point-based geometry.
  • line-animated-curvy-arrows thumbnail
    Create elegant, animated curvy arrows using dynamic Bezier curves and iterative point motion.
  • line-arrow thumbnail
    Renders dynamic Catenary and Bezier curves with animated arrowheads and geometric indicators.
  • line-connected-main thumbnail
    Render straight lines, Bezier curves, and catenary curves using dynamic point projection.
  • line-example thumbnail
    A clear example demonstrating how to create and render a dynamic line between points on the stage.
  • device-orientation thumbnail
    Visualizes real-time device orientation data (spin, pitch, roll) using motion sensors.
  • drag-point thumbnail
    Interactive drag-and-drop point system with highlighters and dynamic visual feedback.
  • draw-line thumbnail
    Interactive line drawing and dynamic Bezier curve generation via mouse movements.
  • earth-sun thumbnail
    A dynamic celestial visualization of the Sun and Earth with interactive scaling and dragging.
  • click-create-line-length-present thumbnail
    Click-hold to draw lines that automatically display their length as a labels along the path.
  • click-draw-line-box thumbnail
    Create a bounding box by click-dragging to select multiple points and manage them with handles.
  • clip-draw-star thumbnail
    Display a field of stars constrained within a circular clipping mask using canvas gradients.
  • control-point-using-dirty thumbnail
    Link a point to a control point where movement and radius update based on mutual proximity.
  • coupling-old thumbnail
    Sync and link multiple points with relative offsets for real-time, bidirectional updates.
  • cullbox thumbnail
    A dynamic particle theater that culls screen-edge points and reacts to point velocity.
  • curve-line-comb thumbnail
    None
  • candle-flame-shape thumbnail
    Generates dynamic flame and teardrop shapes using Bezier curves based on origin point geometry.
  • Simulate double pendulum physics with a multi-segment tail using gravity and angular damping.
  • chars-example thumbnail
    Render dynamic text and characters on a main stage using the Polypoint engine.
  • click-arc thumbnail
    Create dynamic circular arcs that trigger point splitting and visual feedback upon completion.
  • click-create-2 thumbnail
    Click to spawn and connect dynamic points on a canvas with real-time dragging and drawing.
  • click-create-example thumbnail
    Create and manage dynamic points using click-and-drag interactions on a main stage.
  • click-create-line-length-present-2 thumbnail
    Click-hold to draw lines with real-time length labels and dynamic arc angle measurements.
  • None
  • bilko-twelve thumbnail
    Interactive Bezier egg shape with draggable control points and dynamic distance tracking.
  • blur-example thumbnail
    A dynamic canvas stage featuring draggable points, text rendering, and interactive stroke effects.
  • Generates dynamic arc and line loops by calculating concave angles between point radii.
  • bezier-curve-example thumbnail
    Render and manipulate smooth Bezier curves with interactive point dragging and visual indicators.
  • bezier-spline-a thumbnail
    None
  • bezier-spline-b thumbnail
    None
  • Renders smooth arc-based paths and dynamic bisecting lines with interactive dragging features.