Write Your First Android Sketch

Go ahead and launch Processing from the applications directory. The IDE launches, opening an empty sketch window as shown in Figure 2, The Pro-cessing IDE In Java Mode, on page 7.

8. http://developer.android.com/sdk/installing.html

Figure 2—The Processing IDE In Java Mode. We edit code directly within the sketch window shown here.

Since you’ve launched the application for the first time, Processing has just created a sketchbook folder for you, located in ^Documents on the hard-drive – independent of the OS you are developing on. I recommend you save all your sketches to this sketchbook location. Then, Processing can list them for you within the IDE (see ^Open... dialog). Also, when you update to future Processing versions, the sketchbook loads up exactly the same way as before.

Explore the Processing IDE

The toolbar on top of the sketch window contains the key features of the IDE with a Run button to launch and a Stop button to stop your apps. Next to those are the ^New, ^Save, ^Open, and ^Export buttons that explain themselves pretty well.

Write Your First Android Sketch

•

You can find a more detailed description of the sketchbook and the IDE in the "Processing Development Environment" tutorial on the Processing website.⁹ When you start Processing for the first time, it defaults to Java mode, as indicated on the right hand side of the toolbar. This area functions also as drop-down menu allowing us to switch between the three modes the Processing IDE provides: ^Java, ^Android. and ^JavaScript. Depending on which mode we’ve selected, the ^Run and ^Export buttons on the toolbar produce different results, listed next.

Java mode ^Run displays a program window to view the sketch running on the desktop computer

Export produces a standalone application for Mac OS, Windows, and Linux, independent of the operating system you are developing on

Android mode ^Run launches the app on the Android device

Export creates a Android package for Google Play, a feature currently under development

JavaScript mode^{10 Run} launches a web page in the default browser with a Pro-cessing JavaScript canvas showing the sketch

Export creates a Web package including all dependent files for upload to a Web server

A tab below the toolbar shows the current sketch name, which defaults to one containing the current date if the sketch has not been saved yet. Process-ing prompts us to provide another filename as soon as we save the sketch.

The right-arrow button to the right of the tab allows us to add more tabs if we’d like to split the code into separate sections. As sketches grow in scope an complexity, the use of tabs can be a great way to reduce clutter, separating classes and methods for different purposes into distinct tabs. Each tab is saved as a separate Processing source file, or ^.pde, in the sketch folder.

The text editor shown in white below the tab on page 7 is the actual area where we write and edit code. The line number of our current cursor location within the code is shown at the very bottom of the sketch window.

The message area and console below the text editor provide us with valuable feedback as we develop and debug.

9. http://processing.org/reference/environment/

10. http://processing.org/learning/javascript/

You can always find more information on the key IDE features discussed here as well as a summary of the installation on the ^Learning page of the Processing website.¹¹

Now that you know how to work with the Processing editor, it’s time to write our first sketch.

Understand the Structure of a Sketch

Any Processing sketch that will interact with users or make use of animated graphics—as is the case for all the sketches in this book — must include two methods:

• an instance of the ^setup() method, which initializes key variables and set-tings the sketch will use, executed only once when the app starts up, and

• an instance of the ^draw() method, which continuously updates or re-draws the screen to respond to user input and real time events.

If we re-draw the screen fast enough, users will perceive individual images or frames as continuous movement. It’s a principle of film and animation we have all experienced.¹²

A typical Processing sketch starts by defining the global variables it uses, followed by a ^setup() and a ^draw() method. ^setup() is called exactly once when you start a sketch to initialize key parameters. For instance, we can set a particular window ^size(), screen orientation(), or load custom fonts and media assets. ^setup() is responsible for taking care of everything we need to do once to configure a sketch.

The ^draw() method, in contrast, is called repeatedly to update the screen, 60 times per second by default. We can adjust this rate using the frameRate() method. If our drawings are complex, or they require substantial amounts of processor power to compute, Processing might not always be able to keep up with the ⁶⁰ fps frame rate. We can always get some information on the current playback rate through the ^frameRate constant Processing provides to us. As a point of reference, cinema film runs at 24fps, digital video typically at 30fps.

Neither ^setup() nor ^draw() accepts parameters. They are ^void methods and do not return values. Both are used in virtually every Processing sketch.

11. http://processing.org/learning/gettingstarted/

