Syntax - Tasty Web Development Treats
Syntax - Tasty Web Development Treats

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

Wes and Scott talk about the weird, creative corners of the web—from live-coded music with Strudel and wild Hydra visuals to shader wizardry, projection-mapping art, fully synced Christmas lights, and more. Show Notes 00:00 Welcome to Syntax! 01:10 Strudel https://www.tiktok.com/@dj_dave__/video/754

Featured Speakers

Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers HostScott Tolinsky Guest

Topics Discussed

Episode Summary

Executive Summary: The episode explores “weird creative corners of the web,” highlighting tools for generative music, live visuals, shaders, projection mapping, interactive installations, and holiday light shows. Scott and Wes react enthusiastically to platforms like Strudel, Hydra, P5.js, ShaderToy, MadMapper, TouchDesigner, and X-Lights, emphasizing how accessible creative coding has become. The episode closes with practical tech picks, including a minimalist podcast app and a low-cost network upgrade for a home NAS/server setup.

Main Topics: Creative coding for music with Strudel: The hosts discuss Strudel as a live-coding environment for creating electronic music, noting its readable syntax, MIDI visualization, and performance style used by DJs like DJ Dave and Switch Angel. Live visual generation with Hydra and P5.js: Hydra is presented as a chainable visual programming environment for video effects, while P5.js is framed as a broad, accessible community and library for artistic animation, data viz, and shader experimentation. Shader programming and ShaderToy: The episode emphasizes the power and difficulty of shaders, explaining that shader code runs on every pixel at once. ShaderToy is showcased as a community and showcase for highly compact but visually rich examples. Projection mapping and installation art: MadMapper and related tools are discussed as ways to project video onto real-world surfaces, enabling interactive and spatially aware art installations, a technique Scott connects to his college experience. TouchDesigner and sensor-driven interactive art: TouchDesigner is described as a flexible input/output tool for turning video, sound, depth, and sensor data into generative or reactive visuals, used in installations and performance art. Holiday light shows with X-Lights: X-Lights is presented as a hobbyist but sophisticated ecosystem for mapping addressable LEDs across houses and syncing them to music, with community-driven show-building and FM transmission options. Practical tech recommendations and home networking: The closing sick picks cover a minimal podcast app (Newcast) and a budget-friendly network upgrade using a USB NIC and a small multi-gig switch to speed up a Synology NAS and home transfers.

Key Arguments: Creative web tools have evolved into full ecosystems where artists can make music, visuals, and installations directly in code. Strudel is notable because it makes live electronic music creation readable and performant, with code that maps clearly to notes and synth structure. Hydra and P5.js lower the barrier to producing sophisticated visuals compared with raw WebGL or GLSL. Shader programming is conceptually difficult because the code runs across all pixels in parallel, requiring a different mental model than standard programming. Projection mapping and TouchDesigner enable interactive, location-specific art by tying visuals to physical surfaces, motion, depth, and other inputs. X-Lights turns a household into a programmable light installation, demonstrating how enthusiast communities can make advanced creative tech approachable. Small infrastructure upgrades—like a better switch or USB NIC—can significantly improve real-world home-server performance for creators working with large media files.

Data Points: Number of featured creative corners/tools: About 7 - Scott says they’ll go through around seven libraries/projects in the episode. Shader example length: 26 lines of code - A compact ShaderToy marble example is highlighted as especially impressive for its simplicity. Shader example length: 100 and 204 lines of code - A seascape shader is cited as producing realistic water-like visuals with relatively little code. Price of switch: $33 USD - Wes describes a small 2.5/10-gig switch purchased for $33. Cost of networking upgrade: $50 total - Wes says the USB NIC plus switch cost him about $50 combined. Internet speed: 3-gigabit internet - Wes explains his home has 3-gigabit service and a 10-gig out port on his UniFi setup. Throughput improvement: 2.5x faster - Wes says file transfers to his NAS became about 2.5 times faster after the upgrade. Download time: 22 seconds - A 4 GB Linux distro reportedly downloaded in 22 seconds on the new setup. NAS capacity: 20 terabytes - Scott notes his Synology NAS is 20 TB and currently full.

Pivotal Quotes: "once you told me it, it's called Strudel. I went, I looked into it. I was like, this is an entire world of people who are just creating things and are being creative." — Wes Boss: Reaction to discovering the Strudel live-coding music community after GitHub Universe. "So, just to even like blow your mind even more, Shader Toy is one of these sites that when I look at it, I get immediate impact. Syndrome because I look at this stuff." — Scott Tolinsky: Scott describing his reaction to ShaderToy’s advanced shader examples. "The code operates on every pixel at once." — Wes Boss: Explaining the core mental model behind shader programming.

Implications: The episode suggests creative coding is becoming more approachable and community-driven, opening opportunities for artists, developers, and hobbyists to build immersive audiovisual experiences. It also shows how modest hardware upgrades can meaningfully improve creator workflows at home.

🔓 Sign Up for Unlimited Episode Search

About Syntax - Tasty Web Development Treats

View all episodes from Syntax - Tasty Web Development Treats