epubjs
Version:
Render ePub documents in the browser, across many devices
995 lines (478 loc) • 31.7 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 3. Draw" id="draw">
<h1>Draw</h1>
<p>At first, drawing on a computer screen is like working on graph paper. It starts as a careful technical procedure, but as new concepts are introduced, drawing simple shapes with software expands into animation and interaction. Before we make this jump, we need to start at the beginning.</p>
<p>A computer screen is a grid of light elements called <em>pixels</em>. Each pixel has a position within the grid defined by coordinates. In Processing, the x-coordinate is the distance from the left edge of the Display Window and the y-coordinate is the distance from the top edge. We write coordinates of a pixel like this: (x, y). So, if the screen is 200×200 pixels, the upper-left is (0, 0), the center is at (100, 100), and the lower-right is (199, 199). These numbers may seem confusing; why do we go from 0 to 199 instead of 1 to 200? The answer is that in code, we usually count from 0 because it’s easier for calculations that we’ll get into later.</p>
<p>The Display Window is created and images are drawn inside through code elements called <em>functions</em>. Functions are the basic building blocks of a Processing program. The behavior of a function is defined by its <em>parameters</em>. For example, almost every Processing program has a <em>size()</em> function to set the width and height of the Display Window. (If your program doesn’t have a <em>size()</em> function, the dimension is set to 100×100 pixels.)</p>
<section data-type="sect1" data-pdf-bookmark="PROD: Insert Section Title Here" id="example_3-1_colon_draw_a_window">
<h1>PROD: Insert Section Title Here</h1>
<section data-type="sect2" data-pdf-bookmark="Example 3-1: Draw a Window" id="example_3-1_colon_draw_a_window-id1">
<h2><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_03_01">Example 3-1: Draw a Window</a></h2>
<p>The <em>size()</em> function has two parameters: the first sets the width of the window and the second sets the height. To draw a window that is 800 pixels wide and 600 high, write:</p>
<pre data-type="programlisting">size(800, 600);</pre>
<p>Run this line of code to see the result. Put in different values to see what’s possible. Try very small numbers and numbers larger than your screen.</p>
</section>
<section data-type="sect2" data-pdf-bookmark="Example 3-2: Draw a Point" id="example_3-2_colon_draw_a_point">
<h2><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_03_02">Example 3-2: Draw a Point</a></h2>
<p>To set the color of a single pixel within the Display Window, we use the <em>point()</em> function. It has two parameters that define a position: the x-coordinate followed by the y-coordinate. To draw a little window and a point at the center of the screen, coordinate (240, 60), type:</p>
<figure>
<img src="images/Ex_03_02.png" alt="Ex 03 02"/>
<figcaption/>
</figure>
<pre data-type="programlisting">size(480, 120);
point(240, 60);</pre>
<p>Try to write a program that puts a point at each corner of the Display Window and one in the center. Try placing points side by side to make horizontal, vertical, and diagonal lines.</p>
</section>
</section>
<section data-type="sect1" data-pdf-bookmark="Basic Shapes" id="basic_shapes">
<h1>Basic Shapes</h1>
<p>Processing includes a group of functions to draw basic shapes (see <a data-type="xref" href="#coordinates_and_shapes">Figure 3-1</a>). Simple shapes like lines can be combined to create more complex forms like a leaf or a face.</p>
<p>To draw a single line, we need four parameters: two for the starting location and two for the end.</p>
<figure id="coordinates_and_shapes">
<img src="images/Fig_03_01.png" alt="Fig 03 01"/>
<figcaption>Coordinates and shapes.</figcaption>
</figure>
<section data-type="sect2" data-pdf-bookmark="Example 3-3: Draw a Line" id="example_3-3_colon_draw_a_line">
<h2><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_03_03">Example 3-3: Draw a Line</a></h2>
<p>To draw a line between coordinate (20, 50) and (420,110), try:</p>
<figure>
<img src="images/Ex_03_03.png" alt="Ex 03 03"/>
<figcaption/>
</figure>
<pre data-type="programlisting">size(480, 120);
line(20, 50, 420, 110);</pre>
</section>
<section data-type="sect2" data-pdf-bookmark="Example 3-4: Draw Basic Shapes" id="example_3-4_colon_draw_basic_shapes">
<h2><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_03_04">Example 3-4: Draw Basic Shapes</a></h2>
<p>Following this pattern, a triangle needs six parameters and a quadrilateral needs eight (one pair for each point):</p>
<figure>
<img src="images/Ex_03_04.png" alt="Ex 03 04"/>
<figcaption/>
</figure>
<pre data-type="programlisting">size(480, 120);
quad(158, 55, 199, 14, 392, 66, 351, 107);
triangle(347, 54, 392, 9, 392, 66);
triangle(158, 55, 290, 91, 290, 112);</pre>
</section>
<section data-type="sect2" data-pdf-bookmark="Example 3-5: Draw a Rectangle" id="example_3-5_colon_draw_a_rectangle">
<h2><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_03_05">Example 3-5: Draw a Rectangle</a></h2>
<p>Rectangles and ellipses are both defined with four parameters: the first and second are for the x- and y-coordinates of the anchor point, the third for the width, and the fourth for the height. To make a rectangle at coordinate (180, 60) with a width of 220 pixels and height of 40, use the <em>rect()</em> function like this:</p>
<figure>
<img src="images/Ex_03_05.png" alt="Ex 03 05"/>
<figcaption/>
</figure>
<pre data-type="programlisting">size(480, 120);
rect(180, 60, 220, 40);</pre>
</section>
<section data-type="sect2" data-pdf-bookmark="Example 3-6: Draw an Ellipse" id="example_3-6_colon_draw_an_ellipse">
<h2><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_03_06">Example 3-6: Draw an Ellipse</a></h2>
<p>The x- and y-coordinates for a rectangle are the upper-left corner, but for an ellipse they are the center of the shape. In this example, notice that the y-coordinate for the first ellipse is outside the window. Objects can be drawn partially (or entirely) out of the window without an error:</p>
<figure>
<img src="images/Ex_03_06.png" alt="Ex 03 06"/>
<figcaption/>
</figure>
<pre data-type="programlisting">size(480, 120);
ellipse(278, −100, 400, 400);
ellipse(120, 100, 110, 110);
ellipse(412, 60, 18, 18);</pre>
<p>Processing doesn’t have separate functions to make squares and circles. To make these shapes, use the same value for the <em>width</em> and the <em>height</em> parameters to <em>ellipse()</em> and <em>rect()</em>.</p>
</section>
<section data-type="sect2" data-pdf-bookmark="Example 3-7: Draw Part of an Ellipse" id="example_3-7_colon_draw_part_of_an_ellips">
<h2><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_03_07">Example 3-7: Draw Part of an Ellipse</a></h2>
<p>The <em>arc()</em> function draws a piece of an ellipse:</p>
<figure>
<img src="images/Ex_03_07.png" alt="Ex 03 07"/>
<figcaption/>
</figure>
<pre data-type="programlisting">size(480, 120);
arc(90, 60, 80, 80, 0, HALF_PI);
arc(190, 60, 80, 80, 0, PI+HALF_PI);
arc(290, 60, 80, 80, PI, TWO_PI+HALF_PI);
arc(390, 60, 80, 80, QUARTER_PI, PI+QUARTER_PI);</pre>
<p>The first and second parameters set the location, the third and fourth set the width and height. The fifth parameter sets the angle to start the arc, and the sixth sets the angle to stop. The angles are set in radians, rather than degrees. Radians are angle measurements based on the value of pi (3.14159). <a data-type="xref" href="#radian_and_degrees_measurements">Figure 3-2</a> shows how the two relate. As featured in this example, four radian values are used so frequently that special names for them were added as a part of Processing. The values <em>PI</em>, <em>QUARTER_PI</em>, <em>HALF_PI</em>, and <em>TWO_PI</em> can be used to replace the radian values for 180°, 45°, 90°, and 360°.</p>
<figure id="radian_and_degrees_measurements">
<img src="images/Fig_03_02.png" alt="Fig 03 02"/>
<figcaption>Radian and degrees measurements.</figcaption>
</figure>
</section>
<section data-type="sect2" data-pdf-bookmark="Example 3-8: Draw with Degrees" id="example_3-8_colon_draw_with_degrees">
<h2><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_03_08">Example 3-8: Draw with Degrees</a></h2>
<p>If you prefer to use degree measurements, you can convert to radians with the <em>radians()</em> function. This function takes an angle in degrees and changes it to the corresponding radian value. The following example is the same as <a data-type="xref" href="#example_3-7_colon_draw_part_of_an_ellips">“<a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_03_07">Example 3-7: Draw Part of an Ellipse</a>”</a>, but it uses the <em>radians()</em> function to define the start and stop values in degrees:</p>
<pre data-type="programlisting">size(480, 120);
arc(90, 60, 80, 80, 0, radians(90));
arc(190, 60, 80, 80, 0, radians(270));
arc(290, 60, 80, 80, radians(180), radians(450));
arc(390, 60, 80, 80, radians(45), radians(225));</pre>
</section>
</section>
<section data-type="sect1" data-pdf-bookmark="Drawing Order" id="drawing_order">
<h1>Drawing Order</h1>
<p>When a program runs, the computer starts at the top and reads each line of code until it reaches the last line and then stops. If you want a shape to be drawn on top of all other shapes, it needs to follow the others in the code.</p>
<section data-type="sect2" data-pdf-bookmark="Example 3-9: Control Your Drawing Order" id="example_3-9_colon_control_your_drawing_o">
<h2><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_03_09">Example 3-9: Control Your Drawing Order</a></h2>
<figure>
<img src="images/Ex_03_09.png" alt="Ex 03 09"/>
<figcaption/>
</figure>
<pre data-type="programlisting">size(480, 120);
ellipse(140, 0, 190, 190);
// The rectangle draws on top of the ellipse
// because it comes after in the code
rect(160, 30, 260, 20);</pre>
</section>
<section data-type="sect2" data-pdf-bookmark="Example 3-10: Put It in Reverse" id="example_3-10_colon_put_it_in_reverse">
<h2><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_03_10">Example 3-10: Put It in Reverse</a></h2>
<p>Modify <a data-type="xref" href="#example_3-9_colon_control_your_drawing_o">“<a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_03_09">Example 3-9: Control Your Drawing Order</a>”</a> by reversing the order of <em>rect()</em> and <em>ellipse()</em> to see the circle on top of the rectangle:</p>
<figure>
<img src="images/Ex_03_10.png" alt="Ex 03 10"/>
<figcaption/>
</figure>
<pre data-type="programlisting">size(480, 120);
rect(160, 30, 260, 20);
// The ellipse draws on top of the rectangle
// because it comes after in the code
ellipse(140, 0, 190, 190);</pre>
<p>You can think of it like painting with a brush or making a collage. The last element that you add is what’s visible on top.</p>
</section>
</section>
<section data-type="sect1" data-pdf-bookmark="Shape Properties" id="shape_properties">
<h1>Shape Properties</h1>
<p>The most basic and useful shape properties are stroke weight and antialiasing, also called <em>smoothing</em>.</p>
<section data-type="sect2" data-pdf-bookmark="Example 3-11: Draw Smooth Lines" id="example_3-11_colon_draw_smooth_lines">
<h2><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_03_11">Example 3-11: Draw Smooth Lines</a></h2>
<p>The <em>smooth()</em> function smooths the edges of lines drawn to the screen by blending the edges with the nearby pixel values. Conversely, if smoothing is already turned on, the <em>noSmooth()</em> function will turn it off:</p>
<figure>
<img src="images/Ex_03_11.png" alt="Ex 03 11"/>
<figcaption/>
</figure>
<pre data-type="programlisting">size(480, 120);
smooth(); // Turns on smoothing
ellipse(140, 60, 90, 90);
noSmooth(); // Turns off smoothing
ellipse(240, 60, 90, 90);</pre>
<div data-type="note">
<p>Some implementations of Processing (such as the version for JavaScript) will always smooth shapes; others might not support smoothing at all. In some situations, it’s not possible to enable and disable smoothing within the same trip through <em>draw()</em>. See the <em>smooth()</em> reference for more details.</p>
</div>
</section>
<section data-type="sect2" data-pdf-bookmark="Example 3-12: Set Stroke Weight" id="example_3-12_colon_set_stroke_weight">
<h2><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_03_12">Example 3-12: Set Stroke Weight</a></h2>
<p>The default stroke weight is a single pixel, but this can be changed with the <em>strokeWeight()</em> function. The single parameter to <em>strokeWeight()</em> sets the width of drawn lines:</p>
<figure>
<img src="images/Ex_03_12.png" alt="Ex 03 12"/>
<figcaption/>
</figure>
<pre data-type="programlisting">size(480, 120);
smooth();
ellipse(75, 60, 90, 90);
strokeWeight(8); // Stroke weight to 8 pixels
ellipse(175, 60, 90, 90);
ellipse(279, 60, 90, 90);
strokeWeight(20); // Stroke weight to 20 pixels
ellipse(389, 60, 90, 90);</pre>
</section>
<section data-type="sect2" data-pdf-bookmark="Example 3-13: Set Stroke Attributes" id="example_3-13_colon_set_stroke_attributes">
<h2><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_03_13">Example 3-13: Set Stroke Attributes</a></h2>
<p>The <em>strokeJoin()</em> function changes the way lines are joined (how the corners look), and the <em>strokeCap()</em> function changes how lines are drawn at their beginning and end:</p>
<figure>
<img src="images/Ex_03_13.png" alt="Ex 03 13"/>
<figcaption/>
</figure>
<pre data-type="programlisting">size(480, 120);
smooth();
strokeWeight(12);
strokeJoin(ROUND); // Round the stroke corners
rect(40, 25, 70, 70);
strokeJoin(BEVEL); // Bevel the stroke corners
rect(140, 25, 70, 70);
strokeCap(SQUARE); // Square the line endings
line(270, 25, 340, 95);
strokeCap(ROUND); // Round the line endings
line(350, 25, 420, 95);</pre>
<p>The placement of shapes like <em>rect()</em> and <em>ellipse()</em> is controlled with the <em>rectMode()</em> and <em>ellipseMode()</em> functions. Check the reference (Help→Reference) to see examples of how to place rectangles from their center (rather than their upper-left corner), or to draw ellipses from their upper-left corner like rectangles.</p>
<p>When any of these attributes are set, all shapes drawn afterward are affected. For instance, in <a data-type="xref" href="#example_3-12_colon_set_stroke_weight">“<a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_03_12">Example 3-12: Set Stroke Weight</a>”</a>, notice how the second and third circles both have the same stroke weight, even though the weight is set only once before both are drawn.</p>
</section>
</section>
<section data-type="sect1" data-pdf-bookmark="Color" id="color">
<h1>Color</h1>
<p>All the shapes so far have been filled white with black outlines, and the background of the Display Window has been light gray. To change them, use the <em>background()</em>, <em>fill()</em>, and <em>stroke()</em> functions. The values of the parameters are in the range of 0 to 255, where 255 is white, 128 is medium gray, and 0 is black. <a data-type="xref" href="#gray_values_from_0_to_255">Figure 3-3</a> shows how the values from 0 to 255 map to different gray levels.</p>
<figure id="gray_values_from_0_to_255">
<img src="images/Fig_03_03.png" alt="Fig 03 03"/>
<figcaption>Gray values from 0 to 255.</figcaption>
</figure>
<section data-type="sect2" data-pdf-bookmark="Example 3-14: Paint with Grays" id="example_3-14_colon_paint_with_grays">
<h2><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_03_14">Example 3-14: Paint with Grays</a></h2>
<p>This example shows three different gray values on a black background:</p>
<figure>
<img src="images/Ex_03_14.png" alt="Ex 03 14"/>
<figcaption/>
</figure>
<pre data-type="programlisting">size(480, 120);
smooth();
background(0); // Black
fill(204); // Light gray
ellipse(132, 82, 200, 200); // Light gray circle
fill(153); // Medium gray
ellipse(228, −16, 200, 200); // Medium gray circle
fill(102); // Dark gray
ellipse(268, 118, 200, 200); // Dark gray circle</pre>
</section>
<section data-type="sect2" data-pdf-bookmark="Example 3-15: Control Fill and Stroke" id="example_3-15_colon_control_fill_and_stro">
<h2><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_03_15">Example 3-15: Control Fill and Stroke</a></h2>
<p>You can disable the stroke so that there’s no outline with <em>noStroke()</em> and you can disable the fill of a shape with <em>noFill()</em>:</p>
<figure>
<img src="images/Ex_03_15.png" alt="Ex 03 15"/>
<figcaption/>
</figure>
<pre data-type="programlisting">size(480, 120);
smooth();
fill(153); // Medium gray
ellipse(132, 82, 200, 200); // Gray circle
noFill(); // Turn off fill
ellipse(228, −16, 200, 200); // Outline circle
noStroke(); // Turn off stroke
ellipse(268, 118, 200, 200); // Doesn't draw!</pre>
<p>Be careful not to disable the fill and stroke at the same time, as we’ve done in the previous example, because nothing will draw to the screen.</p>
</section>
<section data-type="sect2" data-pdf-bookmark="Example 3-16: Draw with Color" id="example_3-16_colon_draw_with_color">
<h2><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_03_16">Example 3-16: Draw with Color</a></h2>
<p>To move beyond grayscale values, you use three parameters to specify the red, green, and blue components of a color. Because this book is printed in black and white, you’ll see only gray value here. Run the code in Processing to reveal the colors:</p>
<figure>
<img src="images/Ex_03_16.png" alt="Ex 03 16"/>
<figcaption/>
</figure>
<pre data-type="programlisting">size(480, 120);
noStroke();
smooth();
background(0, 26, 51); // Dark blue color
fill(255, 0, 0); // Red color
ellipse(132, 82, 200, 200); // Red circle
fill(0, 255, 0); // Green color
ellipse(228, −16, 200, 200); // Green circle
fill(0, 0, 255); // Blue color
ellipse(268, 118, 200, 200); // Blue circle</pre>
<p>This is referred to as RGB color, which comes from how computers define colors on the screen. The three numbers stand for the values of red, green, and blue, and they range from 0 to 255 the way that the gray values do. Using RGB color isn’t very intuitive, so to choose colors, use Tools→Color Selector, which shows a color palette similar to those found in other software (see <a data-type="xref" href="#processing_color_selector">Figure 3-4</a>). Select a color, and then use the R, G, and B values as the parameters for your <em>background()</em>, <em>fill()</em>, or <em>stroke()</em> function.</p>
<figure id="processing_color_selector">
<img src="images/Fig_03_04.png" alt="Fig 03 04"/>
<figcaption>Processing Color Selector.</figcaption>
</figure>
</section>
<section data-type="sect2" data-pdf-bookmark="Example 3-17: Set Transparency" id="example_3-17_colon_set_transparency">
<h2><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_03_17">Example 3-17: Set Transparency</a></h2>
<p>By adding an optional fourth parameter to <em>fill()</em> or <em>stroke()</em>, you can control the transparency. This fourth parameter is known as the <em>alpha</em> value, and also uses the range 0 to 255 to set the amount of transparency. The value 0 defines the color as entirely transparent (it won’t display), the value 255 is entirely opaque, and the values between these extremes cause the colors to mix on screen:</p>
<figure>
<img src="images/Ex_03_17.png" alt="Ex 03 17"/>
<figcaption/>
</figure>
<pre data-type="programlisting">size(480, 120);
noStroke();
smooth();
background(204, 226, 225); // Light blue color
fill(255, 0, 0, 160); // Red color
ellipse(132, 82, 200, 200); // Red circle
fill(0, 255, 0, 160); // Green color
ellipse(228, −16, 200, 200); // Green circle
fill(0, 0, 255, 160); // Blue color
ellipse(268, 118, 200, 200); // Blue circle</pre>
</section>
</section>
<section data-type="sect1" data-pdf-bookmark="Custom Shapes" id="custom_shapes">
<h1>Custom Shapes</h1>
<p>You’re not limited to using these basic geometric shapes—you can also define new shapes by connecting a series of points.</p>
<section data-type="sect2" data-pdf-bookmark="Example 3-18: Draw an Arrow" id="example_3-18_colon_draw_an_arrow">
<h2><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_03_18">Example 3-18: Draw an Arrow</a></h2>
<p>The <em>beginShape()</em> function signals the start of a new shape. The <em>vertex()</em> function is used to define each pair of x- and y-coordinates for the shape. Finally, <em>endShape()</em> is called to signal that the shape is finished.</p>
<figure>
<img src="images/Ex_03_18.png" alt="Ex 03 18"/>
<figcaption/>
</figure>
<pre data-type="programlisting">size(480, 120);
beginShape();
vertex(180, 82);
vertex(207, 36);
vertex(214, 63);
vertex(407, 11);
vertex(412, 30);
vertex(219, 82);
vertex(226, 109);
endShape();</pre>
</section>
<section data-type="sect2" data-pdf-bookmark="Example 3-19: Close the Gap" id="example_3-19_colon_close_the_gap">
<h2><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_03_19">Example 3-19: Close the Gap</a></h2>
<p>When you run <a data-type="xref" href="#example_3-18_colon_draw_an_arrow">“<a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_03_18">Example 3-18: Draw an Arrow</a>”</a>, you’ll see the first and last point are not connected. To do this, add the word <em>CLOSE</em> as a parameter to <em>endShape()</em>, like this:</p>
<figure>
<img src="images/Ex_03_19.png" alt="Ex 03 19"/>
<figcaption/>
</figure>
<pre data-type="programlisting">size(480, 120);
beginShape();
vertex(180, 82);
vertex(207, 36);
vertex(214, 63);
vertex(407, 11);
vertex(412, 30);
vertex(219, 82);
vertex(226, 109);
endShape(CLOSE);</pre>
</section>
<section data-type="sect2" data-pdf-bookmark="Example 3-20: Create Some Creatures" id="example_3-20_colon_create_some_creatures">
<h2><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_03_20">Example 3-20: Create Some Creatures</a></h2>
<p>The power of defining shapes with <em>vertex()</em> is the ability to make shapes with complex outlines. Processing can draw thousands and thousands of lines at a time to fill the screen with fantastic shapes that spring from your imagination. A modest but more complex example follows:</p>
<figure>
<img src="images/Ex_03_20.png" alt="Ex 03 20"/>
<figcaption/>
</figure>
<pre data-type="programlisting">size(480, 120);
smooth();
// Left creature
beginShape();
vertex(50, 120);
vertex(100, 90);
vertex(110, 60);
vertex(80, 20);
vertex(210, 60);
vertex(160, 80);
vertex(200, 90);
vertex(140, 100);
vertex(130, 120);
endShape();
fill(0);
ellipse(155, 60, 8, 8);
// Right creature
fill(255);
beginShape();
vertex(370, 120);
vertex(360, 90);
vertex(290, 80);
vertex(340, 70);
vertex(280, 50);
vertex(420, 10);
vertex(390, 50);
vertex(410, 90);
vertex(460, 120);
endShape();
fill(0);
ellipse(345, 50, 10, 10);</pre>
</section>
</section>
<section data-type="sect1" data-pdf-bookmark="Comments" id="comments">
<h1>Comments</h1>
<p>The examples in this chapter use double slashes (//) at the end of a line to add comments to the code. Comments are parts of the program that are ignored when the program is run. They are useful for making notes for yourself that explain what’s happening in the code. If others are reading your code, comments are especially important to help them understand your thought process.</p>
<p>Comments are also especially useful for a number of different options, such as when trying to choose the right color. So, for instance, I might be trying to find just the right red for an ellipse:</p>
<pre data-type="programlisting">size(200, 200);
fill(165, 57, 57);
ellipse(100, 100, 80, 80);</pre>
<p>Now suppose I want to try a different red, but don’t want to lose the old one. I can copy and paste the line, make a change, and then “comment out” the old one:</p>
<pre data-type="programlisting">size(200, 200);
//fill(165, 57, 57);
fill(144, 39, 39);
ellipse(100, 100, 80, 80);</pre>
<p>Placing <code>//</code> at the beginning of the line temporarily disables it. Or I can remove the <code>//</code> and place it in front of the other line if I want to try it again:</p>
<pre data-type="programlisting">size(200, 200);
fill(165, 57, 57);
//fill(144, 39, 39);
ellipse(100, 100, 80, 80);</pre>
<div data-type="note">
<p>As a shortcut, you can also use Ctrl-/ (Cmd-/ on the Mac) to add or remove comments from the current line or a selected block of text. You can also comment out many lines at a time with the alternative comment notation introduced in <a data-type="xref" href="app01.html#coding_tips">Appendix A</a>.</p>
</div>
<p>As you work with Processing sketches, you’ll find yourself creating dozens of iterations of ideas; using comments to make notes or to disable code can help you keep track of multiple options.</p>
</section>
<section data-type="sect1" data-pdf-bookmark="Robot 1: Draw" id="robot_1_colon_draw">
<h1><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Robot1_Draw">Robot 1: Draw</a></h1>
<figure>
<img src="images/NRobot_Draw.png" alt="NRobot Draw"/>
<figcaption/>
</figure>
<p>This is P5, the Processing Robot. There are eight different programs to draw and animate him in the book—each one explores a different programming idea. P5’s design was inspired by Sputnik I (1957), Shakey from the Stanford Research Institute (1966–1972), the fighter drone in David Lynch’s <em>Dune</em> (1984), and HAL 9000 from <em>2001: A Space Odyssey</em> (1968), among other robot favorites.</p>
<p>The first robot program uses the drawing functions introduced in the previous chapter. The parameters to the <em>fill()</em> and <em>stroke()</em> functions set the gray values. The <em>line()</em>, <em>ellipse()</em>, and <em>rect()</em> functions define the shapes that create the robot’s neck, antennae, body, and head. To get more familiar with the functions, run the program and change the values to redesign the robot:</p>
<pre data-type="programlisting">size(720, 480);
smooth();
strokeWeight(2);
background(204);
ellipseMode(RADIUS);
// Neck
stroke(102); // Set stroke to gray
line(266, 257, 266, 162); // Left
line(276, 257, 276, 162); // Middle
line(286, 257, 286, 162); // Right
// Antennae
line(276, 155, 246, 112); // Small
line(276, 155, 306, 56); // Tall
line(276, 155, 342, 170); // Medium
// Body
noStroke(); // Disable stroke
fill(102); // Set fill to gray
ellipse(264, 377, 33, 33); // Antigravity orb
fill(0); // Set fill to black
rect(219, 257, 90, 120); // Main body
fill(102); // Set fill to gray
rect(219, 274, 90, 6); // Gray stripe
// Head
fill(0); // Set fill to black
ellipse(276, 155, 45, 45); // Head
fill(255); // Set fill to white
ellipse(288, 150, 14, 14); // Large eye
fill(0); // Set fill to black
ellipse(288, 150, 3, 3); // Pupil
fill(153); // Set fill to light gray
ellipse(263, 148, 5, 5); // Small eye 1
ellipse(296, 130, 4, 4); // Small eye 2
ellipse(305, 162, 3, 3); // Small eye 3</pre>
</section>
</section>
</body>
</html>