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

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

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!