IAT 334

Java using Processing

______________________________________________________________________________________

SCHOOL OF INTERACTIVE ARTS + TECHNOLOGY [SIAT] | WWW.SIAT.SFU.CA

Processing

• Processing is built on top of Java

• Supports script-like coding– Easy to get simple programs up fast– But allows transition to full Java programming

• Has built-in methods and classes to make drawing easy

• Easy to export program to applet

May 21, 2010 IAT 334 2

Playing around

• To learn how to program it is necessary to play around with code!!!– Don’t just wait for me to show you things

• Processing makes this easy– Use the Reference in the Help menu– or www.processing.org/reference– Play with the examples

May 21, 2010 IAT 334 3

Saving your work• You should install Processing on your own machine – Do this immediately

• Processing saves all projects in a directory you can select via preferences– You should always copy your code to your local disk– Don’t depend on your project remaining undisturbed on

lab machines

May 21, 2010 IAT 334 4

Drawing in Processing

• Automatic creation of display window

• Window has a coordinate system for drawing

May 21, 2010 IAT 334 5

x

y

0 50 1000

50

100

Let’s draw a point: point()

point(x,y) – draws a point at the location x, y

Let’s try it: point(50, 50)Unexpected token: null – what ??

• Compiler errors appear in the bottom pane

All lines must be terminated with a semicolon ;

May 21, 2010 IAT 334 6

Drawing several points

point( 30, 20 ); point( 85, 20 ); point( 85, 75 ); point( 30, 75 );

May 21, 2010 IAT 334 7

Comments• Comments are non-program text you put in the file to describe to

others (and yourself) what you’re doing

• Important for being able to look back at your code and understand it

• Single-line comments begin with //

• Multi-line comments begin with /* and end with */

Commenting and uncommenting lines is useful for figuring out code

May 21, 2010 IAT 334 8

Drawing shapes: some primitivesline(x1, y1, x2, y2);

triangle(x1, y1, x2, y2, x3, y3);

rect(x, y, width, height);rectMode() – CORNER, CORNERS, CENTER

ellipse(x, y, width, height);ellipseMode() – CENTER, CENTER_RADIUS, CORNER, CORNERS

Don’t use these draw modes!!! rectMode(), ellipseMode()

May 21, 2010 IAT 334 9

Controlling color and lineColors represented as Red Green Blue (RGB) values

Each one ranges from 0 to 255Can also use Hue Saturation Value (HSV) space, but we won’t worry about this for now

background(R,G,B); – set the background color

stroke(R,G,B); – set the colors of the outline (default black)noStroke(); – no outline drawing around shapes

fill(R,G,B); – set the fill color for shapes (default white)noFill(); – don’t fill the shapes (background shows through)

strokeWeight(w); – line width for outlines (default 1)

May 21, 2010 IAT 334 10

Drawing primitives revisited

• What are the different syntax parts of a drawing primitive?

line( 0, 0, 50, 50 );

May 21, 2010 IAT 334 11

method name

parentheses contain arguments

arguments,parameters

The drawing commands are methods• Methods are reusable commands – Like a little machine that does work for you– Let’s you reuse code without typing it over and over

• The arguments tell the method precisely what to do

• We’ll see later that you can define your own methods!

May 21, 2010 IAT 334 12

Introduction to variables

• A variable is a named box for storing a value

• You can put values in a variable by using the assignment operator (aka “=“ )e.g. x = 1;

• To use the value stored in a variable, just use the variable’s namee.g. line(x, 0, 50, 50);

May 21, 2010 IAT 334 13

Variables have a type

• You must tell Processing (Java) what kinds of values can go in the box

• You do this by giving a variable a type

May 21, 2010 IAT 334 14

int x; // variable x can hold integers (int)int y; // variable y can hold integers (int)

x = 20; // store 20 in xy = 30; // store 30 in ypoint(x, y); // use the values of x and y to draw a point

Effect of creating an int variable

May 21, 2010 IAT 334 15

// Single intint anInt;

// Put a value in the intanInt = 3;

