Processing: Creative Coding and Computational Art

PROCESSING: CREATIVE CODING AND COMPUTATIONAL ART
110
Figure 4-1. In Processing, the x-axis increases from left to right and
the y-axis increases from top to bottom. The origin is in the top-left
corner, at (0, 0).
If you draw a 40 pixel by 40 pixel rectangle on the monitor at (100, 100), it will be 100 pixels
to the right of the left edge of the monitor and 100 pixels down from the top edge of
the monitor. Since you can only plot a point to a specific pixel location on the screen, you
also need to consider which point on the rectangle gets placed at (100, 100). This point is
sometimes referred to as the registration point. In most instances, the registration point is
either the top-left corner of the image or the center of the image. In Processing, there is a
function named rectMode() that allows you to specify from what point a rectangle is
drawn by passing different arguments to the function. For example, rectMode(CENTER)
orients the rectangle at its center point, while rectMode(CORNER) uses the rectangle’s topleft
corner; there is also a third argument, rectMode(CORNERS), which draws the rectangle
by specifying two points: the top-left and bottom-right corners of the rectangle. In Figure
4-2, the rectangle on the left is drawn from its top-left corner at (100, 100), and the one
to the right is drawn from its center point.
Figure 4-2. The square on the left uses its top-left corner for registration, while the one on
the right uses its center point. You can explicitly set the registration point using Processing’s
rectMode(MODE) command.