04.04.2013 Views

Processing: Creative Coding and Computational Art

Processing: Creative Coding and Computational Art

Processing: Creative Coding and Computational Art

SHOW MORE
SHOW LESS

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

Rather than deal with another flat, undulating surface, I used some trig functions to calculate<br />

the planet surface as an arc. The two expressions that create the arc<br />

px[i] = width-50 + cos(radians(ang))*(width*1.3+peakHeights[i]);<br />

py[i] = height*1.75 + sin(radians(ang))*(height+peakHeights[i]);<br />

are pretty ugly <strong>and</strong> (dare I say) use magic numbers. I spent way too much time on this<br />

chapter, so I kind of took the easy way out (sorry). Feel free to mess with these values to<br />

change the planet’s shape, or better yet, try to improve the expressions by losing the<br />

magic numbers.<br />

In the draw() function, after drawing the fading background <strong>and</strong> stars, I created the Earth<br />

(yeah, I’m pretty powerful). Notice after the beginShape() function call, the following line:<br />

texture(p);<br />

This call, in a sense, turns on texture mode, allowing images to be mapped to geometry in<br />

<strong>Processing</strong>, using beginShape(), endShape(), <strong>and</strong> vertex() calls. The texture() call needs<br />

to be called between beginShape() <strong>and</strong> endShape(), <strong>and</strong> before any vertex() calls. The<br />

argument p should be the image you want to map to the geometry. This image should be<br />

loaded earlier in your sketch (after it has been added to the sketch’s data directory), as I<br />

did in the setup() function.<br />

Image mapping in <strong>Processing</strong> follows a common approach, used in other 3D environments,<br />

utilizing uv coordinates. u <strong>and</strong> v represent the coordinate space in which to put an<br />

image. Unlike x, y, <strong>and</strong> z, which each map to a specific axis, u <strong>and</strong> v represent a more symbolic<br />

type of space that relates to the object’s vertices. For example, I can specify a point<br />

in xyz space that also has uv components. This structure allows 3D geometry to be plotted<br />

along the x-, y-, <strong>and</strong> z-axes, while also enabling an image to be attached to the geometry,<br />

with some flexibility; the image can be mapped different ways to the actual vertex geometry<br />

it’s connected to. Once an image is mapped to the geometry using uv coordinates, it<br />

can be deformed along with the geometry, allowing for very realistic morphing effects. For<br />

now, I’ll be focusing on simply mapping the image onto the 2D ground geometry. Later, in<br />

the 3D chapters, we’ll map an image to a 3D object.<br />

After the texture(p) call is made, the vertex calls now require two extra arguments, specifying<br />

how the image should be mapped to the vertices created between beginShape()<br />

<strong>and</strong> endShape(). By default, the mapping is based on the image’s actual size. However,<br />

<strong>Processing</strong> comes with a function called textureMode(), allowing you to change the mapping<br />

from IMAGE mode (the default) to NORMALIZED mode. NORMALIZED mode allows<br />

you to specify argument values between 0 <strong>and</strong> 1.0, instead of the actual image sizes. To learn<br />

more about this option, please refer to the <strong>Processing</strong> reference at http://processing.<br />

org/reference/textureMode_.html.<br />

The default image mapping is relatively simple to use on rectilinear geometry. For example,<br />

to map a 200 by 200 pixel image onto the same sized geometry, you would do the<br />

following (please note: the following code won’t run as written—you need to specify P3D<br />

in size(), add <strong>and</strong> then load an image, <strong>and</strong> finally replace PimageObjectNameGoesHere<br />

with the actual name of your PImage):<br />

MOTION<br />

549<br />

11

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!