vizplex

GLSL noise visualizer library.

Fullscreen (yes! fullscreen!) demonstrations here

Installation

The package is on NPM:

$ npm install --save vizplex

Alternatively, you can download the file from the GitHub repo and embed everything in <script> tags:

<script src="./vizplex.min.js"></script>

Usage

var vizplex = require('vizplex')
var canvas = document.createElement('canvas')
var eqs = ['n(x/32,y/32,t)', 'r', 'r', '1']

canvas.height = 512
canvas.width = 512
document.body.appendChild(canvas)

vizplex(canvas, eqs)

All the examples are in the docs/examples folder in the GitHub repo.

Documentation

vizplex(canvas, fns, options)

• canvas: The canvas node or DOM selector string
• fns: An array for the respective functions for RGBA. More detailed explanation below
• options:
  • timeFactor: Numeric value that multiplies the time variable. Used to controlling speed
  • ccapConfig: The config object used to instantiate CCapture. Used for recording the contents of the canvas. Webms do NOT support transparency, this means your alpha function must be 1

RGBA functions

Every RGBA function should have a range of [0, 1] (values outside the range will be treated as being on the boundary). Below are a few functions and values you can use in your RGBA function:

• abs(): Absolute value
• sin(): Sine trig. function
• cos(): Cosine trig. function
• n(): Simplex3 noise function (takes three arguments)
• t: The current time, in seconds, multipled by the time factor
• x: The X coordinate of the pixel being rendered
• y: The Y coordinate of the pixel being rendered

In general, you can use any built-in GLSL function.

You can also re-use the values of previous RGBA functions, as r, g, b, and a. For example, suppose you want:

var rgbaFuncts = [
  'n(x/32,y/32,t)',
  'n(x/32,y/32,t)',
  'n(x/32,y/32,t)',
  '1'
]

This means the GPU needs to compute n(x/32,y/32,t) three times, and since n is a mathematical function, you'll get the same output for each one. Instead, you can do this:

var rgbaFunctions = [
  'n(x/32,y/32,t)',
  'r',
  'r',
  '1'
]

Keep in mind order matters. r is defined before b, and b is defined before g, etc. This means that the following code won't work:

var rgbaFunctions = [
  'b', // Error: This uses the 'b' variable before it's assigned.
  'n(x/32,y/32,t)',
  'b',
  '1'
]

How it works

The RGBA function strings are parsed and mapped to proper GLSL syntax. For example, sin(x/32, y/32) would be mapped to sin(gl_FragCoord.x/32, gl_FragCoord.y/32). The RGBA functions then replace placeholders in a GLSL fragment template, the GLSL gets loaded, then graphics are drawn on the canvas. I'm pretty nooby at regexs, so please don't flame me if you think my source is garbo. Criticism is welcome though.

Acknowledgements

I would like to thank the all contributors of stackgl, which made my life a lot easier.