This is a
playground to test code. It runs a full
Node.js environment and already has all of
npm’s 400,000 packages pre-installed, including
vizplex with all
npm packages installed. Try it out:
This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.
GLSL noise visualizer library.
Fullscreen (yes! fullscreen!) demonstrations here
The package is on NPM:
$ npm install --save vizplex
Alternatively, you can download the file from the GitHub repo and embed everything in
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.
canvasnode or DOM selector string
alphafunction must be
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:
In general, you can use any built-in GLSL function.
You can also re-use the values of previous RGBA functions, as
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 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' ]
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.
I would like to thank the all contributors of stackgl, which made my life a lot easier.