Join 10350+ others. No spamming.
I promise!

Follow us at github.



sleexyz/hylogen

317

sleexyz / hylogen

Haskell

GLSL embedded in Haskell


READ ME

H Y L O G E N

An embedding of GLSL in Haskell.

H Y L I D E

A live coding environment for writing shaders with Hylogen.



Install

Using the Haskell Platform:

  1. Install the Haskell Platform
  2. cabal update && cabal install hylogen hylide

Alternatively, stack can be used to build and install:

  1. Install stack
  2. stack install

Example

Here's a simple Hylogen shader to be used with Hylide, saved as Example.hs (available in the examples/ directory):

module Example where
import Hylogen.WithHylide

output :: Program
output = toProgram color

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 )
            ]

Run Hylide:

$ hylide Example.hs

If Hylide was built with stack, hylide needs to be run using stack exec (otherwise the Hylide modules will fail to load):

$ stack exec hylide Example.hs

Now go to localhost:5678 in your browser. You'll see a live rendering of the corresponding 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 changes to the Haskell source, sending generated GLSL to the WebGL client over websockets.

References

  • The_Force by Shawn Lawson. This was the initial inspiration for Hylide.
  • data-reify for type-safe observable sharing.

Conceived of at the Recurse Center :)