PostScript

5 June 2007
13 Comments →

gp_spiral

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:

ps-line.gif

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:

picture-4.gif

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.

generationpress.jpg

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;

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

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

ps-code-example.jpg

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

ps-mockup.jpg

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.


Comments

13 comments so far
Leave a comment →

That rocks! I am going to give it a go.

MsBrittle
5 June 2007

1


lovely. is there a way to pre input the values so that the resulting flash animation runs without user imput?

bruno
20 July 2007

2


Hi bruno – yes there is, that’s how the original works on the Generation Press website. You just need your own variation on the following (excuse the short var names!):

//insert at end of begin() function

// circle radii - edit these
_r1 = 42;
_r2 = 50;
_rp = 58;

// set up the system
xc = _r1 + _r2;
yc = 0;
xp = xc + _rp;
yp = 0;		
this["circle1"]._visible = false;
_status = DRAWING;				
initDraw();
Simon Heys
20 July 2007

3


wonderful, thank you.

bruno
20 July 2007

4


Hi Simon
I’ve tried to copy the postscript code into TextEdit, as you suggest, but it won’t let me save with a .ps suffix.

Any tips as to what I’m doing wrong?

Thanks
Adam

Adam Follett
1 May 2008

5


Adam – no idea what’s wrong there. Does it help if you enable ‘show all file extensions’ in the Finder preferences? Can you try just saving the file and then rename it in the Finder?

Simon Heys
1 May 2008

6


Hi Simon,
Awesome! Thanks for making this available. I was able to copy the postscript text from Simon’s web page into an application called Editra that I downloaded from VersionTracker for Mac OS, (it’s free) then save that as .ps document. Those opened fine in Illustrator CS3 if the object was fairly simple. If the rendering on the web site was complex I kept getting an error message in Illustrator saying couldn’t open for an unknown reason when I tried to open the .ps file. Any suggestions for getting a more complex object to open?

Rick Weiss
5 May 2008

7


Hi Rick

Hmm – haven’t really pushed the limits like you have! If you can mail me a file that won’t open in Illustrator, I’ll have a play around. There are other programs that will open .ps files by the way – Apple Preview on the Mac for one, but also GhostView/GSView might be worth a try; http://pages.cs.wisc.edu/~ghost/

Simon Heys
5 May 2008

8


If you want to put code in to Textedit on Mac OS X you need to make sure it is set to plain text note RTF.

You can set the default in preferences I think although I’m on a PC so can’t check right now.

Andy
9 May 2008

9


Hey, Simon, I got the same problem here. I guess you’re using MacOS X as like as I do. I solved using Komodo Edit, a freeware text editor, that is able to save as Postscript file, highlighting syntax and showing values in various colors.
Hope this may help you.

Marco
30 July 2008

10


[…] like it could be a good route to go for creating the drawing app. A designer from the UK called Simon Heys has built a neat and simple app in flash similar to what I would like to create, which is situated […]

Spirogarden Wireframe |
Pingback
31 August 2008

11


[…] geschrieben hat, wird Postscript allgemein unterbewertet. Deshalb demonstiert er in einem kleinen FLashfile, wie einfach es ist mit der Scriptsprache (verwendet z.B. in im Adobe-Format PDF) schicke Grafiken […]

QOMAG » Postscript Demo
Pingback
6 September 2008

12


Great stuff!!! I have worked with Postscript since 1990 or so but never really knew how to look at the stuff under the hood. This helps a lot!!

many thanks, sue h

sue hawkins
29 May 2012

13


Leave a comment

(required)
(will not be published) (required)