Text Nib Options

Text1

OK

---

Text2

OK

Credits

Jim Andrews: concept, programming, design.
Natalie Funk: design consultation, support, love and encouragement.

Color Music Instrument/Player

Aleph Null is an instrument of color music. No audio. You play it/play with it. Colors are tones. Notes are tones. Music is tones moving in time. This is color tones and shapes moving in time. It takes practice to tease the 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, like both a game and an instrument, you play it. It isn't as hard to play well as most musical instruments. You just watch it and change the settings of the controls and see how that changes the look of it.

Slideshow of Aleph Null Stills

Here is a slideshow of screenshots of Aleph Null. Most of the images are 1920x1080. I made these screenshots to show Aleph Null at its best and to show the stylistic range it is capable of—when I play it; others may be able to create types of things it doesn't occur to me to create.

What's New in 2.0

Aleph Null 2.0 was created in 2015-2016 in Burnaby, BC, Canada when Natalie was working on her doctoral thesis and I was creating this piece, Globebop, and was writing How to Pleasurably Stop Smoking. Aleph Null 2.0 upgrades version 1.0 with these new features:

• Create multiple brushes (with the 'create' button).
• Better looking art.
• Several new brush nibs.
• Looks and works much better on touch devices.
• Sizes well to any screen size.
• Save screenshots with 'save' button.

Help

• You can play Aleph Null with the the mouse, the keyboard (if you have one), or your finger (if your screen is touch-enabled). The below Help tips are arranged in the same vertical order as the vertical order of the controls.
• Click 'aleph null' or 'X' key to toggle display of controls.
• LOGO: The 'L' key toggles display of the Aleph Null logo and the VIsPO logo.
• The Nib menu.
• NIB MENU: A nib is a shape that lays down a brushstroke each frame of the animation. To select the first nib, either press 'Shift+1' if you have a keyboard, or click/press the first colored icon toward the top of the screen—like the ones shown above. To select the third nib, click the third icon at top or press 'Shift+3' (and so on). To select the eleventh nib, press Shift+Q (and so on), ie, use the second row of keys to select nibs numbered higher than 10. The Nib menu scro lls horizontally.
• CENTRAL COLOR: The central color is at the center of a sphere of colors. It is like the sun. The other colors are all within 'color range' of the central color. They are like planets. And the 'color range' is the maximum radius of the solar/color system. The '1' key or clicking the input box labelled 'central color' toggles a color-picker for the central color. Use the mouse to select a central color. The 'C' key or clicking the canvas shifts the 'central color' by 1/4 of the spectrum.
• BACKGROUND COLOR: The '2' key or clicking the input box labelled 'BG color' toggles a color-picker for the background color. Use the mouse to select a background color.
• STOP: The 'S' key or the space key pause/unpause play.
• ERASE: The 'E' key erases the canvas and changes the path the shape follows.
• PATH: The 'P' key changes the path the shape traverses.
• ABOUT: The 'A' key toggles this window open/closed.
• 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 (they provide more granular control) or the mouse to change the value. The 'color range' slider adjusts the number of colors Aleph Null uses. The lower the value, the fewer the number of colors used. Colors on the canvas are random distances from the 'central color'. Distances that don't exceed the '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.
• 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. The '4' key or clicking the handle of the 'opacity' slider selects it. You can then drag the handle with the arrow keys, the mouse, or your finger.
• FADER: The '5' key or clicking the handle of the 'fader' slider selects it. The 'fader' slider adjusts whether or how quickly Aleph Null erases itself. A 0 value means no auto-erasing occurs. A value of x means that x times per second Aleph Null draws a screen-sized rectangle to the screen which is the same color as the current background color and is of very low opacity.
• FPS: The '6' key or clicking the handle of the 'fps' slider selects it. 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 '7' key or clicking the handle of the 'size' slider selects it. The 'size' slider adjusts the maximum size of shapes. Each shape has its own size setting.
• RHYTHM: The '8' key or clicking the handle of the 'rhythm' slider selects it. The nib descreases in size each frame by this many pixels. For most nibs, this slider controls the visual rhythm of the animation.
• LINE WIDTH: The '9' key or clicking the handle of the 'line width' slider selects it. Some nibs let you set the line width.
• ROTATION SPEED: The '0' key or clicking the handle of the 'rotation speed' slider selects it. Some nibs let you set the rotation speed.
• TIPS: Opens/closes the Tips window. The 'T' key does the same thing.
• MOUSE-CONTROLLED POSITION: The 'M' key toggles mouse-controlled position of the nib.
• 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.

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 proved some things worth knowing about the infinite and designated the first level of the infinite 'aleph null'.

