[03] Glitches, Noises, Errors
NYU Shanghai ~ Fall 2025
♡ ⁺˚⋆｡° ✩ °˚⋆⁺ ♡
♡ ⁺˚⋆｡° ✩ °˚⋆⁺ ♡
Today’s Agenda
~ Intermission ~
What is glitch?
“To err is human and to glitch is machine”
~ Phillip Stearns, Error, Noise, Glitch – The Art of the Algorithmic Unconscious (2011)
From Failure to Aesthetics
"It is from the 'failure' of digital technology that this new work has emerged: glitches, bugs, application errors, system crashes, clipping, aliasing, distortion, quantization noise..."
Result-oriented → Process/Systems-orientent
Hiding technical limitations → Exposing and celebrating them
♡ ⁺˚⋆｡° ✩ °˚⋆⁺ ♡
♡ ⁺˚⋆｡° ✩ °˚⋆⁺ ♡
“The existence of glitch-based representation depends upon the inability of software to treat a wrong bit of data in anything other than the right way. … the result of improper data being coded properly. … it is a given program’s failure to fully fail upon encountering bad data that allows a glitch to appear” ~ Hugh Manon, Daniel Temkin, Notes on Glitch (2011)
“A glitch is a mess that is a moment. … Although a glitch does not reveal the true functionality of the computer, it shows the ghostly conventionality of the forms by which digital spaces are organized” ~ Olga Goriunova and Alexei Shulgin, Glitch (2008)
Glitch Art in many Mediums
Anni Albers
John Cage
Glitch Art in many Mediums
Glitch Art in many Mediums
Nam June Paik
Max Headroom
Glitch Art in many Mediums
Pipilotti Rist
“It’s a feature not an error”
♡ ⁺˚⋆｡° ✩ °˚⋆⁺ ♡
♡ ⁺˚⋆｡° ✩ °˚⋆⁺ ♡
Critical Glitches
“Glitches, feedback, whitenoise, interference, static—although these may not be the final frontier, they are demonstrably—for now—the edge”
~ Legacy Russell, Glitch Feminism
“Whichever way noise is defined, the negative definition also has a positive consequence: it helps by (re)defining its opposite (the world of meaning, the norm, regulation, goodness, beauty and so on). Noise thus exists as a paradox; while it is often negatively defined, it is also a positive, generative quality (that is present in any communication medium).”
~ Rosa Menkman, Glitch Studies Manifesto
Intro to Video Synthesis
♡ ⁺˚⋆｡° ✩ °˚⋆⁺ ♡
♡ ⁺˚⋆｡° ✩ °˚⋆⁺ ♡
Video Synths
Video synths have a long history of hardware and software stretching dating back to the 60s.
They have been used in everything from movies and music videos to live VJ sets
Nam June Paik
N018_Paik-Abe Video Synthesizer, Nam June Paik (1972)
Paik wanted to move beyond manipulating a television so that two-way feedback is enabled, towards creating a machine that everyone ultimately can play with as if playing the piano.
Sandin Image Processor
Digital Video Synthesis!
Analog video synthesizers typically involve patching inputs to outputs with cables and adjusting knobs.
What does it mean to replicate this process with code?
Hydra!
Hydra is a tool that is modelled after analog video synthesis systems, built for live coding.
It’s a free and open source Javascript API that is a way of stitching together fragment shaders (GLSL) that runs in OpenGL for the browser (WebGL).
Sketch #3 - Andy Ye
Hydra!
There are five types of functions in hydra: source, geometry, color, blend, and modulate.
Sources are shapes and patterns that act as building blocks.
Geometry, color, blend, and modulate are various different types of manipulations you can do to and with these building blocks
add some music to the class playlist!
✧✹✴︎INTERMISSION✦✧✸
Hydra Workshop
Sources
Pick a source
osc(), noise(), solid() or external sources - initCam(),initVideo()
out()
Sources
Modifications
Do transformations
rotate(), pixelate(), kaleid()
Pick a source
osc(), noise(), solid() or external sources - initCam(),initVideo()
out()
Modifications
Modifications
Modify colors
color(), colorama(), brightness()
Pick a source
osc(), noise(), solid() or external sources - initCam(),initVideo()
out()
Modifications
Chaining Operations
Do transformations
rotate(), pixelate(), kaleid()
Pick a source
osc(), noise(), solid() or external sources - initCam(),initVideo()
Modify colors
color(), colorama(), brightness()
out()
Chaining Operations: ordering matters!
Chaining Operations: ordering matters!
External Sources: Webcam as Source!
What’s up with out()
Default out() is called o0
You can create as many as 4 outputs: o0, o1, o2, o3
Output could come from the same source, with different modifications
You can refer to other outputs to use as a texture or source, or the same output you’re working on (feedback)
Use render()
You can use render(o#) to quickly pick outputs to render
When no specific output is selected, render() returns all outputs
Bonus: External Video
Modulation: Use one signal to affect another
source
modulation texture
src(o1).modulate(o2)
out(o1)
out(o2)
Modulation: Use one signal to affect another
Just Enough JavaScript
The JavaScript you need to know to be fairly proficient in Hydra are these:
Feedback: Feeding a signal back to itself
.out() default is o0
Refer to o0 in a previous function!
src(s0).modulate(o0).out()
Arrow functions
// basic JavaScript arrow function
() => expression
// use it to call something EVERY FRAME,
// so that you can create animations
.scrollX(() => time*0.1)
.color(() => Math.sin(time*0.2))
For next week
Play around hydra and make a sketch: think about sources, modifications, and the “generative” nature of visual programming.
Read Read Casey Reas on the History of Generative Art Part I & Part II, and write a reflection
Submit Week 3 blog post via the homework form