Here’s the first release of the new version incorporating the original linear and new rotary version, for Mac and PC. Go to the download page. There may be bugs in this, so let me know.

Word Clock is now in 18 languages thanks to the generous help of lots of kind people. Go to the download page.

There’s also a new flickr group. If you’re using Word Clock I’d love to see a photo of it running on your screen.

MakeJpeg download page

Go to the new page to download. Please let me know by email if you have any problems.

I’ve been learning electronics from various books and all over the web. One of the best resources I’ve found is Bowden’s Hobby Circuits which includes some lovely clock examples and circuits. This circuit is partially based on the 72-LED clock, but I’m using a very accurate crystal oscillator for the seconds pulse and a different approach to the startup sequence.

Next stage is to build up the seconds, hours and minutes LEDs and add time setting functions.

A small tutorial on how to create bouncing balls with ActionScript source code. A couple of years back I was creating some interactive sites using bouncing balls as navigation. These needed to behave in a believable manner so I spent some time looking at rigid body dynamics code.

Rigid Body Dynamics

There are many approaches to solids-based simulation on a computer. The most realistic involve running a simulation in relatively large slices of time (say 1/60 second) until a collision occurs, and then ‘rewinding’ the simulation in smaller slices of time until the exact moment of impact. This ensures that no objects are ever seen to overlap, and the simulation then continues from the exact moment at which they touch. This is computationally intensive and a little overkill for what I wanted.

The second method is a little more ‘relaxed’ and doesn’t strive for perfection. You can get a reasonable result using springs to resolve collisions.

Elastic Collision

I already had some spring code so I hooked up a system as follows;

Figure 1 is a system with balls bouncing around under gravity. The system checks whether two balls overlap. Figure 2 shows what happens when two balls overlap. All we have to do is measure the overlap. We temporarily create a spring which is attached to the centre of each ball between a and b.

The spring’s resting length is then set such that, when fully relaxed, it would allow the balls to touch exactly. This means that the spring is under compression; it tries its best to get back to its resting length and in doing so forces the balls apart as shown in Figure 3.

Nervous Energy

This worked really well for what I needed as the balls bounce around nicely and it’s a lot of fun. However the lack of precision shows when you try and contain the balls too tightly. The system becomes a little unstable as the balls try to break free from each other but are constrained by the walls.

However the same code is used the in Magnetic example which is able to resolve itself as there is plenty of space for the balls to move into.

Download

[ZIP] Download Elastic Collision source code

Example

Click and drag to move the balls around

Word Clock has moved. Go to the new page where you can download and read more.

This AppleScript batch processes folders of images (can also contain nested folders) and creates a report of image dimensions, resolution and colour, including what size each image would be at 300dpi. Here’s some example output:

You can see that it also highlights where images are lower than 300dpi.

Originally written for jaypeg as a useful tool to help ascertain problems (e.g. images in the wrong colour space, or too low resolution) and also help determine which images might be suitable for printing at larger sizes.

[ZIP] Download Sizer droplet for Mac OS X (includes source code)

A simple PostScript program

Copy and paste this into a text editor (NotePad or TextEdit), save it as 'simple.ps' and then open it in Illustrator.

%!PS-Adobe-3.0 

0 0 moveto
100 100 lineto
stroke

showpage

This little snippet gives the following result:

A line from 0,0 to 100,100. Amazing, eh? Not really, but the point is that the code is really simple to understand and we're only using the line drawing command. If you go slow and learn one command at a time, you can eventually do some pretty interesting and useful things.

Learning PostScript

There are lots of PostScript tutorials on the web that will explain the basic concepts. One thing to note is that PostScript is stack based which means you push numbers onto the stack before operating on them. In raw code it makes it look like you're doing things backwards and can seem off-putting. In practise it's very simple and logical.

The essential guide to PostScript is the PLRM or 'red book'. I bought a copy of this years ago and it's pretty big at 800 pages! But thanks to the generosity of Adobe you can now download it online;

[PDF] PostScript Language Reference Manual, third edition

A lot, for a little

Once you've learned a few commands you'll be able to achieve a lot with very little. Here's something more advanced using a for-loop in conjunction with graphics transformation;

%!PS-Adobe-3.0 

0.75 setlinewidth
0.75 setgray

0 3 360 {
	newpath
	gsave
	0 0 moveto
	rotate
	100 0 rlineto
	stroke
	grestore
} for

showpage

Produces the following result:

Which is starting to look a bit more interesting, and like something that might be tricky to create purely 'by hand' in Illustrator. I've used techniques based on this to create images for quite a few projects over the years. The Design Week book cover was created using PostScript as were the Kingston University posters.

I've put the source for these into a small download. You'll need Illustrator or some other PostScript viewer to see them.

[ZIP] Download PostScript examples

Output from Flash into PostScript

Probably the best use of PostScript from a modern designer/programmer's perspective is as an intermediary format. With not much programming you can easily take output from Flash and get it into Illustrator.

For the Generation Press website I created a simple toy on the homepage which lets visitors generate their own pattern. It's a nice example of something created in Flash which would look great as a high-resolution printout.

Demo Application

Here's the toy wrapped into a demo application.

[ZIP] Download Source Code

To use, click to start drawing. Once the drawing has finished, click 'Show PostScript' to see the code. This code doesn't update live because Flash isn't fast enough, so wait until the drawing has finished before viewing it. All the application does is output the same drawing commands as PostScript-style commands into the text window;

The ps() function outputs the code to the text window;

Now you can copy and paste this code into a text editor. Save it with a '.ps' extension and then load into Illustrator:

The image on the right is magnified to show that the drawing is made up of a series of small lines created by the lineto command in the PostScript code.

Conclusion

So that demonstrates the basic principle. PostScript is a very powerful language and you can do all kinds of other fun things with it, particularly when you start to redefine the built in lineto and curveto commands to do something else... but that's a story for another day.

• [PDF] PostScript Language Reference Manual, third edition
• [ZIP] Download PostScript examples
• [ZIP] Download Source Code
• PostScript Wikipedia entry featuring some great resources and some fairly insane applications including an HTML renderer and ray tracer...