about clockwork

clockwork is the name of the little framework i use to display all of those glsl visualisers that you see on the graphics pages. it’s more or less a shadertoy clone, rendering a fragment shader onto your screen, with some additional features:

a shader can specify additional parameters. for example, some shaders have custom colours, meaning you can specify an alternative in the url
loading images and helping managing animation of spritesheets
easily and automatically create palettes
overlayed text and (eventually) the means to interact with it a little bit

ultimately most of this isn’t really intended to be used by anyone other than me (or rather, im not gonna write any docs) but i dont obfuscate any of the javascript so you can download it if you like or otherwise inspect element and poke around and see how it works. you can also just ask me about it if you like

special thanks to paperdave for helping me get started with glsl in the web and MageAthena for the inspiration to do something similar to xem :)

parameters

outside of the name, each shader has these parameters:

speed (float, defaults to 1): how fast/slow the visualiser goes.

as mentioned, visualisers can define their own parameters, and if they have you can see them on the pages on this site that list them. all parameters outside of the visualiser name have a default value. to specify your own value, just add &parameterName=value to the end of the url. e.g. &speed=2

there are currently 4 types of parameters:

float: a number, including decimals
colour: the hexidecimal code for a colour. just numbers and letters, no hash. and yes, it’s spelt with a u :) if you’re writing a shader, it gets passed as a vec4 uniform.
gradient: two colours separated by a colon (:) to make it easier to calculate gradients between the two. if you’re writing a shader, it gets passed as 2 vec4 uniforms: (name) is the first colour and (name)Offset is the second one minus the first.
palette: one or more colours separated by a colon (:), to specify a palette of colours. if you’re writing a shader, it will create a 1 pixel tall image that consists of each colour in the palette in order. it also populates a float uniform called (name)Size with the size of the palette.

text

visualisers can display text for funny devious little purposes ;)

when you view a visualiser that has text specified in the url, you are shown a screen that tells you exactly what text will be displayed, and can choose to view the visualiser either with the text or without it. this is so people can’t deviously sneak things you don’t want to read in there. please be safe!

to specify text, use the text parameter. use | as the separator between messages and + as a replacement for space. for example, &text=really+cool|paragraphs+here will cause the text to cycle between two messages, “really cool” and “paragraphs here”. be default, it will display a message for 2 seconds, then not display a message for 1 second, and then display the next for 2, etc

there are a lot of text related parameters, and here they are:

textDelay (float, defaults to 2): how long each message should be displayed in seconds
textBetween (float, defaults to 1): how long the gap between messages should be in seconds
textOpacity (float, defaults to 0.5): how transparent the text should be
textColour (colour, defaults to FFFFFF): the colour of any given text
textIsRandom: if this is set to any value, the text is displayed in a random order instead of the preset order