960: Reacting to the Weird + Creative Corners of the Web

Summary of 960: Reacting to the Weird + Creative Corners of the Web

by Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

27m•December 3, 2025
Listen to Episode

Overview of 960: Reacting to the Weird + Creative Corners of the Web

Hosts Wes Bos and Scott Tolinski explore a collection of “weird, creative corners” of the web—projects, libraries, and tools used to make live-coded music, generative visuals, projection installations, interactive installations, and hobbyist LED light shows. The episode highlights specific projects (Strudel, Hydra, p5.js, shaders/Shadertoy, projection mapping/MadMapper, TouchDesigner, xLights), why they’re compelling, how they connect (audio ↔ visuals, GPU-driven shaders, addressable LEDs), and practical entry points for getting started.

Main topics covered

  • Strudel

    • Live-coding music in the browser (strudel.cc).
    • Code-driven loops, MIDI-like notes (e.g., “C4”), inline UI sliders and controls inside the REPL.
    • Used by live performers (example: DJ Dave) to compose/modify music in real time.

  • Hydra

    • Live-coded visuals/visual synth using WebGL (hydra.ojack.xyz).
    • Chainable syntax for layering, masking, scaling, mirroring; can be driven by audio input.
    • Great for kaleidoscopic, hypnotic visuals and live visuals linked to music.

  • p5.js

    • Large community-focused JS library for visual art, animations, shaders, physics-based visuals.
    • Friendly API for creating interactive visuals and data visualizations (beta site: beta.p5js.org).
    • Easier entry than raw WebGL/three.js for creative coding.

  • Shaders / Shadertoy

    • GLSL shaders operate per-pixel on the GPU—parallel paradigm (not loop-per-pixel).
    • Shadertoy is a community gallery of complex, compact GLSL examples (some effects in tens of lines).
    • Big learning curve; can induce “imposter syndrome” but very powerful.

  • Projection mapping (MadMapper)

    • Software to map video content to arbitrary physical surfaces (walls, facades, cabinets).
    • Enables large-scale building projections and precise installations.

  • TouchDesigner

    • Node-based environment for interactive installations, processing inputs (video, sound, depth sensors).
    • Used for installations with Kinect/3D cameras to manipulate density/depth and apply shaders in real time.

  • xLights

    • Desktop software for choreographing addressable LED Christmas-light shows.
    • Map lights in 3D, sequence effects and music, community of enthusiasts sharing shows.
    • Can integrate with FM/AM transmitters for synchronized public shows.

Notable insights & quotes

  • “Shaders code is crazy… you’re writing code that is processing every pixel at the same time.” — highlights the GPU-parallel paradigm shift when writing GLSL.
  • Live coding (Strudel) and visuals (Hydra) often embed UI into code (sliders, inline controls), creating a very expressive live performance interface.
  • These creative corners often combine multiple tools: Hydra visuals + projection mapping, audio analysis + shaders, addressable LEDs + music sequencing.

Key takeaways

  • There’s a broad, active ecosystem for creative web/audio/visual coding—many approachable entry points.
  • Tools vary by domain:
    • Music/live-coding: Strudel
    • Visuals/generative art: Hydra, p5.js
    • Low-level pixel work: GLSL/Shadertoy
    • Installations and physical projection: MadMapper, TouchDesigner
    • Home/holidays hobbyist displays: xLights
  • Integrations matter: hooking audio analysis to visuals, projecting outputs onto physical surfaces, or mapping LEDs to music yields the most striking experiences.
  • Expect a learning curve for shaders and some advanced tooling, but many demos and REPLs make experimentation easy.

Quick “how to get started” checklist

  • Strudel: Visit strudel.cc → open the REPL → run examples → tweak notes/sliders to hear live-coded music.
  • Hydra: Go to hydra.ojack.xyz → load examples → edit parameters and layer operators; try feeding audio in.
  • p5.js: Explore beta.p5js.org and the examples/tutorials for animations and shaders; run sketches in the browser.
  • Shadertoy: Browse shadertoy.com → open simple shaders and study the code that manipulates every pixel; modify small parts.
  • Projection mapping: Try MadMapper (trial) for mapping video onto photographed or modeled surfaces.
  • TouchDesigner: Download TouchDesigner and load Kinect/3D camera demos to experiment with depth-based visuals.
  • xLights: Download xLights, map your lights in 3D and import/assign effects to music; join local FB groups for show files.

Practical tips & notes

  • Shaders are written to run per-pixel on the GPU—conceptually different than CPU loops. Start with small modifications to existing shaders.
  • Many of the web-based tools use WebGL; modern browsers and hardware accelerate these experiences.
  • Projection and installation work often requires calibration (camera-based diffs, corner pinning, or physical mapping).
  • xLights and addressable LEDs require hardware (addressable LEDs, controllers) and local-network mapping; community repositories have many pre-made sequences.
  • If using a Synology NAS for media storage/transfers: a USB NIC (Realtek-based + Synology driver) can add multi-gig throughput; freeing space and optimizing caches can improve app responsiveness.

Resources & links mentioned

Picks & plugs (hosts’ recommendations)

  • Scott’s pick: Newcast (minimal podcast app) — recommended for a clean podcast-listening experience.
  • Wes’ pick: A small multi-gig switch (“Nick Giga” / inexpensive 2.5G/10G options) and a Ugreen USB NIC (Realtek chip) to add multi-gig to a Synology NAS cheaply.
  • Practical hardware tip: installing Synology driver from Synology Community Git and enabling the USB NIC can provide multi-gig connectivity; SSH/one-line tweaks may be needed.

Actionable next steps (suggested by the episode)

  • Pick one demo: open Strudel or Hydra and change parameters for 15–30 minutes—experimentation is the fastest learning path.
  • If curious about visuals + audio integration: try routing audio into Hydra or connect p5.js sketch to Web Audio API.
  • If you like physical installations: try mapping a small projector to a single wall/cabinet with MadMapper or just experiment with basic corner-pin projection and a single video.
  • For holiday / hobbyist LED projects: read xLights tutorials, buy a small batch of addressable LEDs and a controller, and start mapping a single window or walkway.

If you want to dive deeper into any single tool from the episode (tutorials, starter projects, or example workflows), pick one tool here and you’ll get a short step-by-step starter plan.