H Y L O G E N

[](https://gitter.im/sleexyz/hylogen?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

Hylogen is a purely functional language embedded in Haskell for live-coding fragment shaders, featuring:

• simple and pure syntax
• standard operators (+, *, *^, <.>)
• compat. w/ your fav haskell goodies (higher-order functions, ADTS, swanky polymorphism).
• compiles to GLSL

It comes with hylide, a live WebGL renderer with:

• hot-reloading
• audio-reactive primitives
• texture backbuffering

Install

cabal update
cabal install hylogen

This will install the Hylogen package and hylide, the live renderer.

Usage

Here's a simple Hylogen program, saved as Example.hs:

module Example where
import Hylogen.WithHylide

color :: Vec4
color = vec4 (a, a, a, 1)
  where
    k = 20
    f = (*k) . sin . (/k)
    a = sum [ cos (x_ uvN * f time + x_ mouse )
            , sin (y_ uvN * f time + y_ mouse )
            ]

output :: Program
output = toProgram color

Run hylide:

$ hylide Main.hs

Now go to localhost:5678 in your browser. You'll see a live rendering of the generated GLSL:

void main() {
    float _7 = uvN.x;
    float _10 = (time / 20.0);
    float _9 = sin(_10);
    float _8 = (_9 * 20.0);
    float _6 = (_7 * _8);
    float _11 = mouse.x;
    float _5 = (_6 + _11);
    float _4 = cos(_5);
    float _3 = (0.0 + _4);
    float _15 = uvN.y;
    float _18 = (time / 20.0);
    float _17 = sin(_18);
    float _16 = (_17 * 20.0);
    float _14 = (_15 * _16);
    float _19 = mouse.y;
    float _13 = (_14 + _19);
    float _12 = sin(_13);
    float _2 = (_3 + _12);
    vec4 _1 = vec4(_2, _2, _2, 1.0);

    gl_FragColor = _1;
}

Hylide will recompile on file changes, sending fresh shaders to the WebGL context via websockets.

References

• The_Force by Shawn Lawson. Live-coding audio-reactive shaders!
• data-reify by Andy Gill, to keep intermediate AST representations from exploding by preserving the GHC heap's internal sharing

Resources

• demo reel
• examples
• hackage
• hylide

conceived of at the recurse center :)