Hydra.js

I worked on exporting a p5/hydra effect to Touchdesigner. I found this to be a much more productive way of learning how to use it than following a tutorial, which is how I’ve previously implemented Touchdesigner ideas. I wanted to replicate this sketch that I often use as a building block for visuals. td chain example I built an audio spectrum chain, then first used a torus instead of a circle to generate the base, and then with C.’s help realized I could be using a 2D equivalent. ...

Was excited to be asked to do visuals for Night School + Phillip Otterbach at the Crown <3 Documenting this was also my push to get hydra canvas rendering working in my toolchain (see below!), which is a lot easier to document than videos. However I learned that audio isn’t loading in examples (mb by design? I opened a PR), so I can’t show these demos with audio reactivity. For Night School’s set, I wanted to play with these trios of soft blobs, and gradually overlay them with a moiré effect. ...

invited n. and m. over to do some movement while i played with projection. i showed some basic slitscan functionality i had, but i found a few things lacking before i would try it again: camera quality projection brightness (maybe) back-projection (maybe) backdrop quality while trying to improve the contrast of the projected image, i had m. hold an rgb light, and we found an unintended pleasing of feedback loop with the dominant color changing the background. ...

i last-minute* mocked up some background visuals for a party featuring ambient music. (i kept them running all night (12 hours) on a backlit screen near the dj booth and never really had to tune them. they were interesting enough to be entertaining while focused on, but didn’t dominate the space). i took a simple existing function from the hydra library and added a few lines for audioreactivity (color and distortion); black background was key to keep this looking more subdued and adding some forgiveness to the projected edges. ...

Made while I was ill and sequestering in my friends’ guest room in a cabin in New Hampshire. This is the first time I realized I could open a stream to one longer video, and access different points of the stream dynamically (I initially imported a lot of short clips, which was not workable memory-wise and reliably crashed the browser). tois is an array of “times of interest” that I preselected based on familiarity with the video. I’m playing mostly with layering and playbackRate, which I find to be an effective modulator when combined with the FFT of the audio playing. ...

slit scan capture #slitscan using #hydra.js on a half-time video of my best split-grip #pdayesha. would love to realtime-project this onto the dancer going out one side of the pole like this. right now speed of the trail is dictated by the amplitude of one of the fft bins for a bit of a dynamic effect — subtle in this more ambient track. ...

https://vimeo.com/1062659763?share=copy **spent 30 min tonight doing a rapid proof-of-concept for this multi-aerialist x multi-visualist hybrid performance i’ve been thinking about for awhile ty @myles_higher for being my test subject 🤍 oh and also giving me lots of real feedback on this idea in general for tonight, i set up very simple gestural control for reactivity using public #hydra.js sketches, but i want to add more cohesion soon with a mix of different sensors or controllers ...

r. tyler and i did viz for ciel, dj ladybug, and never not romance for crip rave during the plural prototypes gray area festival. solo viz for dj ladybug i did solo viz for dj ladybug with much more prepared material than i typically do for a hydra set (thus i would call this a hybrid of a livecoding set) step 1: preprocessing materials. when i asked dj ladybug for inspo she referred me to val de omar’s PLAT, which was a 20 min film comprising a series of still photographs. the only source we had for this was 480p. first i upscaled the photos to 4k (n=110) in stablediffusion. this process took about 12 hours. ...

Played more with p5 generation in preparation for the Easterner set; this time I’m taking data from more FFT bins than I normally do (usually I just hit the lowest bin because it’s the most obviously correlative, but this viz shows very clear correlates to all bins). Video demo of fft-determined (size and speed) p5 cmyk orbs: // Fft ersatz 3d timeseries // p5 canvas recursion: p5 x hydra @errorbesque p.remove() p = new P5(); // setup cnv=p.createCanvas(400,400); oldCnv=p.createGraphics(p.width,p.height); p.noFill(); // reset p.background(0); v0y=p.height/2; v0y2=p.height/2; p.draw = () => { if ((a.fft[0]<0.4 && p.frameCount%5!=0)) return; oldCnv.image(cnv,0,0,p.width,p.height); oldCnv.loadPixels(); p.imageMode(p.CENTER) p.angleMode(p.DEGREES) p.push() p.translate(p.width/2, p.height/2); p.image(oldCnv,-12,p.sin(p.frameCount)*2,400,400); p.pop() a0=a.fft[0]+a.fft[1]; p.stroke(255,0,255,200); di=50 p.strokeWeight(2) if(p.random(-1,1)>0) p.blendMode(p.ADD) p.ellipse(p.width/2,p.height/2,di*a.fft[1]/2,di*a.fft[0]*2+2); p.stroke(255,255,0,200) v0y+=p.random(-2,2); p.ellipse(p.width/2+10,v0y+p.sin(p.frameCount/10),di*a.fft[1],di*a.fft[0]*2+2); p.stroke(0,255,255,200) v0y2+=p.random(-2,2); p.ellipse(p.width/2-10,v0y2+p.sin(p.frameCount/10),di*a.fft[1],di*a.fft[0]*2+2); p.blendMode(p.BLEND) } s0.init({src:p.canvas})src(s0).out(o0) src(o0) .scrollX(.05) .blend(src(o0).pixelate(1000,2).modulate(src(o2).scale(.999)), ()=>a.fft[2]/3).hue([0.32].smooth().fast(.1)).out(o1) src(o1) .scrollX(-.1) .scale(1.15) .modulate(src(o2).scale(1.01) .pixelate(1000,1000),0.0) .out(o2)render(o2)a.show()a.setSmooth(.4) blur-glow code demo diffused-degraded-sandworm × Press Escape to close. Use Arrow Left and Arrow Right to navigate between images.

Basic canvas repetition with fft-responsivity First time using P5 in hydra. Importing packages was slightly challenging at first, mainly because I didn’t understand the js prototype importing order at first (:x). Got p5play imported and started using box2d with some particle behavior/generation mediated by the audio. ...