12. http://en.wikipedia.org/wiki/Persistence_of_vision

Write Your First Android Sketch

•

Write a Sketch

Let’s now say “Hi” to Processing by creating a simple sketch that draws an ellipse repeatedly at the current cursor position. We’ll add some complexity to its graphical output by having the ellipse expand or contract along its vertical and horizontal axes depending on how fast we move the mouse across the screen. This basic drawing sketch, shown in Figure 3, A simple sketch, on page 10, gives us immediate visual feedback and uses your mouse as input. As we move along, experiment and play with parameter values to better understand them.

Figure 3—A simple sketch. With the ellipse drawing primitive, Processing can generate dynamic output. On the left, a 100 x 100 pixel window; on the right, a 400 x 400 pixel window.

We use a single drawing primitive for this sketch, the ^ellipse(), also used to draw circles by way of providing equal width and height for the ellipse. In Processing, an ellipse(x, y, width, height)¹³ requires four parameters:

• the horizontal ^x position of the ellipse center

13. http://processing.org/reference/ellipse_.html

• the vertical y position of the ellipse center

• the ellipse ^width

• and the ellipse ^height

The following snippet contains the code we’ll need for our sketch. Go ahead and type this into the text editor, as illustrated in Figure 4, Writing code in the Processing IDE, on page 12:

void setup() {

}

void draw() {

ellipse(mouseX, mouseY, mouseX-pmouseX, mouseY-pmouseY);

}

We want the position of the ellipse to follow the mouse, and for this, we need to know where the mouse is located at any given moment. Processing stores this information, relative to the upper left-hand corner of the display window, in two constants: ^mouseX and ^mouseY. Both constants return the current pixel location of the mouse relative to the origin of the display window. In Process-ing, the coordinate ^{[0, 0]} is in the upper left corner of the window. [width-1, height-1] is located at the lower right.

We’ll use the ^mouseX and ^mouseY to set the horizontal and vertical position of the ellipse center. For the ^width and ^height) parameters of the ellipse, we’ll use two additional constants: ^pmouseX and ^pmouseY constant. ^pmouseX and ^pmouseY store the previous mouse position, one frame ago. If we move the mouse, we can calculate the mouse speed by subtracting the previous from the current mouse position. By subtracting mouseX from pmouseX, we determine the hori-zontal mouse travel distance in pixels within on frame, or one 60th of a second.

We use the same approach for the vertical trajectory, by subtracting ^pmouseY from ^mouseY for the vertical speed. ^pmouseX and ^pmouseY are lesser known and more rarely used than ^mouseX and ^mouseY, but they’re very useful when we are interested in the speed of the mouse.

Write Your First Android Sketch

•

Figure 4—Writing code in the Processing IDE. A sketch typically includes at least two methods: setup() and draw(). When we run the sketch, the display window shows the program

running up left.

Run the Sketch

Go ahead and ^Run the sketch by pressing the play button, Processing will open a display window whose default size is 100 by 100 pixels, as shown in Figure 3, A simple sketch, on page 10. Alternatively, you can select ^Sketch→ Run on the Processing menu bar. When the window appears, place your mouse pointer there and move it around.

If we move the mouse quickly from left to right, or up and down, the ellipse width and height increase respectively, depending on where we are heading.

Drawing in such a small sketch window restricts our mouse movement, so let’s use the ^size() method to increase the window size to ^{[400, 400]}, as shown in Figure 3, A simple sketch, on page 10. We add the ^size() method to ^setup(), because we need to define the window size only once when we start up the sketch. In a typical Processing sketch, the idea is to keep everything strictly away from ^draw(), so the application doesn’t get bogged down executing extra statements at the rate of 60 times per second.

Go ahead and add the following statements to setup() in your Processing text editor:

size(400, 400);

Now re-run the sketch. With a bit more pixel real-estate (400x400px), we now have the space to build up some speed.

Save the Sketch

Let’s finish by saving the sketch as basicDrawing.pde into the ^Processing sketchbook, located in ^Documents on the hard-drive. When the sketch is saved, the tab is renamed to the current sketch name. Press ^Open in the toolbar, and you can see your sketch listed on top in the sketchbook.

You’ve just completed your first Processing sketch in Java mode. Time now to make an Android app from the sketch, and run it in the Android Emulator.