epubjs
Version:
Render ePub documents in the browser, across many devices
678 lines (373 loc) • 23 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="utf-8"/>
<title>Getting Started with Processing</title>
<script type="text/javascript">
if(!window.atlasplugins) window.atlasplugins = {}
atlasplugins.codeMirrorSettings = {
theme: "3024-day"
}
</script>
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css"> </link>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> </script>
<link rel="stylesheet" type="text/css" href="theme/html/html.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/4.4.0/codemirror.min.css"/>
<link rel="stylesheet" type="text/css" href="https://d2uogd9jz9k9zm.cloudfront.net/processingjs-0.0.3.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/4.4.0/codemirror.min.js" type="text/javascript"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/4.5.0/mode/clike/clike.min.js" type="text/javascript"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js" type="text/javascript"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.8/processing.min.js" type="text/javascript"> </script>
<script src="https://d2uogd9jz9k9zm.cloudfront.net/processingjs-0.0.3.min.js" type="text/javascript"> </script>
<script type="text/javascript">
$(function() {
// Make all non runnable examples readonly codemirrors
$('pre:not(*[data-executable], .CodeMirror pre)').each(function(i, el) {
var textArea = $('<textarea>' + el.innerHTML + '</textarea>')
$(el).replaceWith(textArea);
var editor = CodeMirror.fromTextArea(textArea[0], {
mode: "text/x-java",
theme: "3024-day",
readOnly: true,
viewportMargin: 0
});
});
});
</script>
<style type="text/css">
/* This needs to come last to set auto height, and html.css is always included first */
.CodeMirror {
height: auto;
font-size: 14px;
padding: 15px;
border-radius: 5px;
}
.CodeMirror-scroll {
overflow-y: hidden;
overflow-x: auto;
height: auto;
}
</style>
<script type="text/javascript" src="theme/html/epub.js"> </script>
<script type="text/javascript" src="theme/html/reader.js"> </script>
</head>
<body data-type="book" id="viewer">
<section data-type="chapter" data-pdf-bookmark="Chapter 6. Media" id="media">
<h1>Media</h1>
<p>Processing is capable of drawing more than simple lines and shapes. It’s time to learn how to load raster images, vector files, and fonts into our programs to extend the visual possibilities to photography, detailed diagrams, and diverse typefaces.</p>
<p>Processing uses a folder named <em>data</em> to store such files, so that you never have to think about their location when making a sketch that will run on the desktop, on the Web, or on a mobile device. We’ve posted some media files online for you to use in this chapter’s examples: <a href="http://www.processing.org/learning/books/media.zip"><em class="hyperlink">http://www.processing.org/learning/books/media.zip</em></a>.</p>
<p>Download this file, unzip it to the desktop (or somewhere else convenient), and make a mental note of its location.</p>
<div data-type="note">
<p>To unzip on Mac OS X, just double-click the file, and it will create a folder named <em>media</em>. On Windows, double-click the <em>media.zip</em> file, which will open a new window. In that window, drag the <em>media</em> folder to the desktop.</p>
</div>
<p>Create a new sketch, and select Add File from the Sketch menu. Find the <em>lunar.jpg</em> file from the media folder that you just unzipped and select it. If everything went well, the message area will read “1 file added to the sketch.”</p>
<p>To check for the file, select Show Sketch Folder in the Sketch menu. You should see a folder named <em>data</em>, with a copy of <em>lunar.jpg</em> inside. When you add a file to the sketch, the <em>data</em> folder will automatically be created.Instead of using the Add File menu command, you can do the same thing by dragging files into the editor area of the Processing window. The files will be copied to the <em>data</em> folder the same way (and the <em>data</em> folder will be created if none exists).</p>
<p>You can also create the <em>data</em> folder outside of Processing and copy files there yourself. You won’t get the message saying that files have been added, but this is a helpful method when you’re working with large numbers of files.</p>
<div data-type="note">
<p>On Windows and Mac OS X, extensions are hidden by default. It’s a good idea to change that option so that you always see the full name of your files. On Mac OS X, select Preferences from the Finder menu, and then make sure “Show all filename extensions” is checked in the Advanced tab. On Windows, look for “Folder Options,” and set the option there.</p>
</div>
<section data-type="sect1" data-pdf-bookmark="Images" id="images">
<h1>Images</h1>
<p>There are three steps to follow before you can draw an image to the screen:</p>
<ol>
<li>
<p>Add the image to the sketch’s <em>data</em> folder (instructions given previously).</p>
</li>
<li>
<p>Create a <em>PImage</em> variable to store the image.</p>
</li>
<li>
<p>Load the image into the variable with <em>loadImage()</em>.</p>
</li>
</ol>
<section data-type="sect2" data-pdf-bookmark="Example 6-1: Load an Image" id="example_6-1_colon_load_an_image">
<h2><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_06_01">Example 6-1: Load an Image</a></h2>
<p>After all three steps are done, you can draw the image to the screen with the <em>image()</em> function. The first parameter to <em>image()</em> specifies the image to draw; the second and third set the x- and y-coordinates:</p>
<figure>
<img src="images/Ex_06_01.png" alt="Ex 06 01"/>
<figcaption/>
</figure>
<pre data-type="programlisting">PImage img;
void setup() {
size(480, 120);
img = loadImage("lunar.jpg");
}
void draw() {
image(img, 0, 0);
}</pre>
<p>Optional fourth and fifth parameters set the width and height to draw the image. If the fourth and fifth parameters are not used, the image is drawn at the size at which it was created.</p>
<p>These next examples show how to work with more than one image in the same program and how to resize an image.</p>
</section>
<section data-type="sect2" data-pdf-bookmark="Example 6-2: Load More Images" id="example_6-2_colon_load_more_images">
<h2><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_06_02">Example 6-2: Load More Images</a></h2>
<p>For this example, you’ll need to add the <em>capsule.jpg</em> file (found in the <em>media</em> folder you downloaded) to your sketch using one of the methods described earlier.</p>
<figure>
<img src="images/Ex_06_02.png" alt="Ex 06 02"/>
<figcaption/>
</figure>
<pre data-type="programlisting">PImage img1;
PImage img2;
void setup() {
size(480, 120);
img1 = loadImage("lunar.jpg");
img2 = loadImage("capsule.jpg");
}
void draw() {
image(img1, −120, 0);
image(img1, 130, 0, 240, 120);
image(img2, 300, 0, 240, 120);
}</pre>
</section>
<section data-type="sect2" data-pdf-bookmark="Example 6-3: Mousing Around with Images" id="example_6-3_colon_mousing_around_with_im">
<h2><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_06_03">Example 6-3: Mousing Around with Images</a></h2>
<p>When the <em>mouseX</em> and <em>mouseY</em> values are used as part of the fourth and fifth parameters of <em>image()</em>, the image size changes as the mouse moves:</p>
<figure>
<img src="images/Ex_06_03.png" alt="Ex 06 03"/>
<figcaption/>
</figure>
<pre data-type="programlisting">PImage img;
void setup() {
size(480, 120);
img = loadImage("lunar.jpg");
}
void draw() {
background(0);
image(img, 0, 0, mouseX * 2, mouseY * 2);
}</pre>
<div data-type="note">
<p>When an image is displayed larger or smaller than its actual size, it may become distorted. Be careful to prepare your images at the sizes they will be used. When the display size of an image is changed with the <em>image()</em> function, the actual image on the hard drive doesn’t change.</p>
</div>
<p>Processing can load and display raster images in the JPEG, PNG, and GIF formats. (Vector shapes in the SVG format can be displayed in a different way, as described in “Shapes,” later in this chapter.) You can convert images to the JPEG, PNG, and GIF formats using programs like GIMP and Photoshop. Most digital cameras save JPEG images, but they usually need to be reduced in size before being used with Processing. A typical digital camera creates an image that is several times larger than the drawing area of most Processing sketches, so resizing such images before they are added to the <em>data</em> folder makes sketches run more efficiently, and can save disk space.</p>
<p>GIF and PNG images support transparency, which means that pixels can be invisible or partially visible (recall the discussion of <em>color()</em> and alpha values in <a data-type="xref" href="ch03.html#color">“Color”</a>–<a data-type="xref" href="ch03.html#example_3-17_colon_set_transparency">“<a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_03_17">Example 3-17: Set Transparency</a>”</a>). GIF images have 1-bit transparency, which means that pixels are either fully opaque or fully transparent. PNG images have 8-bit transparency, which means that each pixel can have a variable level of opacity. The following examples show the difference, using the <em>clouds.gif</em> and <em>clouds.png</em> files found in the <em>media</em> folder that you downloaded. Be sure to add them to the sketch before trying each example.</p>
</section>
<section data-type="sect2" data-pdf-bookmark="Example 6-4: Transparency with a GIF" id="example_6-4_colon_transparency_with_a_gi">
<h2><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_06_04">Example 6-4: Transparency with a GIF</a></h2>
<figure>
<img src="images/Ex_06_04.png" alt="Ex 06 04"/>
<figcaption/>
</figure>
<pre data-type="programlisting">PImage img;
void setup() {
size(480, 120);
img = loadImage("clouds.gif");
}
void draw() {
background(255);
image(img, 0, 0);
image(img, 0, mouseY * −1);
}</pre>
</section>
<section data-type="sect2" data-pdf-bookmark="Example 6-5: Transparency with a PNG" id="example_6-5_colon_transparency_with_a_pn">
<h2><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_06_05">Example 6-5: Transparency with a PNG</a></h2>
<figure>
<img src="images/Ex_06_05.png" alt="Ex 06 05"/>
<figcaption/>
</figure>
<pre data-type="programlisting">PImage img;
void setup() {
size(480, 120);
img = loadImage("clouds.png");
}
void draw() {
background(204);
image(img, 0, 0);
image(img, 0, mouseY * −1);
}</pre>
<div data-type="note">
<p>Remember to include the file extensions <em>.gif</em>, <em>.jpg</em>, or <em>.png</em> when you load the image. Also, be sure that the image name is typed exactly as it appears in the file, including the case of the letters. And if you missed it, read the note earlier in this chapter about making sure that the file extensions are visible on Mac OS X and Windows.</p>
</div>
</section>
</section>
<section data-type="sect1" data-pdf-bookmark="Fonts" id="fonts">
<h1>Fonts</h1>
<p>Processing can display text in many fonts other than the default. Before you display text in a different typeface, you need to convert one of the fonts on your computer to the VLW format, which stores each letter as a small image. To do this, select Create Font from the Tools menu to open the dialog box (<a data-type="xref" href="#create_font_tool">Figure 6-1</a>). Specify the font you want to convert, as well as the size and whether you want it to be smooth (anti-aliased).</p>
<figure id="create_font_tool">
<img src="images/Fig_06_01.png" alt="Fig 06 01"/>
<figcaption>Create Font tool.</figcaption>
</figure>
<div data-type="note">
<p>Make the font size selection carefully by considering the following: create the font at the size you want to use it in your sketch (or larger), but keep in mind that larger sizes increase the font file size. Select the Characters option only if you’ll be using non-Roman characters like Japanese or Chinese text, because this also increases the file size significantly.</p>
</div>
<p>When you click the OK button in the Create Font tool, the VLW font is created and placed in the sketch’s <em>data</em> folder. Now it’s possible to load the font and add words to a sketch. This part is similar to working with images, but there’s one extra step:</p>
<ol>
<li>
<p>Add the font to the sketch’s <em>data</em> folder (instructions given previously).</p>
</li>
<li>
<p>Create a <em>PFont</em> variable to store the font.</p>
</li>
<li>
<p>Load the font into the variable with <em>loadFont()</em>.</p>
</li>
<li>
<p>Use the <em>textFont()</em> command to set the current font.</p>
</li>
</ol>
<section data-type="sect2" data-pdf-bookmark="Example 6-6: Drawing with Fonts" id="example_6-6_colon_drawing_with_fonts">
<h2><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_06_06">Example 6-6: Drawing with Fonts</a></h2>
<p>Now you can draw these letters to the screen with the <em>text()</em> function, and you can change the size with <em>textSize()</em>. For this example, you’ll need to use the Create Font tool to create a VLW font (and modify the <em>loadFont()</em> line to use it), or you can use <em>AndaleMono-36.vlw</em> from the <em>media</em> folder:</p>
<figure>
<img src="images/Ex_06_06.png" alt="Ex 06 06"/>
<figcaption/>
</figure>
<pre data-type="programlisting">PFont font;
void setup() {
size(480, 120);
smooth();
font = loadFont("AndaleMono-36.vlw");
textFont(font);
}
void draw() {
background(102);
textSize(36);
text("That's one small step for man...", 25, 60);
textSize(18);
text("That's one small step for man...", 27, 90);
}</pre>
<p>The first parameter to <em>text()</em> is the character(s) to draw to the screen. (Notice that the characters are enclosed within quotes.) The second and third parameters set the horizontal and vertical location. The location is relative to the baseline of the text (see <a data-type="xref" href="#typography_coordinates">Figure 6-2</a>).</p>
<figure id="typography_coordinates">
<img src="images/Fig_06_02.png" alt="Fig 06 02"/>
<figcaption>Typography coordinates.</figcaption>
</figure>
</section>
<section data-type="sect2" data-pdf-bookmark="Example 6-7: Draw Text in a Box" id="example_6-7_colon_draw_text_in_a_box">
<h2><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_06_07">Example 6-7: Draw Text in a Box</a></h2>
<p>You can also set text to draw inside a box by adding fourth and fifth parameters that specify the width and height of the box:</p>
<figure>
<img src="images/Ex_06_07.png" alt="Ex 06 07"/>
<figcaption/>
</figure>
<pre data-type="programlisting">PFont font;
void setup() {
size(480, 120);
font = loadFont("AndaleMono-24.vlw");
textFont(font);
}
void draw() {
background(102);
text("That's one small step for man...", 26, 30, 240, 100);
}</pre>
</section>
<section data-type="sect2" data-pdf-bookmark="Example 6-8: Store Text in a String" id="example_6-8_colon_store_text_in_a_string">
<h2><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_06_08">Example 6-8: Store Text in a <em>String</em></a></h2>
<p>In the previous example, the words inside the <em>text()</em> function start to make the code difficult to read. We can store these words in a variable to make the code more modular. The <em>String</em> data type is used to store text data. Here’s a new version of the previous example that uses a <em>String</em>:</p>
<pre data-type="programlisting">PFont font;
String quote = "That's one small step for man...";
void setup() {
size(480, 120);
font = loadFont("AndaleMono-24.vlw");
textFont(font);
}
void draw() {
background(102);
text(quote, 26, 30, 240, 100);
}</pre>
<p>There’s a set of additional functions that affect how letters are displayed on screen. They are explained, with examples, in the Typography category of the Processing Reference.</p>
</section>
</section>
<section data-type="sect1" data-pdf-bookmark="Shapes" id="shapes">
<h1>Shapes</h1>
<p>If you make vector shapes in a program like Inkscape or Illustrator, you can load them into Processing directly. This is helpful for shapes you’d rather not build with Processing’s drawing functions. As with images, you need to add them to your sketch before they can be loaded.</p>
<p>There are three steps to load and draw an SVG file:</p>
<ol>
<li>
<p>Add an SVG file to the sketch’s <em>data</em> folder.</p>
</li>
<li>
<p>Create a <em>PShape</em> variable to store the vector file.</p>
</li>
<li>
<p>Load the vector file into the variable with <em>loadShape()</em>.</p>
</li>
</ol>
<section data-type="sect2" data-pdf-bookmark="Example 6-9: Draw with Shapes" id="example_6-9_colon_draw_with_shapes">
<h2><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_06_09">Example 6-9: Draw with Shapes</a></h2>
<p>After following these steps, you can draw the image to the screen with the <em>shape()</em> function:</p>
<figure>
<img src="images/Ex_06_09.png" alt="Ex 06 09"/>
<figcaption/>
</figure>
<pre data-type="programlisting">PShape network;
void setup() {
size(480, 120);
smooth();
network = loadShape("network.svg");
}
void draw() {
background(0);
shape(network, 30, 10);
shape(network, 180, 10, 280, 280);
}</pre>
<p>The parameters for <em>shape()</em> are similar to <em>image()</em>. The first parameter tells <em>shape()</em> which SVG to draw and the next pair sets the position. Optional fourth and fifth parameters set the width and height.</p>
</section>
<section data-type="sect2" data-pdf-bookmark="Example 6-10: Scaling Shapes" id="example_6-10_colon_scaling_shapes">
<h2><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_06_10">Example 6-10: Scaling Shapes</a></h2>
<p>Unlike raster images, vector shapes can be scaled to any size without losing resolution. In this example, the shape is scaled based on the <em>mouseX</em> variable, and the <em>shapeMode()</em> function is used to draw the shape from its center, rather than the default position, the upper-left corner:</p>
<figure>
<img src="images/Ex_06_10.png" alt="Ex 06 10"/>
<figcaption/>
</figure>
<pre data-type="programlisting">PShape network;
void setup() {
size(240, 120);
smooth();
shapeMode(CENTER);
network = loadShape("network.svg");
}
void draw() {
background(0);
float diameter = map(mouseX, 0, width, 10, 800);
shape(network, 120, 60, diameter, diameter);
}</pre>
<div data-type="note">
<p>There are limitations to the type of SVG file that you can load. Processing doesn’t support all SVG features. See the Processing Reference for PShape for more details.</p>
</div>
</section>
</section>
<section data-type="sect1" data-pdf-bookmark="Robot 4: Media" id="robot_4_colon_media">
<h1><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Robot4_Media">Robot 4: Media</a></h1>
<figure>
<img src="images/NRobot_Media.png" alt="NRobot Media"/>
<figcaption/>
</figure>
<p>Unlike the robots created from lines and rectangles drawn in Processing in the previous chapters, these robots were created with a vector drawing program. For some shapes, it’s often easier to point and click in a software tool like Inkscape or Illustrator than to define the shapes with coordinates in code.</p>
<p>There’s a trade-off to selecting one image creation technique over another. When shapes are defined in Processing, there’s more flexibility to modify them while the program is running. If the shapes are defined elsewhere and then loaded into Processing, changes are limited to the position, angle, and size. When loading each robot from an SVG file, as this example shows, the variations featured in Robot 2 (see <a data-type="xref" href="ch04.html#robot_2_colon_variables">“<a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Robot2_Variables">Robot 2: Variables</a>”</a> in <a data-type="xref" href="ch04.html#variables">Chapter 4</a>) are impossible.</p>
<p>Images can be loaded into a program to bring in visuals created in other programs or captured with a camera. With this image in the background, our robots are now exploring for life forms in Norway at the dawn of the 20th century.</p>
<p>The SVG and PNG file used in this example can be downloaded from <a href="http://www.processing.org/learning/books/media.zip"><em class="hyperlink">http://www.processing.org/learning/books/media.zip</em></a>.</p>
<pre data-type="programlisting">PShape bot1;
PShape bot2;
PShape bot3;
PImage landscape;
float easing = 0.05;
float offset = 0;
void setup() {
size(720, 480);
bot1 = loadShape("robot1.svg");
bot2 = loadShape("robot2.svg");
bot3 = loadShape("robot3.svg");
landscape = loadImage("alpine.png");
smooth();
}
void draw() {
// Set the background to the "landscape" image; this image
// must be the same width and height as the program
background(landscape);
// Set the left/right offset and apply easing to make
// the transition smooth
float targetOffset = map(mouseY, 0, height, −40, 40);
offset += (targetOffset - offset) * easing;
// Draw the left robot
shape(bot1, 85 + offset, 65);
// Draw the right robot smaller and give it a smaller offset
float smallerOffset = offset * 0.7;
shape(bot2, 510 + smallerOffset, 140, 78, 248);
// Draw the smallest robot, give it a smaller offset
smallerOffset *= −0.5;
shape(bot3, 410 + smallerOffset, 225, 39, 124);
}</pre>
</section>
</section>
</body>
</html>