hydro

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

live at garten.salat.dev/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.

Usage

copy paste this html:

<script src="https://unpkg.com/hydro-synth"></script>
<script>
  H.evaluate(`noise().out()`);
</script>

i recommend downloading the hydro.js to pin its version.

you can also use a canvas of your choice:

const canvas = document.querySelector("#my-canvas");
H.init(canvas);
H.evaluate(`noise().out()`);

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

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

Source

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

Geometry

• [x] rotate
• [x] scale
• [x] pixelate
• [x] repeat
• [x] repeatX
• [x] repeatY
• [x] kaleid
• [x] scroll
• [x] scrollX
• [x] scrollY

Color

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

Blend

• [x] add
• [x] sub
• [x] layer
• [x] blend
• [x] mult
• [x] diff
• [x] mask

Modulate

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

Array

• [x] fast
• [x] smooth
• [x] ease
• [x] offset
• [x] fit

Synth Settings

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

External Sources

• [x] initCam
• [x] initImage
• [x] initVideo
• [ ] init
• [ ] initStream
• [x] initScreen

Git History

More git history can be found in the schattenspiel repo.