// Type error!anInt = “hello”;

Code Effect

Name: anInt, Type: int

3

Name: anInt, Type: int

Name: anInt, Type: int

“hello”

Can’t shove “hello” into an int

Assigned values must match the type

May 21, 2010 IAT 334 16

int x; // variable x can hold integers (int)int y; // variable y can hold integers (int)

x = 1.5; // store 1.5 in x causes an error!!!y = 30; // store 30 in ypoint(x, y); // use the values of x and y to draw a point

Why Types?

• Tells system (and you) what kind of values to expect

• System uses type to detect errors

int pi = 3.14 ; // error: 3.14 not an int

May 21, 2010 IAT 334 17

The “primitive” types

int – integers between 2,147,483,648 and 2,147,483,647

float – floating point numbers (e.g. 3.1415927, -2.34)

char – a single character (e.g. ‘c’)

byte – integers between -128 and 127

boolean – holds the values true or false

color – holds a color (red, green, blue, alpha)

May 21, 2010 IAT 334 18

Can combine declaring and assigning

• Declaring a variable means telling Processing its typeint x;

• Assigning a value to a variable means putting a value in the named boxx = 1;

• You can declare and assign at the same timeint x = 1;

• But only declare a variable once, otherwise you get an error

May 21, 2010 IAT 334 19

Print and println

• When working with variables, it is often convenient to look at their values

• print() and println() print to the bottom processing pane– They do the same thing, except println starts a

new line after printing

May 21, 2010 IAT 334 20

Control flow

• By default Processing (Java) executes the lines of a method one after the other– Sequential control flow– Unconditional – doesn’t matter what happens in the world

• Often we want which steps are executed to depend on what else has happened

• That is, we want conditional control flow– This is necessary in order to make anything that is interactive

May 21, 2010 IAT 334 21

If

if statements introduce conditional branches

if ( <boolean expression> ){// do this code

}

<boolean expressions> have one of two values: true or false

May 21, 2010 IAT 334 22

Some boolean expressions

May 21, 2010 IAT 334 23

anInteger == 1 true if variable anInteger is equal to 1

x > 20 true if variable x is greater than 20

1 == 2 true if 1 is equal to 2, it’s not so this is false

! is the not operator – reverses true and false so, ! (1 == 2) is true

This is not a boolean expression:int anInteger = 1;

Example

Try changing the values of drawRect and drawAnXMay 21, 2010 IAT 334 24

strokeWeight(2); // draw with heavier linestroke(200, 0, 0); // draw with red lineboolean drawRect = true; boolean drawAnX = true;

