epubjs
Version:
Render ePub documents in the browser, across many devices
822 lines (440 loc) • 27.5 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 4. Variables" id="variables">
<h1>Variables</h1>
<p>A variable stores a value in memory so that it can be used later in a program. The variable can be used many times within a single program, and the value is easily changed while the program is running.</p>
<p>The primary reason we use variables is to avoid repeating ourselves in the code. If you are typing the same number more than once, consider making it into a variable to make your code more general and easier to update.</p>
<section data-type="sect1" data-pdf-bookmark="PROD: Insert Section Title Here" id="example_4-1_colon_reuse_the_same">
<h1>PROD: Insert Section Title Here</h1>
<section data-type="sect2" data-pdf-bookmark="Example 4-1: Reuse the Same Values" id="example_4-1_colon_reuse_the_same-id1">
<h2><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_04_01">Example 4-1: Reuse the Same Values</a></h2>
<p>For instance, when you make the y-coordinate and diameter for the two circles in this example into variables, the same values are used for each ellipse:</p>
<figure>
<img src="images/Ex_04_01.png" alt="Ex 04 01"/>
<figcaption/>
</figure>
<pre data-type="programlisting">size(480, 120);
smooth();
int y = 60;
int d = 80;
ellipse(75, y, d, d); // Left
ellipse(175, y, d, d); // Middle
ellipse(275, y, d, d); // Right</pre>
</section>
<section data-type="sect2" data-pdf-bookmark="Example 4-2: Change Values" id="example_4-2_colon_change_values">
<h2><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_04_02">Example 4-2: Change Values</a></h2>
<p>Simply changing the <em>y</em> and <em>d</em> variables therefore alters all three ellipses:</p>
<figure>
<img src="images/Ex_04_02.png" alt="Ex 04 02"/>
<figcaption/>
</figure>
<pre data-type="programlisting">size(480, 120);
smooth();
int y = 100;
int d = 130;
ellipse(75, y, d, d); // Left
ellipse(175, y, d, d); // Middle
ellipse(275, y, d, d); // Right</pre>
<p>Without the variables, you’d need to change the y-coordinate used in the code three times and the diameter six times. When comparing <a data-type="xref" href="#example_4-1_colon_reuse_the_same-id1">“<a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_04_01">Example 4-1: Reuse the Same Values</a>”</a> and <a data-type="xref" href="#example_4-2_colon_change_values">“<a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_04_02">Example 4-2: Change Values</a>”</a>, notice how the bottom three lines are the same, and only the middle two lines with the variables are different. Variables allow you to separate the lines of the code that change from the lines that don’t, which makes programs easier to modify. For instance, if you place variables that control colors and sizes of shapes in one place, then you can quickly explore different visual options by focusing on only a few lines of code.</p>
</section>
</section>
<section data-type="sect1" data-pdf-bookmark="Making Variables" id="making_variables">
<h1>Making Variables</h1>
<p>When you make your own variables, you determine the <em>name</em>, the <em>data type</em>, and the <em>value</em>. The name is what you decide to call the variable. Choose a name that is informative about what the variable stores, but be consistent and not too verbose. For instance, the variable name “radius” will be clearer than “r” when you look at the code later.</p>
<p>The range of values that can be stored within a variable is defined by its <em>data type</em>. For instance, the <em>integer</em> data type can store numbers without decimal places (whole numbers). In code, <em>integer</em> is abbreviated to <em>int</em>. There are data types to store each kind of data: integers, floating-point (decimal) numbers, characters, words, images, fonts, and so on.</p>
<p>Variables must first be <em>declared</em>, which sets aside space in the computer’s memory to store the information. When declaring a variable, you also need to specify its data type (such as <em>int</em>), which indicates what kind of information is being stored. After the data type and name are set, a value can be assigned to the variable:</p>
<pre data-type="programlisting">int x; // Declare x as an int variable
x = 12; // Assign a value to x</pre>
<p>This code does the same thing, but is shorter:</p>
<pre data-type="programlisting">int x = 12; // Declare x as an int variable and assign a value</pre>
<p>The name of the data type is included on the line of code that declares a variable, but it’s not written again. Each time the data type is written in front of the variable name, the computer thinks you’re trying to declare a new variable. You can’t have two variables with the same name in the same part of the program (see <a data-type="xref" href="app04.html#variable_scope">Appendix D</a>), so the program has an error:</p>
<pre data-type="programlisting">int x; // Declare x as an int variable
int x = 12; // ERROR! Can't have two variables called x here</pre>
</section>
<section data-type="sect1" data-pdf-bookmark="Processing Variables" id="processing_variables">
<h1>Processing Variables</h1>
<p>Processing has a series of special variables to store information about the program while it runs. For instance, the width and height of the window are stored in variables called <em>width</em> and <em>height</em>. These values are set by the <em>size()</em> function. They can be used to draw elements relative to the size of the window, even if the <em>size()</em> line changes.</p>
<section data-type="sect2" data-pdf-bookmark="Example 4-3: Adjust the Size, See What Follows" id="example_4-3_colon_adjust_the_size_comma">
<h2><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_04_03">Example 4-3: Adjust the Size, See What Follows</a></h2>
<p>In this example, change the parameters to <em>size()</em> to see how it works:</p>
<figure>
<img src="images/Ex_04_03.png" alt="Ex 04 03"/>
<figcaption/>
</figure>
<pre data-type="programlisting">size(480, 120);
smooth();
line(0, 0, width, height); // Line from (0,0) to (480, 120)
line(width, 0, 0, height); // Line from (480, 0) to (0, 120)
ellipse(width/2, height/2, 60, 60);</pre>
<p>Other special variables keep track of the status of the mouse and keyboard values and much more. These are discussed in <a data-type="xref" href="ch05.html#response">Chapter 5</a>.</p>
</section>
</section>
<section data-type="sect1" data-pdf-bookmark="A Little Math" id="a_little_math">
<h1>A Little Math</h1>
<p>People often assume that math and programming are the same thing. Although knowledge of math can be useful for certain types of coding, basic arithmetic covers the most important parts.</p>
<section data-type="sect2" data-pdf-bookmark="Example 4-4: Basic Arithmetic" id="example_4-4_colon_basic_arithmetic">
<h2><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_04_04">Example 4-4: Basic Arithmetic</a></h2>
<figure>
<img src="images/Ex_04_04.png" alt="Ex 04 04"/>
<figcaption/>
</figure>
<pre data-type="programlisting">size(480, 120);
int x = 25;
int h = 20;
int y = 25;
rect(x, y, 300, h); // Top
x = x + 100;
rect(x, y + h, 300, h); // Middle
x = x − 250;
rect(x, y + h*2, 300, h); // Bottom</pre>
<p>In code, symbols like +, −, and * are called <em>operators</em>. When placed between two values, they create an <em>expression</em>. For instance, 5 + 9 and 1024 − 512 are both expressions. The operators for the basic math operations are:</p>
<table>
<tbody>
<tr>
<td><p>+</p></td>
<td><p>Addition</p></td>
</tr>
<tr>
<td><p>−</p></td>
<td><p>Subtraction</p></td>
</tr>
<tr>
<td><p>*</p></td>
<td><p>Multiplication</p></td>
</tr>
<tr>
<td><p>/</p></td>
<td><p>Division</p></td>
</tr>
<tr>
<td><p>=</p></td>
<td><p>Assignment</p></td>
</tr>
</tbody>
</table>
<p>Processing has a set of rules to define which operators take precedence over others, meaning which calculations are made first, second, third, and so on. These rules define the order in which the code is run. A little knowledge about this goes a long way toward understanding how a short line of code like this works:</p>
<pre data-type="programlisting">int x = 4 + 4 * 5; // Assign 24 to x</pre>
<p>The expression 4 * 5 is evaluated first because multiplication has the highest priority. Second, 4 is added to the product of 4 * 5 to yield 24. Last, because the assignment operator (the <em>equal</em> symbol) has the lowest precedence, the value 24 is assigned to the variable x. This is clarified with parentheses, but the result is the same:</p>
<pre data-type="programlisting">int x = 4 + (4 * 5); // Assign 24 to x</pre>
<p>If you want to force the addition to happen first, just move the parentheses. Because parentheses have a higher precedence than multiplication, the order is changed and the calculation is affected:</p>
<pre data-type="programlisting">int x = (4 + 4) * 5; // Assign 40 to x</pre>
<p>An acronym for this order is often taught in math class: PEMDAS, which stands for Parentheses, Exponents, Multiplication, Division, Addition, Subtraction, where parentheses have the highest priority and subtraction the lowest. The complete order of operations is found in <a data-type="xref" href="app03.html#order_of_operations">Appendix C</a>.</p>
<p>Some calculations are used so frequently in programming that shortcuts have been developed; it’s always nice to save a few keystrokes. For instance, you can add to a variable, or subtract from it, with a single operator:</p>
<pre data-type="programlisting">x += 10; // This is the same as x = x + 10
y −= 15; // This is the same as y = y - 15</pre>
<p>It’s also common to add or subtract 1 from a variable, so shortcuts exist for this as well. The ++ and −− operators do this:</p>
<pre data-type="programlisting">x++; // This is the same as x = x + 1
y−−; // This is the same as y = y − 1</pre>
<p>More shortcuts can be found in the reference.</p>
</section>
</section>
<section data-type="sect1" data-pdf-bookmark="Repetition" id="repetition">
<h1>Repetition</h1>
<p>As you write more programs, you’ll notice that patterns occur when lines of code are repeated, but with slight variations. A code structure called a <em>for</em> loop makes it possible to run a line of code more than once to condense this type of repetition into fewer lines. This makes your programs more modular and easier to change.</p>
<section data-type="sect2" data-pdf-bookmark="Example 4-5: Do the Same Thing Over and Over" id="example_4-5_colon_do_the_same_thing_over">
<h2><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_04_05">Example 4-5: Do the Same Thing Over and Over</a></h2>
<p>This example has the type of pattern that can be simplified with a <em>for</em> loop:</p>
<figure>
<img src="images/Ex_04_05.png" alt="Ex 04 05"/>
<figcaption/>
</figure>
<pre data-type="programlisting">size(480, 120);
smooth();
strokeWeight(8);
line(20, 40, 80, 80);
line(80, 40, 140, 80);
line(140, 40, 200, 80);
line(200, 40, 260, 80);
line(260, 40, 320, 80);
line(320, 40, 380, 80);
line(380, 40, 440, 80);</pre>
</section>
<section data-type="sect2" data-pdf-bookmark="Example 4-6: Use a for Loop" id="example_4-6_colon_use_a_for_loop">
<h2><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_04_06">Example 4-6: Use a <em>for</em> Loop</a></h2>
<p>The same thing can be done with a <em>for</em> loop, and with less code:</p>
<pre data-type="programlisting">size(480, 120);
smooth();
strokeWeight(8);
for (int i = 20; i &lt; 400; i += 60) {
line(i, 40, i + 60, 80);
}</pre>
<p>The <em>for</em> loop is different in many ways from the code we’ve written so far. Notice the braces, the { and } characters. The code between the braces is called a <em>block</em>. This is the code that will be repeated on each iteration of the <em>for</em> loop.</p>
<p>Inside the parentheses are three statements, separated by semicolons, that work together to control how many times the code inside the block is run. From left to right, these statements are referred to as the <em>initialization</em> (<em>init</em>), the <em>test</em>, and the <em>update</em>:</p>
<pre data-type="programlisting">for (init; test; update) {
statements
}</pre>
<p>The <em>init</em> typically declares a new variable to use within the <em>for</em> loop and assigns a value. The variable name <em>i</em> is frequently used, but there’s really nothing special about it. The <em>test</em> evaluates the value of this variable, and the <em>update</em> changes the variable’s value. <a data-type="xref" href="#flow_diagram_of_a_for_loop">Figure 4-1</a> shows the order in which they run and how they control the code statements inside the block.</p>
<figure id="flow_diagram_of_a_for_loop">
<img src="images/Fig_04_01.png" alt="Fig 04 01"/>
<figcaption>Flow diagram of a for loop.</figcaption>
</figure>
<p>The <em>test</em> statement requires more explanation. It’s always a <em>relational expression</em> that compares two values with a <em>relational operator</em>. In this example, the expression is “i < 400” and the operator is the < (less than) symbol. The most common relational operators are:</p>
<table>
<tbody>
<tr>
<td><p>></p></td>
<td><p>Greater than</p></td>
</tr>
<tr>
<td><p><</p></td>
<td><p>Less than</p></td>
</tr>
<tr>
<td><p>>=</p></td>
<td><p>Greater than or equal to</p></td>
</tr>
<tr>
<td><p><=</p></td>
<td><p>Less than or equal to</p></td>
</tr>
<tr>
<td><p>==</p></td>
<td><p>Equal to</p></td>
</tr>
<tr>
<td><p>!=</p></td>
<td><p>Not equal to</p></td>
</tr>
</tbody>
</table>
<p>The relational expression always evaluates to <em>true</em> or <em>false</em>. For instance, the expression 5 > 3 is <em>true</em>. We can ask the question, “Is five greater than three?” Because the answer is “yes,” we say the expression is <em>true</em>. For the expression 5 < 3, we ask, “Is five less than three?” Because the answer is “no,” we say the expression is <em>false</em>. When the evaluation is <em>true</em>, the code inside the block is run, and when it’s <em>false</em>, the code inside the block is not run and the <em>for</em> loop ends.</p>
</section>
<section data-type="sect2" data-pdf-bookmark="Example 4-7: Flex Your for Loop’s Muscles" id="example_4-7_colon_flex_your_for_loop_apo">
<h2><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_04_07">Example 4-7: Flex Your <em>for</em> Loop’s Muscles</a></h2>
<p>The ultimate power of working with a <em>for</em> loop is the ability to make quick changes to the code. Because the code inside the block is typically run multiple times, a change to the block is magnified when the code is run. By modifying <a data-type="xref" href="#example_4-6_colon_use_a_for_loop">“<a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_04_06">Example 4-6: Use a <em>for</em> Loop</a>”</a> only slightly, we can create a range of different patterns:</p>
<figure>
<img src="images/Ex_04_07.png" alt="Ex 04 07"/>
<figcaption/>
</figure>
<pre data-type="programlisting">size(480, 120);
smooth();
strokeWeight(2);
for (int i = 20; i &lt; 400; i += 8) {
line(i, 40, i + 60, 80);
}</pre>
</section>
<section data-type="sect2" data-pdf-bookmark="Example 4-8: Fanning Out the Lines" id="example_4-8_colon_fanning_out_the_lines">
<h2><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_04_08">Example 4-8: Fanning Out the Lines</a></h2>
<figure>
<img src="images/Ex_04_08.png" alt="Ex 04 08"/>
<figcaption/>
</figure>
<pre data-type="programlisting">size(480, 120);
smooth();
strokeWeight(2);
for (int i = 20; i &lt; 400; i += 20) {
line(i, 0, i + i/2, 80);
}</pre>
</section>
<section data-type="sect2" data-pdf-bookmark="Example 4-9: Kinking the Lines" id="example_4-9_colon_kinking_the_lines">
<h2><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_04_09">Example 4-9: Kinking the Lines</a></h2>
<figure>
<img src="images/Ex_04_09.png" alt="Ex 04 09"/>
<figcaption/>
</figure>
<pre data-type="programlisting">size(480, 120);
smooth();
strokeWeight(2);
for (int i = 20; i &lt; 400; i += 20) {
line(i, 0, i + i/2, 80);
line(i + i/2, 80, i*1.2, 120);
}</pre>
</section>
<section data-type="sect2" data-pdf-bookmark="Example 4-10: Embed One for Loop in Another" id="example_4-10_colon_embed_one_for_loop_in">
<h2><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_04_10">Example 4-10: Embed One <em>for</em> Loop in Another</a></h2>
<p>When one <em>for</em> loop is embedded inside another, the number of repetitions is multiplied. First, let’s look at a short example, and then we’ll break it down in <a data-type="xref" href="#example_4-11_colon_rows_and_columns">“<a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_04_11">Example 4-11: Rows and Columns</a>”</a>:</p>
<figure>
<img src="images/Ex_04_10.png" alt="Ex 04 10"/>
<figcaption/>
</figure>
<pre data-type="programlisting">size(480, 120);
background(0);
smooth();
noStroke();
for (int y = 0; y &lt;= height; y += 40) {
for (int x = 0; x &lt;= width; x += 40) {
fill(255, 140);
ellipse(x, y, 40, 40);
}
}</pre>
</section>
<section data-type="sect2" data-pdf-bookmark="Example 4-11: Rows and Columns" id="example_4-11_colon_rows_and_columns">
<h2><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_04_11">Example 4-11: Rows and Columns</a></h2>
<p>In this example, the <em>for</em> loops are adjacent, rather than one embedded inside the other. The result shows that one <em>for</em> loop is drawing a column of 4 circles and the other is drawing a row of 13 circles:</p>
<figure>
<img src="images/Ex_04_11.png" alt="Ex 04 11"/>
<figcaption/>
</figure>
<pre data-type="programlisting">size(480, 120);
background(0);
smooth();
noStroke();
for (int y = 0; y &lt; height+45; y += 40) {
fill(255, 140);
ellipse(0, y, 40, 40);
}
for (int x = 0; x &lt; width+45; x += 40) {
fill(255, 140);
ellipse(x, 0, 40, 40);
}</pre>
<p>When one of these <em>for</em> loops is placed inside the other, as in <a data-type="xref" href="#example_4-10_colon_embed_one_for_loop_in">“<a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_04_10">Example 4-10: Embed One <em>for</em> Loop in Another</a>”</a>, the 4 repetitions of the first loop are compounded with the 13 of the second in order to run the code inside the embedded block 52 times (4×13 = 52).</p>
<p><a data-type="xref" href="#example_4-10_colon_embed_one_for_loop_in">“<a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_04_10">Example 4-10: Embed One <em>for</em> Loop in Another</a>”</a> is a good base for exploring many types of repeating visual patterns. The following examples show a couple of ways that it can be extended, but this is only a tiny sample of what’s possible. In <a data-type="xref" href="#example_4-12_colon_pins_and_lines">“<a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_04_12">Example 4-12: Pins and Lines</a>”</a>, the code draws a line from each point in the grid to the center of the screen. In <a data-type="xref" href="#example_4-13_colon_halftone_dots">“<a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_04_13">Example 4-13: Halftone Dots</a>”</a>, the ellipses shrink with each new row and are moved to the right by adding the y-coordinate to the x-coordinate.</p>
</section>
<section data-type="sect2" data-pdf-bookmark="Example 4-12: Pins and Lines" id="example_4-12_colon_pins_and_lines">
<h2><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_04_12">Example 4-12: Pins and Lines</a></h2>
<figure>
<img src="images/Ex_04_12.png" alt="Ex 04 12"/>
<figcaption/>
</figure>
<pre data-type="programlisting">size(480, 120);
background(0);
smooth();
fill(255);
stroke(102);
for (int y = 20; y &lt;= height-20; y += 10) {
for (int x = 20; x &lt;= width-20; x += 10) {
ellipse(x, y, 4, 4);
// Draw a line to the center of the display
line(x, y, 240, 60);
}
}</pre>
</section>
<section data-type="sect2" data-pdf-bookmark="Example 4-13: Halftone Dots" id="example_4-13_colon_halftone_dots">
<h2><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Ex_04_13">Example 4-13: Halftone Dots</a></h2>
<figure>
<img src="images/Ex_04_13.png" alt="Ex 04 13"/>
<figcaption/>
</figure>
<pre data-type="programlisting">size(480, 120);
background(0);
smooth();
for (int y = 32; y &lt;= height; y += 8) {
for (int x = 12; x &lt;= width; x += 15) {
ellipse(x + y, y, 16 - y/10.0, 16 - y/10.0);
}
}</pre>
</section>
</section>
<section data-type="sect1" data-pdf-bookmark="Robot 2: Variables" id="robot_2_colon_variables">
<h1><a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Robot2_Variables">Robot 2: Variables</a></h1>
<figure>
<img src="images/NRobot_Variables_Stage_Compiled.png" alt="NRobot Variables Stage Compiled"/>
<figcaption/>
</figure>
<p>The variables introduced in this program make the code look more difficult than Robot 1 (see <a data-type="xref" href="ch03.html#robot_1_colon_draw">“<a href="http://examples.oreilly.com/0636920000570/interactive_examples/index.php?example=Robot1_Draw">Robot 1: Draw</a>”</a> in <a data-type="xref" href="ch03.html#draw">Chapter 3</a>), but now it’s much easier to modify, because numbers that depend on one another are in a single location. For instance, the neck can be drawn based on the <em>bodyHeight</em> variable. The group of variables at the top of the code control the aspects of the robot that we want to change: location, body height, and neck height. You can see some of the range of possible variations in the figure; from left to right, here are the values that correspond to them:</p>
<table>
<thead>
<tr>
<th><code>y = 390</code>
<code>bodyHeight = 180</code>
<code>neckHeight = 40</code></th>
<th><code>y = 460</code>
<code>bodyHeight = 260</code>
<code>neckHeight = 95</code></th>
<th><code>y = 310</code>
<code>bodyHeight = 80</code>
<code>neckHeight = 10</code></th>
<th><code>y = 420</code>
<code>bodyHeight = 110</code>
<code>neckHeight = 140</code></th>
</tr>
</thead>
</table>
<p>When altering your own code to use variables instead of numbers, plan the changes carefully, then make the modifications in short steps. For instance, when this program was written, each variable was created one at a time to minimize the complexity of the transition. After a variable was added and the code was run to ensure it was working, the next variable was added:</p>
<pre data-type="programlisting">int x = 60; // x-coordinate
int y = 420; // y-coordinate
int bodyHeight = 110; // Body Height
int neckHeight = 140; // Neck Height
int radius = 45; // Head Radius
int ny = y - bodyHeight - neckHeight - radius; // Neck Y
size(170, 480);
smooth();
strokeWeight(2);
background(204);
ellipseMode(RADIUS);
// Neck
stroke(102);
line(x+2, y-bodyHeight, x+2, ny);
line(x+12, y-bodyHeight, x+12, ny);
line(x+22, y-bodyHeight, x+22, ny);
// Antennae
line(x+12, ny, x-18, ny-43);
line(x+12, ny, x+42, ny-99);
line(x+12, ny, x+78, ny+15);
// Body
noStroke();
fill(102);
ellipse(x, y-33, 33, 33);
fill(0);
rect(x-45, y-bodyHeight, 90, bodyHeight-33);
fill(102);
rect(x-45, y-bodyHeight+17, 90, 6);
// Head
fill(0);
ellipse(x+12, ny, radius, radius);
fill(255);
ellipse(x+24, ny-6, 14, 14);
fill(0);
ellipse(x+24, ny-6, 3, 3);
fill(153);
ellipse(x, ny-8, 5, 5);
ellipse(x+30, ny-26, 4, 4);
ellipse(x+41, ny+6, 3, 3);</pre>
</section>
</section>
</body>
</html>