/hyper-hydra

hyper-usable hydra extensions

Primary LanguageJavaScriptGNU General Public License v3.0GPL-3.0

hyper-hydra

Extensions for Hydra focusing on usability.

How to load extensions

You can load extensions into Hydra with the following syntax:

await loadScript("https://hyper-hydra.glitch.me/hydra-src.js")
await loadScript("https://hyper-hydra.glitch.me/hydra-wrap.js")

osc().out()

List of extensions

Order is merely alphabetical

hydra-abbreviations

Write very small hydra code.

source / url

o(10, 0.1, 1.2).bl(ns(3)).df(sh(4, 0.6).rt(0, 0.1)).out()

open in hydra!

hydra-arithmetics

All the functions you needed to make complex visual arithmetics, easily.

docs / url

osc(10,.1,2)
	.mod(gradient().asin().cos())
	.step(noise(2).unipolar().div(o0))
	.blend(o0,.2)
	.out()

open in hydra

hydra-arrays

Extends the functionality of arrays in Hydra, letting you operate between different arrays and generate new ones.

docs / url

gradient().diff(o0)
	.hue([0,2,3,8].div(10).addWrap([0.2,0.1]).smooth())
	.rotate(Array.run(8).mult(Math.PI*2/8))
	.add(shape(64,.02)
  			.scrollX(Array.random(16,-0.4,0.4).smooth())
  			.scrollY(Array.random(16,-0.4,0.4).smooth()))
	.blend(o0,.6)
	.out()
bpm = 50

open in hydra

hydra-blend

Adds most blending modes you know from raster image softwares. Ideal for compositing.

docs / url

osc(30)
	.screen(noise(3,1).pm())
	.linearBurn(gradient(1).hue(.3))
	.out()

open in hydra

hydra-canvas

Let's you easily control Hydra's canvas.

docs / url

setResolution(256,256)
canvas.setRelativeSize(2)
canvas.setAlign("right")
canvas.setLinear()

solid(1).diff(o0).scale(.5).diff(noise(2,0.4)).out()

open in hydra

hydra-colorspaces

All the function you might need to work with color in different colorspaces such as CMYK, HSV, YUV, etc.

docs / url

gradient().rgb.aSet(0)
  	.cmyk.from()
	.hsv.hOffsetFrom(noise(1,1),.3)
	.yuv(1,.5)
	.out()

open in hydra

hydra-debug

WARNING: doesn't work in atom / pulsar

Adds a .debug() function that allows you to easily read the fragment shader of your sketch and test changes in real time.

docs / url

osc().rotate().debug(o0)

open in hydra

hydra-fractals

Adds some functions that when feedbacked are useful for creating fractals. Thanks to Kali for the idea.

docs / url

src(o0)
	.scale(.75)
	.add(noise(2,1),.4)
	.invert()
	.inversion()
	.mirrorX2()
	.blend(o0,.3)
	.out()

open in hydra

hydra-gif

WARNING: doesn't work on instance mode as of now

Let's you load .gif files into Hydra.

docs / url

s0.initGif('https://i.giphy.com/media/kZqbBT64ECtjy/giphy.gif')

src(s0)
	.out()

open in hydra

hydra-glsl

Write GLSL code directly in your patches.

docs / url

glsl('vec4(sin(uv.x*i0+(time*i1*vec3(i2,i2*2.,i2*3.))),1.0)',16,2,.3)
    .glslColor('vec4(c0.brg-(sin(c0.b)*i0),1.)',()=>Math.cos(time))
    .out()

open in hydra

hydra-gradientmap

Create gradients with css colors and use them for gradient mapping.

url

const myGradient = createGradient("#000", "#0bf", "red", "white");
 
osc(30,.05).kaleid(720).scale(1,()=>innerHeight/innerWidth)
	.lookupX(myGradient)
	.out()

open in hydra

hydra-mouse

Replaces Hydra's standard mouse object adding useful properties.

docs / url

noise(1)
	.add(shape(64,.01,.2).scrollX(()=>mouse.posx).scrollY(()=>mouse.posy))
	.out()

open in hydra

hydra-outputs

Change the properties of Hydra's outputs' framebuffers. Most importantly: try linear interpolation.

docs / url

o1.setLinear()

src(o1)
    .layer(osc(30,.2,1).mask(shape(4,.1,0)))
    .scale(1.01).rotate(.01)
    .out(o1)

open in hydra

hydra-pip

Adds a function to toggle picture-in-picture. Note that colors might look a bit washed out since this extension uses hydra's canvas' MediaStream.

url

osc().out()

hydraPictureInPicture() // alias: hydraPip()

open in hydra

hydra-pixels

Retrieve pixel values from Hydra's outputs.

docs / url

osc(40,.09,1.5)
   .diff(osc(20).luma())
   .color(1,1,()=>1+pixel[0]/255)
.out()

update = ()=> {
  pixel = o0.read(width/2,height/2) // center of the screen
}

open in hydra

hydra-src

Adds srcAbs and srcRel functions. srcAbs will act as src() but will show the source with its original width and height on screen. scrRel will act as src() but will mantain the source's aspect ratio. Works great with hydra-wrap. There's also srcMask, srcAbsMask and srcAbsMark which will mask out the wrapping.

url

src(o0)
	.scale(1.01)
  	.colorama(-.02).brightness(-.2)
  	.blend(o0,.8)
	.layer(srcAbs(s0).luma(.4,.1))
	.out()

open in hydra

hydra-swizzle

Replicates the swizzling functionality from GLSL.

docs / url

gradient(1).gbg
	.layer(osc(30,.1,2).bggr)
	.layer(gradient().r.mask(shape(2)))
	.out()

open in hydra

hydra-tap

Adds a tap control for bpm and basic envelopes. Inspired by Resolume.

docs / url

osc(30,.01,beats(1)).out()

osc().rotate(beats_(2).curve(-3)).out()

osc().scale(beats(1).curve(2).range(1,2)).out()

// Ctrl + Space Bar for tapping
// Ctrl + , (Comma) for re-sync

open in hydra

hydra-text

Adds a text generator to Hydra

docs / url

hydraText.font = "serif"
hydraText.lineWidth = "2%"
str = " hydra_! "
solid(1,.2)
	.blend(src(o0).scale(1.02).colorama(.02))
	.layer(text(str))
	.diff(strokeText(str).modulateScale(noise(1,1), .4))
	.out()

open in hydra

hydra-vec4

Adds wrapper functions that allow you to construct vec4's like you would in GLSL.

docs / url

noise()
	.mult( vec4( vec3(0.5) , 1 ) )
  	.add( vec4( [0.5,0].smooth() ) )
	.layer(
		vec4( vec3( [0, 1, 0.5] , vec2( ()=>time%1 ) ) , 1)
  			.mask(shape(4))
	)
  	.out()

open in hydra

hydra-wrap

Change how Hydra wraps textures, and control the wrapping of generators.

docs / url

hydraWrap.setMirror()

src(o0)
	.layer(osc().rotate().mask(shape(4,1,0)))
	.scale(.5)
	.blend(noise(),.2)
	.out()

open in hydra

Also check:

  • extra-shaders-for-hydra : another really useful repo of hydra extensions made by Thomas Jourdan
  • hydra-midi : a super complete midi extension for hydra, made by Arnno Schlipf.
  • hydra-antlia : my extension of hydra for colors, geometry and interactivity.