CREDITS

Jim Andrews: concept, programming, design
Jan Odvárko: color-picker

THANKS

Thanks to Regina Célia Pinto, David Jhave Johnston, Ted Warnell, Maarten van Emden, Christine Wilks of JSArt, and the British and Irish Poets List--especially David Bircumshaw--for feedback during dev.

ABOUT

Aleph Null is my first piece with the new HTML 5 canvas tag which requires no plugins and works in all modern browsers, including mobile phones. It's exciting to have such a canvas to work/play with in a public technology that is not at the mercy of a corporation's business plan or its continued existence. Such must be the future for net art; it isn't feasible to rely on corporations to support tools indefinitely, whereas technologies developed in the public sphere stand more of a chance of at least achieving their logical growth and form from their potential.

COLOR MUSIC INSTRUMENT/PLAYER

Aleph Null is color music. Colors are tones. Notes are tones. Music is tones moving in time. This is color tones moving in time. It takes practice to tease the really good stuff out of Aleph Null. It's like an instrument that way. Or a game in which the goal is to experience color music and create visuals you like. Unlike most instruments, Aleph Null will play something whether a person is playing or not. But it benefits immensely by a human player.

SLIDVID OF ALEPH NULL STILLS

Here is a slidvid of Aleph Null stills. Most of the images are 1920x1080 but the Slidvid software will size the images to fit your browser. Slidvid is a JavaScript slideshow piece of software I wrote initially to display the images I made with dbCinema, a graphic synthesizer and langu(im)age processor I wrote in Adobe Director.

HISTORY

Many artists have created works that construct some sort of visual music in which there is no audio. My friend Ted Warnell showed me an interesting book from 1976 yesterday called Artist and Computer, edited by Ruth Leavitt, which has a couple of essays in it by artists doing just that with computer art.

In particular, Ben F. Laposky's work struck me as having relation with Aleph Null. One of his "Oscillons" resembles some Aleph Null graphics. Because Aleph Null also is involved in oscillations of various sorts. The path many of the shapes follow is a non-Euclidy multiplication of exotically phased cosine waves. Opacity also oscillates between maximum and minimum values unique to each color-stop situated along a gradient line or curve. Color also oscillates within the 'color range' value. And the length of the line or curve oscillates between a max and min. And so on. There are many dynamically changing variables in Aleph Null that oscillate within bounds. These oscillations create a complex and curvy visual rhythm of waves of motion, shape, and color.

HELP

• ERASE: The 'e' key erases the canvas and changes the path the shape follows.
• STOP/PLAY: The space key toggles stop/play.
• CENTRAL COLOR: The 'c' key or clicking the canvas shifts the 'central color' by 1/4 of the spectrum.
• MOUSE-CONTROLLED POSITION: The 'm' key toggles mouse-controlled position of the shape.
• SHAPE: The 's' key changes the shape but keeps the same central color. Double-clicking the canvas changes the shape and also the central color.
• FULLSCREEN: For better viewing, go fullscreen. On a PC, the F11 key toggles fullscreen mode. Some Mac browsers have a View>Fullscreen menu option.
• Aleph Null LOGO/CONTROLS: The '1' key or clicking the Aleph Null logo at top left toggles display of the controls. The rest of these texts describe the controls.
• CENTRAL COLOR: The '2' key or clicking the input box labelled 'central color' opens a color-picker for the central color. Use the mouse to select a central color.
• HEX: You can type a hex value for a color into the box and then press Return. Hexadecimal color values have six characters from 1,2,3,4,5,6,7,8,9,0,a,b,c,d,e,f (base 16).
• HEX: 'facade', 'dadada', '1a1a1a', 'beefed' and 'cabbed' are all hex colors.
• COLOR RANGE: The '3' key or clicking the handle of the 'color range' slider selects it. When selected, the handle is blue. Use the right and left arrow keys or the mouse to change the value.
• COLOR RANGE: The right and left arrow keys provide easier and more granular use of the sliders.
• COLOR RANGE: The 'color range' slider adjusts the number of colors Aleph Null uses. The lower the value, the fewer the number of colors used.
• COLOR RANGE: Colors on the canvas are random distances from the 'central color'. Distances that don't exceed the 'color range'.
• COLOR RANGE: The smaller the value of the 'color range' slider, the closer all the colors are to the 'central color'. Each shape has its own 'color range' setting.
• SHAPE: The '4' key or clicking the 'shape' slider handle selects it. The left and right arrow keys change the shape. You can also double-click the canvas or press the 's' key.
• OPACITY: The 'opacity' slider adjusts transparency of the shape. Very low values can look good at night with the lights off. Each shape has its own opacity setting.
• FPS: The fps (frames per second) slider adjusts the speed of the shape. Each shape has its own fps value. The 'real' value is yes the real value, although the slider will go from 1 to 150.
• SIZE: The 'size' slider adjusts the maximum size of shapes. Each shape has its own size setting.
• SHRINK SPEED: When a shape's 'shrink speed' is x, the shape shrinks each frame by x pixels. Each shape has its own 'shrink speed'.
• LINE WIDTH: Some shapes have a line around them and the shapes are filled with color. Other shapes are just lines that are stroked with color. In either case, you can set the line width.
• LINE COLOR: The line color of some shapes is adjustable. But not the shapes that are lines that have color gradients. To adjust the color of those lines, change the 'central color'.
• BGCOLOR: Each shape has its own background color setting.
• STOP BUTTON: Toggles stop/play. The space key does the same thing.
• ERASE BUTTON: Erases the screen and changes the path the shape follows. The 'e' key does the same thing.
• ABOUT BUTTON: Opens/closes a window containing info about Aleph Null and also Help. The 'a' key does the same thing.
• TIPS BUTTON: Opens/closes this window. The 't' key does the same thing.
• INHERIT CHECKBOX: When checked, when you use the 's' key or the 'shape' slider to change shape, the new shape inherits the 'central color' of the old shape. The 'i' key checks/unchecks this box.
• MOUSE CHECKBOX: When unchecked, the position of the shape is controlled by Aleph Null. When checked, your mouse controls the position of the shape. The 'm' key checks/unchecks this box.
• TAB KEY: The Tab key cycles among the controls if you press it repeatedly.