The Development Process of Aleph Null 2.0

Creating Aleph Null 1.0 involved a big re-tooling for me in 2010-2011. I learned JavaScript much better than before, I learned how to draw with the HTML5 <canvas> tag, and I learned jQuery and jQuery UI. This was in response to the decline of Director, a tool I'd used since 1999.

While Aleph Null 1.0 worked well on desktop browsers, it wasn't very usable on mobile browsers. It ran at a good frame rate on mobile devices, but the interface was more or less unusable; you couldn't slide the sliders, though you could tap the slider rails to set a value. The controls, by default, were too small except for sober surgeons with very precise finger movements. The color picker didn't work very well either. It wasn't quite obsolete as soon as it was finished, but it was clear it had a ways to go to be ready for mobile.

I wanted to make it work on mobile because it's supposed to be an instrument/toy. Instruments that are playable with your hands are more fun/interesting than a mouse-driven control panel. I wanted to make it more fun and more like an instrument/toy. Also, I wanted to be able to sell copies of an app.

After 1.0 was released in 2011 I met Miles Thorogood in Vancouver who encouraged me to learn Phonegap, a tool for producing hybrid mobile apps written in JavaScript+HTML+CSS. The poets Fred Wah and Lionel Kearns also encouraged me to learn what mobile had to offer poets. I began to learn Phonegap and was soon teaching a course on it at Emily Carr U of Art and Design, a course that Miles also taught, but he taught it with Xcode using the programming language Objective C. You use Xcode to produce 'native' apps for iOS. You use Phonegap+JavaScript+HTML+CSS to produce 'cross-platform, hybrid apps' for Android, iOS and Windows Phone. 'Native' apps in Android are written in Java. Phonegap lets you develop apps for several types of mobile devices.

The Emily Carr art school started a program in mobile app and mobile web development; I learned 'responsive design'—web and mobile design that works and looks right regardless of the size of the screen and the capabilities of the computing environment—and taught courses in it and app development. I wasn't a very good teacher but I learned a lot. I created an iOS and Android app called Teleporter with Phonegap that also has a web version. And I created an interactive poem called Langrid that uses jQuery Mobile. jQuery Mobile is a 'framework' for mobile apps. I ended up not liking jQuery Mobile very much. Perhaps it will develop into something less prescriptive and buggy. Restrictive/prescriptive tools can be interesting; one of the central ideas of OULIPO is that constraints can be approached very creatively. But they can also force your hand over and over in very annoying ways, make you give your work a look and feel that you'd rather not. Aleph Null doesn't use jQuery Mobile, but it uses jQuery and jQuery UI; the sliders are from the jQuery UI library of widgets.

So I was ready to upgrade Aleph Null to mobile. I wasn't sure how I was going to get the jQuery UI sliders working properly on touch-enabled devices. Then touchpunch.furf.com came along and solved that problem completely in one easy step. But the interface needed redesigning so that the controls are large enough for human fingers to play with comfortably. That was interesting cuz it also changed the look of the piece. The visuals are more intriguing veiled behind the translucent gray-scale controls, I feel.

There wasn't a widely supported great-looking color picker for mobile, at this time. So I adapted the Farbtastic color picker to my purposes; that was part of the work of Langrid. The Farbtastic color-picker is especially good as a tool for selecting HSL (Hue, Saturation, Lightness) colors. Next time I use it, I'll explicitly model the color stuff around HSL rather than RGB. HSL is an interesting color model that gives you richer and more intuitive color options.

I restructured the code in Aleph Null 2.0. Version 1.0 had been one big file. I broke it into smaller units of code in 2.0 to make it more readable and manageable. Like breaking a story into chapters makes it more readable and understandable.

This section isn't finished yet. I'll have to finish it after the rest of the project is finished.