hydro

This is an experiment that tries to implement a minimal hydra in a single self-contained HTML file. The GLSL compiler is implemented with a stripped down version of @kabelsalat/core.

live at felixroos.github.io/hydro

Why?

I did this mainly to learn more about how WebGL works, as a continuation of schattenspiel. The hydra DSL seemed to be a good fit to implement with my graph compiler @kabelsalat/core. Also, it seemed like a nice challenge to try to do this in a single HTML file, which is very sharable and readable / editable.

Examples

• To load a random example, open the browser console and enter shuffle()
• To load a specific example, open the browser console and enter example(index)

You can also load some of my own examples:

• dragon tails
• moving mandala
• nyan worm
• jelly fountain
• comic eye soup
• floaty shards

Completeness

All documented hydra functions / features work, except the external sources and some synth settings. The initial goal was to see if @kabelsalat/core could be used to compile an existing DSL that also targets another language (GLSL) + another domain (visual). It seems to work out nicely for the moment. I might implement the remaining features in the future, just for completeness sake.

Be aware that this project is very new and likely to contain bugs.

Here's a list of implementated features:

Language Features

• Method-Chaining DSL
• Array Arguments
• Function Arguments
• Multiple Outputs with Feedback

Source

• o0...o3
• s0...s3
• noise
• voronoi
• osc
• shape
• gradient
• src
• solid
• prev

Geometry

• rotate
• scale
• pixelate
• repeat
• repeatX
• repeatY
• kaleid
• scroll
• scrollX
• scrollY

Color

• posterize
• shift
• invert
• contrast
• brightness
• luma
• thresh
• color
• saturate
• hue
• colorama
• sum
• r
• g
• b
• a

Blend

• add
• sub
• layer
• blend
• mult
• diff
• mask

Modulate

• modulateRepeat
• modulateRepeatX
• modulateRepeatY
• modulateKaleid
• modulateScrollX
• modulateScrollY
• modulate
• modulateScale
• modulatePixelate
• modulateRotate
• modulateHue

Array

• fast
• smooth
• ease
• offset
• fit

Synth Settings

• render
• update
• setResolution
• hush
• setFunction
• speed
• bpm
• width
• height
• time
• mouse

External Sources

• initCam
• initImage
• initVideo
• init
• initStream
• initScreen

Git History

More git history can be found in the schattenspiel repo.