THE TITLE

'Aleph null' is the first and most homely order of infinity. The title refers to the work of Georg Cantor, the Kandinsky of mathematics, who managed to prove some things worth knowing about the infinite and designated the first level of the infinite 'aleph null'.

PERFORMANCE ISSUES

On the PC, Firefox provides the highest framerate. Chrome is second. But Chrome is more stable. Early on in development, I had Aleph Null running at upwards of 225 frames per second in Firefox. But it crashed my three-year-old computer after several minutes. So I limited the maximum frames per second to 150. Other browsers on the PC run much slower at 30-60 frames per second. My Android phone runs Aleph Null at 16 frames per second. It isn't clear to me whether the PC browsers other than Firefox run so much slower because they are just lazy dogs or because the browser-makers have programmed in regulators that make it impossible to exceed their relatively low framerate thresholds, thus preventing many a blue screen. Is it a security issue? What isn't, these days?

A friend reports that Aleph Null performs quite well on the Mac. With her Mac Pro, she was getting framerates of about 100 in Chrome and Safari, and 120+ in Firefox 5 (Beta).

I like running Aleph Null at around 30 frames per second, myself. Coincidentally (or possibly not), that is the speed of video. Framerate changes the feel of the piece, of course. And it seems our perceptual apparatus can comfortably deal with 30-60 frames per second. That is apparently roughly the rhythm of our perception, the number of times we perceive per second.

THE DEVELOPMENT PROCESS OF ALEPH NULL

Creating Aleph Null has been part of a re-tooling process for me. From 1997 to 1999, I created work in DHTML. So I knew JavaScript a bit. But it was a very different beast at that point. The beast is now smarter and better behaved. From 1999 until last year, I used Macromedia Director (now Adobe Director) to create works such as Nio, Arteroids, On Lionel Kearns, A Pen, Jig-Sound, and dbCinema. But HTML 5 seems to be the way of the future. And it looks interesting. So I thought I'd try to learn JavaScript properly.

Toward that end, I read several books such as Douglas Crockford's JavaScript: The Good Parts and Stoyan Stefanov's Object-Oriented JavaScript. And got David Flanagan's excellent reference book called JavaScript: The Definitive Guide. And proceeded to puzzle through those for several months. Maarten van Emden was very helpful and encouraging with my learning of the finer points of JavaScript and some of the larger contexts in which the language is situated, such as its relation to logic programming. Along the way, to put the ideas to practice, I developed a little suite of scripts for windowing in JavaScript. And scripts for creating spin controls, buttons, color pickers, check boxes, and a few other interactive controls. Sometimes using code developed by others, such as in the case of the spin controls and color-pickers.

But Lewis Lacook, an artist-programmer friend of mine, convinced me that I should have a look at jQuery for the windowing and for UI gadgets/widgets like sliders, spin controls, and so on. So I got two more books: Learning jQuery by Jonathan Chaffer and Karl Swedberg, and jQuery UI 1.6 by Dan Wellman. And proceeded to pore over those for a little while.

Additionally, there's the matter of learning how to work with the new HTML 5 canvas tag. There is good documentation online about that, which I've consulted frequently, and David Flanagan wrote Canvas Pocket Reference, which is very useful.

jQuery has proved to be very useful indeed. Particularly in gracefully handling so many menial programming tasks that cross-browser incompatibility issues needlessly complicate to the point of frustation. And jQuery UI is interesting--the sliders in Aleph Null are jQuery UI sliders--but it has some problems that make me think my work on those windowing scripts might be useful after all. For instance, when I tried to use jQuery UI to implement the window you are reading from now, it displayed a bad bug. When one pressed the space key, the whole browser window scrolled up half a page, removing half the canvas from sight. I tried to fix it but couldn't. It was only fixed by removing the jQuery UI dialog window altogether. So I built my own.

Aleph Null is not very sophisticated in the range of canvas commands it marshalls. I've barely scratched the surface of the canvas's possibilities. For me, the larger work of this project has been putting a lot of (for me) new things together.