if (drawRect) { fill(0, 200, 0); // fill with green rect(30, 30, 40, 40);}if (drawAnX) { line(0, 0, 100, 100); line(100, 0, 0, 100);}

Loops

• Sometimes you want to execute code multiple times– E.g. draw() is being called in a loop

• Java provides a number of looping mechanisms

• They all test some boolean expression (just like an if statement does) and continue to execute code while the expression is true

May 21, 2010 IAT 334 25

while loops

while( <boolean exp.> ) {

<code to execute each time>}

• Repeatedly executes the code body while the boolean expression is true

May 21, 2010 IAT 334 26

for loopsfor( <init. statement> ; <boolean expression> ; <final

statement> ) {

<code to execute each time in loop>}

First executes the initialization statement• Then tests the boolean expression – if it's true, executes

the code once• Then repeats the following:

– execute final statement, – test boolean expression execute code if true

May 21, 2010 IAT 334 27

Converting for to while• Seeing how for loops can be converted to while loops helps you

understand forfor( <init. statement> ; <boolean exp.> ;

<final statement> ) {

<code>} // is the same as

<init. statement> ;while( <boolean exp.> ) { <code> <final statement> ;}

May 21, 2010 IAT 334 28

setup()

setup() is a predefined Processing method that you define

setup() is called once when a sketch first starts executing

• Place any startup code in setup(), eg.– Setting the size– Setting the background color– Initializing variables…

May 21, 2010 IAT 334 29

draw()

draw() is a predefined Processing method that you define

draw() is called repeatedly by the Processing system

• Put code in draw() when you need to constantly update the display (for example, animating an object)

May 21, 2010 IAT 334 30

Example of setup() and draw()

int x;int y;

void setup() {size(400, 400);background(0);x = 0; y = height/2;

}

void draw() {background(0);ellipse(x, y, 20, 20);x = x + 1; if (x > width) x = 0;

}

May 21, 2010 IAT 334 31

setup() and draw() are examples of callbacks

• A callback function is defined by the programmer– The callback gets called in response to some

internal event– You usually don’t call callback functions directly

with your own code.– setup() and draw() are predefined within

Processing as to-be-called-if-defined

May 21, 2010 IAT 334 32

Controlling draw()

• frameRate() can be used to set the number of times per second that draw() is called– frameRate(30) says to call draw() 30 times a second (if the computer is capable)

• delay() delays execution for a certain number of milliseconds– delay(250) delays for 250 milliseconds (1/4 of a sec.)– You can use delay() or frameRate() to determine how fast you want draw() to be called –

frameRate() is probably easier

• noLoop() tells the system to stop calling draw() – If you want to, for example, turn off animation

• loop() tells the system to start calling draw() again– Use noLoop() and loop() together to turn repeated drawing on and off

May 21, 2010 IAT 334 33

June 4, 2010 IAT 334 34

Now I’d like to specify rotation • To rotate the figure, I’d need to figure out the new position of the

vertices– Too hard!

• Instead of rotating the figure, rotate the paper– As long as I’m rotating the paper, I may as well slide it around as well

• To prepare for translating and rotating, first draw the figure centered around the origin (0,0)

June 4, 2010 IAT 334 35

Add translation and rotation

void drawRocket(int x, int y, float rot) { final int halfHeight = 10; final int halfWidth = 10;

translate(x, y); rotate(rot);

triangle(0, -halfHeight, -halfWidth, halfHeight, halfWidth, halfHeight);

rectMode(CORNERS); rect(-halfWidth + 5, halfHeight, -halfWidth + 8, halfHeight + 3); rect(halfWidth - 8, halfHeight, halfWidth - 5, halfHeight + 3);}

Let’s try drawing several rockets

June 4, 2010 IAT 334 36

Works fine for one call…

• But when we call it twice, it doesn’t seem to work– Looks like first call messes up subsequent calls

• What happening is that, when you move the paper (translate, rotate) the paper stays moved

• Subsequent paper moves (additional translates and rotates) build on top of the previous ones

• What we want is to move the paper, draw, and move it back

• We need pushMatrix() and popMatrix()– pushMatrix() remembers the previous paper position (previous transformation matrix)– popMatrix() restores the paper to the remembered position (restores the transformation

matrix)

June 4, 2010 IAT 334 37

Using pushMatrix() and popMatrix()

void drawRocket(int x, int y, float rot) { final int halfHeight = 10; final int halfWidth = 10;

pushMatrix();

translate(x, y); rotate(rot);

triangle(0, -halfHeight, -halfWidth, halfHeight, halfWidth, halfHeight);

rectMode(CORNERS); rect(-halfWidth + 5, halfHeight, -halfWidth + 8, halfHeight +

3); rect(halfWidth - 8, halfHeight, halfWidth - 5, halfHeight + 3);

popMatrix();}

Mouse variables

• mouseX and mouseY – variables that automatically contain the current mouse location– pmouseX and pmouseY hold the previous location

• mousePressed – boolean variable that is true if a mouse button is down– mouseButton – value is LEFT, RIGHT or CENTER

depending on which button is held down

May 21, 2010 IAT 334 38

Mouse callback methods• There are several built-in methods you can fill in to

process mouse eventsmousePressed() mouseReleased() mouseMoved() mouseDragged()

Example:void mousePressed() { if( mouseButton == LEFT ){ println( “Left Mouse Button was pressed” ); loop(); // activate drawing again }}

May 21, 2010 IAT 334 39