Most designers and programmers whose paths I’ve crossed have heard of PostScript but don’t know much about it. I think it’s a hidden gem. Not only is it a fascinating programming language which can be used to create generative drawings and save you hours of time through automation, but you can also use it as an intermediary format to transfer output from other languages such as Flash ActionScript or Java / Processing into Adobe Illustrator.

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;

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.

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.

<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" id=\"fm\\_application\\_117955304\" class=\"flashmovie\" width=\"440\" height=\"440\">
<object type=\"application/x-shockwave-flash\" data=\"uploads/2007/06/application.swf\" name=\"fm\\_application\\_117955304\" width=\"440\" height=\"440\">

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;

this["output"].lineTo(xp, yp); 
ps(xp+" "+yp+" lineto");

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.

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

I am an experienced Product Designer and Software Engineer with a passion for making and crafting digital products, tools and services that are useful, empowering or inspiring to others.