Code Area Help

The code area allows you to specify JavaScript to execute upon the page to generate the frames of the animation.

Use at your own risk!

This is by no means well tested, and you can easily break the site with the code you enter here or lock up your browser, but fear not! We don't use the code anywhere on the site, so if everything gets broken, just refresh your page and start over.

Things to remember:

Frames are composed of 3 arrays, frame.h, frame.s, and frame.l, each of these is an array of 256 entries, and contains a hue, saturation or lightness value in the range 0 to 1.
Your code will be called once and is expected to add any frames it wishes to add to the timeline.
If you use Firefox, its recommended to load the Firebug extension, then if your code has errors it will show you the error message rather than just hanging up.
You can log stuff to the debug console using Y.log('My message here','debug'); This will show up in the Firebug console.
You can edit your frames by hand after generation.
You can access all the frames at 'this.frames' as an array.
You can only create a maximum of 500 frames, thats just over 15 seconds of animation at the fastest framerate.
Keep in mind that the code you write is executed just once in order to generate the frames. If it takes a long time to execute then your browser may lock up! See the advanced example below for how to work around this.
You can use setTimeout and all the other JavaScript functions in your code. YUI3 is also available for you to use.

Useful functions:

this.clearFrames(): Clears all the frames from the timeline.
this.createFrame(): Creates a new empty all-black frame
this.addFrame(frame): Adds the specified frame to the timeline
this.drawLine(frame, sx, sy, ex, ey, h, s, l): Draws a line in the specified h, s and l values from the source point (sx,sy) to the end point (ex,ey) with rudimentary anti-aliasing. Function courtesy of Alan Third!
this.setPoint(frame,x,y,h,s,l): Sets the point specified by (x,y) to the specified h, s and l values
Y.CWD.Colors.hslToRGB(h,s,l): Converts a HSL value in the range 0..1, to RGB values in the range 0..255. Returns an object of the form {r:255,g:255,b:255}.
Y.CWD.Colors.rgbToHSL(r,g,b): Converts an RGB value in the range 0..255, to HSL values in the range 0..1. Returns an object of the form {h:1.0,s:1.0,l:1.0}.
this.shiftUp(frame), this.shiftDown(frame), this.shiftLeft(frame), this.shiftRight(frame): Shift functions allow you to move all the pixels in a frame up/down/left/right by one pixel.
this.fadeToBlack(frameCount): Generates a fade to black from the current frame using the given number of frames to do the fade.
this.paintSprite(frame, sprite, spriteWidth, spriteHeight, spriteX, spriteY, hue, sat, lum): This function renders a sprite (a single dimensional array of values between 0 and 1) to the specified frame at the specified position. See the Sprite example below for details on its use
this.paintPaletteSprite(frame, sprite, spriteWidth, spriteHeight, spriteX, spriteY, palette): This function renders a palette based sprite. The sprite is in the same format as before (a single dimensional array of values), but this time the values represent indices into the palette array. Palette is an array of colour values in the format {h:1.0,s:1.0,l:0.5}. It is assumed that the first entry in the palette array is the transparent colour, meaning that pixels with that colour will not be drawn. See the Palette Sprite example below for details on using this function.
this.subtract(frame,component,amount): This function subtracts the amount value from the given component (one of the strings 'h', 's' or 'l') for the given frame. This can be used to fade a frame a little, or even to rotate through hues or saturation.
this.fillFrameColor(frame, h, s, l): Fills the given frame with the specified colour
this.frameCounter: A property you can use to set the current frame, use in combination with redraw.

Available Libraries

We've included a couple of different libraries into the page for you to use, first off YUI3 is available. This has all sorts of stuff in it, but is mostly for DOM manipulation and so on so probably won't be too useful for you.

More usefully however we've added the Sylvester JavaScript library, this has loads of really useful stuff for doing math with Vectors and Matrices. Just the sort of thing you need to do 3d effects.

Animating Sprites

We've added a system so you can use the editor to generate sprites which you can then reuse in code. This is a really powerful feature and should we hope lead to a lot more keyframe based animations.

