Programming Digital Media

Procedural shapes

Procedural shapes

What is a "circle"?

The kind of thing that balloons and beachballs look like.

The purest expression of "roundness".

The set of all points P such that the distance from P to the single point C is the same for all P.

Description as recipe

An idealized description of how to make a thing

The description made into an "actual" instance of the thing through the execution of a process

A hierarchy of user expression

Pixel - a mosaic of colored tiles

     "Set [100,200] to red."

Image - layers of primary colors (RGB)

     "Increase the picture's contrast."

Shape - graphical operations

     "Draw a yellow square."

Object - a simulated photograph

     "Render a frog in a spotlight."

The Quartz/Python interface

I wrote the Image class we used last week.

Apple wrote a Python interface for Quartz 2D.

Quartz is abstracted from the actual pixels.

     In fact, I couldn't easily figure out how to get my hands on them...

Fundamental Quartz ideas

Drawing is abstracted from the output medium.

     Image files (TIFF, JPEG, GIF, PNG)
     PDF documents

Drawing is made through call methods of a "context".

     There are different contexts for different output media.

The "PostScript imaging model"

     PostScript is a "page description language".
     Current state controls attributes like color.
     Paths are defined, and only "drawn" upon completion.
     The PDF format is compressed PostScript without some of the language features.

A PostScript example

Open a new text file and enter this: 

%! 
100 100 moveto 
200 300 lineto 
stroke 
showpage

Then save the file as "test.ps" and use the open command in a shell with "test.ps" as the argument.

A PostScript example

Modify your PostScript file to look like this: 

%! 
20 setlinewidth 
.3 .5 .7 setrgbcolor 
100 100 moveto 
200 300 lineto 
stroke 
showpage

Then save the file again and call open again.

A PostScript example

Modify your PostScript file to look like this: 

%! 
20 setlinewidth 
.3 .5 .7 setrgbcolor 
100 100 moveto 
200 300 lineto 
stroke 
.8 .6 .4 setrgbcolor 
200 400 200 100 rectfill 
showpage

Then save the file again and call open again.

A PostScript example

Modify your PostScript file to look like this: 

%! 
20 setlinewidth 
.3 .5 .7 setrgbcolor 
100 100 moveto 
200 300 lineto 
stroke 
.8 .6 .4 setrgbcolor 
200 400 200 100 rectfill 
.2 .5 .1 setrgbcolor 
/Palatino-Roman findfont 50 scalefont setfont 
300 600 moveto 
(PostScript) show 
showpage

Then save the file again and call open again.

A Python script to draw a circle with Quartz 

from CoreGraphics import * 
from math import pi 
 
c = CGBitmapContextCreateWithColor( 
    300, 300,  # width, height 
    CGColorSpaceCreateDeviceRGB(), 
    (1, 1, 0, 1))  # yellow with opaque background 
 
c.setRGBFillColor(1, 0, 0, 1)  # opaque red 
c.addArc(150, 150, 100, 0, 2 * pi, 1) 
c.fillPath() 
c.writeToFile("circle.tif", kCGImageFormatTIFF)

The output is a TIFF image file.

A Python script to draw a circle with Quartz 

from CoreGraphics import * 
from math import pi 
 
# Letter (8.5x11) "portrait" size for PDF (72dpi): 
page_bounding_box = CGRectMake(0, 0, 612, 792)  
c = CGPDFContextCreateWithFilename( 
        "circle.pdf", page_bounding_box) 
 
c.beginPage(page_bounding_box) 
c.setRGBFillColor(1, 0, 0, 1)  # opaque red 
c.addArc(306, 396, 160, 0, 2 * pi, 1) 
c.fillPath() 
c.endPage() 
c.finish()

The output is a PDF document.

Writing scripts using the Quartz/Python interface

A wrapper of Quartz, so the descriptions of Quartz concepts in the Apple documentation are useful.

The Python interface is documented in a webpage in the Resources column of the class webpage.