Class 2 | NYUAD Mobile Media

Setup and Draw

So far, we have just been writing code without placing that code into any methods. This is a great way for us to get started but in order to move forward we need to take the next step.

Processing has two special methods that we can define in our sketches.

Setup()
The setup method is run once, at the beginning of the execution of any processing sketch. It is typically used to set things like background, size and other static items.

        void setup()
        {
            // YOUR CODE IS RUN ONCE
        }

Draw()
The draw method is executed in a loop. It is run continuously throughout the execution of the processing applet.

        void draw()
        {
            // YOUR CODE IS RUN OVER AND OVER AGAIN
        }

Here is a common use of setup():

        int myint = 0;  // Notice this is outside of setup().  You can declare and assign variables outside of setup but you can not call methods or issue other commands outside of a method.

        void setup()
        {
            size(500,500);
            background(255,255,255);
            frameRate(15);  // Defines how many times per second draw() will run
            fill(255,0,0);
            stroke(0,0,0);
            strokeWeight(10);
        }

Here is a simple draw() which includes some variable usage (see the int myint = 0 line above):

        void draw()
        {
            rect(myint,myint,50,50);  
            myint = myint + 1;
        }

If we copy these lines of code into Processing we will see a rectangle move from the top left of the screen down to the bottom right. The obvious analogy here is that of animation. The setup function sets up our window and the draw function runs every 15 seconds and gives us the appearance of movement.

Processing

Processing is a free and Open Source Java based IDE and an API.

Java is at the lower end of high level languages, it is equally good at many tasks and is easy to understand if you have a background in lower level languages like C as well as for those with higher level language skills (JavaScript, Perl, PHP and so on).

Processing takes this one step further and makes Java useful to those with no or minimal programming experience while leaving in place the full functionality of Java for those with experience.

Download and Install it: http://www.processing.org/

Unless you work on the lab machines only (which have Processing installed already) you will need to download it. (If you are downloading it for Windows, make sure you get the version with Java, not the version without Java.)

IDE stands for Integrated Development Environment. It is the editor you write a program in and the means to compile and test. The Processing IDE is very simple and easy to understand.

Open up Processing and go through the IDE

Try out the commands under the File menu: New, Save, Sketchbook Examples, Export

Try out the commands under the Sketch menu: Run, Stop

Your best friend will be the Help menu: Reference

It has buttons for quick access to: Run, Stop, Export

API stands for Application Programming Interface. It is the code or statements that the language supports. Processing has it’s own language for programming that is based upon Java (actually it is simplified Java). Processing also supports normal Java but we will get to that later.

Modes:

Processing has 3 modes of operation, basic (the mode we will start in), continuous (the mode we will work in most of the time) and Java (the mode we will introduce later in the semester).

In basic mode, you can simply start inserting Processing commands or functions.

Coordinate System:

All programming languages that allow you to draw to the screen use coordinate systems in one form or another. Generally these coordinate systems reference pixels (picture elements).

Processing (and most other languages) reference the 0 point of the window (both x and y axis) as the top left corner and work from there. Going down increases the value of the y axis and going to the right increases the value of the x axis. Therefore the point (10,15) in the form (x,y) would be 10 pixels to the right and 15 pixels down from the top left corner of the window.

Commands:

Make this reference your best friend.

We are going to start with the very basics that you will need to get your homework done.

point(x,y) As the name implies, this draws a point on the screen at the specific x and y coordinates. This is a pixel (picture element).

To write this command in Processing, simply type: point(10,10); and click run. If you squint you can probably a black dot 10 pixels from the top and 10 pixels from the left. Point Reference

You will notice that all commands end with a semicolon. This is a Java standard and consistent through many programming languages.

line(x1,y1,x2,y2) Draws a line from (x1,y1) to (x2,y2). As an example: line(10,15,30,30); draws a line from the point 10 pixels to the left, 15 pixels down to the point 30 pixels from the left and 30 pixels down. Line Reference

size(width, height) Sets the size of the canvas that you are drawing on. size(100,100); would make the canvas 100 pixels wide by 100 pixels tall. Size Reference

background(grayvalue) Sets the background color of the canvas to the specified grayscale value. A gray value of 0 means black whereas a value of 255 means white. background(127); would fill the background with a medium gray color.

background(redvalue, greenvalue, bluevalue) Sets the background color of the canvas to the specified value. Processing (and most other color representations on the computer) use an additive color space. Think of it like the sun, the absense of the sun makes it dark or black whereas full sun light would be white. Colors are mixed out of the additive primaries of red, green and blue. Again, as with the gray scale values, these go from 0 to 255 (which is 8 bits per channel).

You may have noticed that there are two background() functions listed. This means that background() is overloaded. Processing (Java) considers a function to be the total of it’s signature, that is, for our purposes it’s name and the number of it’s arguments. background() with one argument is the first function and background with 3 arguments is the second. We couldn’t have another background that only takes one value but does something other than the the first one.

fill(grayvalue) or fill(redvalue,greenvalue,bluevalue) An overloaded function (like background()) that specifies the fill color for any shape that is to draw on the screen.

noFill() turns off the fill for any shape that is to draw on the screen. The shape will be transparent.

stroke(grayvalue) or stroke(redvalue,greenvalue,bluevalue) Specifies the color to be used for drawing anything to the screen (line, point, shapes).

noStroke() Turns off the stroke color for shapes, effectively making their outline transparent.

rect(x, y, width, height) Draws a rectangle with the specified width and height at the specified x and y position.

rectMode(MODE) MODE can be: CORNERS or CENTER. Changes the mode for drawing a rectagle. CORNERS means that the x and y coordinates specified will be the top left corner or the rectangle. CENTER means that the x and y coordinates specified will be the center point of the rectangle.

At this point, you should be comfortable enough with the reference material to look the following commands up on your own:

ellipse() Ellipse Reference

ellipseMode() EllipseMode Reference

triangle()

Comments

Comments are very important to programming. They allow you and others to understand your code. You should immediately get into the habit of commenting everything you do in Processing.

To create a comment, in your code, simply prepend the line with a double slash “//”.

// This is a comment

If you are entering multiple lines for a comment, you can start the comment with a slash and asterisk and end with an asterisk and a slash.

/* Enter comments Here

More comments */

Errors

At this point you will have undoubtly run upon an error in your code. Processing puts error messages down the red bar between the output window and code window.

Unfortunately, Processing’s error reporting isn’t the greatest in the world and it takes some getting used to to be able to identify the exact error.

For instance: I opened up Processing and typed “test” into the code window and hit run. Processing reported: “unexpected token: test” in the red bar. In other words, Processing didn’t understand “test” as it is not a command in the language.

For another example: I typed “line(10,10,50,50)” leaving out the semicolon.

Processing reported: “unexpected token: null” Meaning: Processing was looking for something but found nothing (null). In this case it was looking for the “;” semicolon.

Processing for Android

Wiki Page http://wiki.processing.org/w/Android

NYUAD Mobile Media

Notes for NYU Abu Dhabi Mobile Media Course Taught by Shawn Van Every, Spring 2012

Category Archives: Class 2

Setup and Draw

Hello Processing

Hello App Inventor

Hello Android