To use this feature, simply draw your keyframe sprites as you would any other animation. All sprites generated with this method are assumed to be 16 x 16 pixels in size. Any pixel set to a colour value of {h:0,s:0,l:0} is assumed to be transparent and will not be drawn (this is the default colour of all pixels in new frames).

After your sprite is complete, you can convert it to a JavaScript array that you can use in your coding by putting the following code in the code area:

this.convertToSprites();

Hit 'Generate Frames' and the code will output the sprites as arrays and the colours used in your sprites as a palette array in the code area.

You can now paint these arrays in the display using the 'paintPaletteSprite' function, passing into it the sprite and palette variables the code generated for you.

Example Code

Sprite

This code, renders a heart shaped sprite in red to a single frame.

var heart = [
  0, 1, 1, 0, 1, 1, 0,
  1, 1, 1, 1, 1, 1, 1,
  1, 1, 1, 1, 1, 1, 1,
  0, 1, 1, 1, 1, 1, 0,
  0, 0, 1, 1, 1, 0, 0,
  0, 0, 0, 1, 0, 0, 0
];
var frame = this.createFrame();
// paint the sprite at position 3,3 in full red
this.paintSprite(frame, heart, 6, 7, 3, 3, 0, 1.0, 0.5);

Many Hearts

This code example copies the previous frame, fades it, then renders randomly renders a new sprite heart to the frame. After 90 frames it fades to black.

var heart = [
  0, 1, 1, 0, 1, 1, 0,
  1, 1, 1, 1, 1, 1, 1,
  1, 1, 1, 1, 1, 1, 1,
  0, 1, 1, 1, 1, 1, 0,
  0, 0, 1, 1, 1, 0, 0,
  0, 0, 0, 1, 0, 0, 0
];
this.clearFrames();
for (var f = 0; f < 90; f++) {
	var frame = null;
	if (this.frames.length > 0) {
		frame = this.copyFrame(this.frames.length-1);
		this.subtract(frame,'l',0.05);
	} else {
		frame = this.createFrame();
	}
	if (Math.random() > 0.7) {
		var x = Math.round(Math.random()*18-3);
		var y = Math.round(Math.random()*18-3);
		this.paintSprite(frame, heart, 7,6, x,y, 0, 1.0, 0.5);
	}
	this.addFrame(frame);
}
this.fadeToBlack(30);

Palette Sprite

This example produces the same result as the Many Hearts example but demonstrates the use of palette based sprites.

var palette = [{h:0,s:0,l:0},{h:0,s:1.0,l:0.5}];
var sprite = [
  0, 1, 1, 0, 1, 1, 0,
  1, 1, 1, 1, 1, 1, 1,
  1, 1, 1, 1, 1, 1, 1,
  0, 1, 1, 1, 1, 1, 0,
  0, 0, 1, 1, 1, 0, 0,
  0, 0, 0, 1, 0, 0, 0
];
this.clearFrames();
for (var f = 0; f < 90; f++) {
	var frame = null;
	if (this.frames.length > 0) {
		frame = this.copyFrame(this.frames.length-1);
		this.subtract(frame,'l',0.05);
	} else {
		frame = this.createFrame();
	}
	if (Math.random() > 0.7) {
		var x = Math.round(Math.random()*18-3);
		var y = Math.round(Math.random()*18-3);
		this.paintPaletteSprite(frame, sprite, 7,6, x,y, palette);
	}
	this.addFrame(frame);
}
this.fadeToBlack(30);

Advanced Example

This code snippet shows how to use the frameGenerator to asynchronously generate your frames, allowing you to do very cpu intensive tasks without hanging your browser.

// setup local variables
var myHue = 0;
this.clearFrames();

this.frameGenerator.generateFrame = function() {
	var frame = this.createFrame();
	
	// your frame generating code here as normal
	this.fillFrameColor(frame, myHue, 1.0, 0.5);
	
	this.addFrame(frame);
};
// generate 100 frames
this.frameGenerator.start(100,this);