Processing: Creative Coding and Computational Art

Some of the reasons coding graphics gets a reputation for being difficult is the math
involved in dealing with 3D space and the low-level algorithms needed to manipulate millions
of pixels in real time. 3D math is somewhat complicated, especially if you don’t have
a basic grounding in linear algebra and trigonometry, neither of which are really that complicated,
but are usually purged from most artist’s brains by the time they leave high
school (if it ever got in there in the first place). Because computer monitors are 2D surfaces,
there is a need in 3D to always convert 3D geometry back to a 2D projection, so we
can see it on the screen.
Computationally, graphics requires a fair amount of low-level processing and lots of memory
storage. For example, on a monitor with 1920 ✕ 1200 resolution, over 2,300,000 pixels
are redrawn about 70 times per second. Each pixel is made up of three color components
(RGB), giving each of the 2 million–plus pixels a range of 16.7 million different colors.
Once you add the actual calculations needed to generate 2D or 3D geometry, virtual light
sources, textures, special effects, animation, virtual cameras, and event processing (user
interaction)—well, you develop a lot of respect for engineers! As computers have gotten
faster and memory has gotten cheaper, graphics programming has benefited greatly and
things have gotten a little simpler, but less is definitely not more when it comes to graphics,
and in spite of the technological advances, users continuously demand more from
their games, films, software, and personal devices. In this chapter, I am only going to deal
with 2D graphics and some basic math. In spite of all the complexity I just mentioned,
Processing makes it pretty easy to get started with graphics (and of course I’ll continue to
take things slowly). Although this chapter only deals with 2D, everything I cover is applicable
to 3D, which I’ll cover near the end of the book.
Coordinate systems
COMPUTER GRAPHICS, THE FUN, EASY WAY
A coordinate system is simply a numbered grid that allows you to locate a point in space.
Two French mathematicians, René Descartes (1596–1650) and Pierre de Fermat (1601–1665)
get credited with developing the Cartesian coordinate system; although Descartes gets
most, if not all, of the credit. The Cartesian coordinate system is really just an extension of
a number line. The number line has a 0 position; values to the right of 0 are positive and
values to the left of 0 are negative—pretty basic stuff. In the coordinate system most of us
remember from math class, there is a horizontal axis, usually referred to as x and a vertical
axis, referred to as y. The vertical axis has its own number line, and where these two perpendicular
number lines intersect (0, 0) is the origin. In the coordinate system we use in
math, above the y-origin is positive and below the y-origin is negative. In computer graphics,
this is often flipped, as it is in Processing—above the y-origin is negative and below the
y-origin is positive. Figure 4-1 illustrates the coordinate system in Processing, in relation to
the monitor. You’ll notice that the origin is at the top-left corner of the coordinate system.
109
4