IAT 355
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 7, 2014
IAT 355
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 7, 2014
IAT 355
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
May 7, 2014
IAT 355
4
Drawing in Processing

Automatic creation of display window

Window has a coordinate system for drawing
0
0
50
100
x
50
100
y
May 7, 2014
IAT 355
5
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 7, 2014
IAT 355
6
Drawing several points
point(
point(
point(
point(
May 7, 2014
30,
85,
85,
30,
20
20
75
75
);
);
);
);
IAT 355
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 7, 2014
IAT 355
8
Drawing shapes: some
primitives
line(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 7, 2014
IAT 355
9
Controlling color and line
Colors represented as Red Green Blue (RGB) values
Each one ranges from 0 to 255
Can 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 7, 2014
IAT 355
10
Drawing primitives revisited
 What
are the different syntax parts of a
drawing primitive?
method name
line( 0, 0, 50, 50 );
arguments,
parameters
parentheses contain arguments
May 7, 2014
IAT 355
11
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 7, 2014
IAT 355
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 name
e.g. line(x, 0, 50, 50);
May 7, 2014
IAT 355
13
Variables have a type
 You
must tell Processing (Java) what
kinds of values can go in the box
 You
int x;
int y;
do this by giving a variable a type
// variable x can hold integers (int)
// variable y can hold integers (int)
x = 20; // store 20 in x
y = 30; // store 30 in y
point(x, y); // use the values of x and y to draw a point
May 7, 2014
IAT 355
14
Effect of creating an int
variable
Code
Effect
Name: anInt, Type: int
// Single int
int anInt;
// Put a value in the int
anInt = 3;
Name: anInt, Type: int
// Type error!
anInt = “hello”;
May 7, 2014
Name: anInt, Type: int
3
“hello”
Can’t shove “hello” into an int
IAT 355
15
Assigned values must match
the type
int x;
int y;
// variable x can hold integers (int)
// variable y can hold integers (int)
x = 1.5;
y = 30;
point(x, y);
// store 1.5 in x causes an error!!!
// store 30 in y
// use the values of x and y to draw a point
May 7, 2014
IAT 355
16
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 7, 2014
IAT 355
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 7, 2014
IAT 355
18
Can combine declaring and
assigning

Declaring a variable means telling Processing its type
int x;

Assigning a value to a variable means putting a value in
the named box
x = 1;

You can declare and assign at the same time
int x = 1;

But only declare a variable once, otherwise you get an
error
May 7, 2014
IAT 355
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 7, 2014
IAT 355
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 7, 2014
IAT 355
21
If
if statements introduce conditional branches
if ( <boolean expression> )
{
// do this code
}
<boolean expressions> have one of two values:
true or false
May 7, 2014
IAT 355
22
Some boolean expressions
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;
May 7, 2014
IAT 355
23
Example
strokeWeight(2); // draw with heavier line
stroke(200, 0, 0); // draw with red line
boolean 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);
}
Try changing the values of drawRect and drawAnX
May 7, 2014
IAT 355
24
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 7, 2014
IAT 355
25
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 7, 2014
IAT 355
26
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 7, 2014
IAT 355
27
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 7, 2014
IAT 355
28
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 of it)

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 7, 2014
IAT 355
29
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 7, 2014
IAT 355
30
Mouse callback methods

There are several built-in methods you can fill in
to process mouse events
mousePressed()
mouseMoved()
mouseReleased()
mouseDragged()
Example:
void mousePressed()
{
if( mouseBotton == LEFT ){
println( “Left Mouse Button was pressed” );
loop(); // activate drawing again
}
}
May 7, 2014
IAT 355
31
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 7, 2014
IAT 355
32
while loops
while( <boolean exp.> )
{
<code to execute each time>
}
 Repeatedly
executes the code body while
the boolean expression is true
May 7, 2014
IAT 355
33
for loops
for( <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
May 7, 2014
IAT 355
code if true
34
Converting for to while
Seeing how for loops can be converted to while loops helps
you understand for
for( <init. statement> ; <boolean exp.> ; <final statement> )
{

<code>
}
// is the same as
<init. statement> ;
while( <boolean exp.> )
{
<code>
<final statement> ;
}
May 7, 2014
IAT 355
35
Reading time
int hour()
– returns the hour (0 – 23)
int minute() – returns the minutes (0 – 59)
int second() – returns the seconds (0 – 59)
int day()
– returns the day of the month (1 -31)
int month()
– returns the month (1 – 12)
int year()
– returns the four digit year (e.g. 2004)
float milliseconds() – returns number of millis since start of app
May 7, 2014
IAT 355
36
draw() has nothing to do with
time



The value returned by second() or milliseconds() has
nothing to do with how often draw() is called
In draw() you draw frames – you don’t know how often
it will be called
Put a println in loop to see how often it gets called
long lastTimeLoopWasCalled = 0;
void draw()
{
long milliseconds = millis();
println(milliseconds - lastTimeLoopWasCalled);
lastTimeLoopWasCalled = milliseconds ;
}
May 7, 2014
IAT 355
37
Arrays
 An
array is a contiguous collection of
data items of one type
 Allows you to structure data
– Accessed by index number
May 7, 2014
IAT 355
38
Effect of creating an int
variable
Code
Effect
Name: anInt, Type: int
// Single int
int anInt;
// Put a value in the int
anInt = 3;
Name: anInt, Type: int
// Type error!
anInt = “hello”;
May 7, 2014
Name: anInt, Type: int
3
“hello”
Can’t shove “hello” into an int
IAT 355
39
Creating an array of ints
Code
Effect
Name: intArray, Type: int[]
// declare byte array
int[] intArray;
// initialize byte array
intArray = new int[5];
1
2
3
4
0
0
0
0
0
each element has type int
// set first element
intArray[0] = 3;
// set third element
intArray[2] = 5;
May 7, 2014
0
IAT 355
0
1
2
3
4
3
0
0
0
0
0
1
2
3
4
3
0
5
0
0
40
Practice reading code

If code is a medium, then it can be both written and

Reading code reveals
read
–
–
–
–
New programming constructs
Strategies and techniques (design patterns)
Style
Philosophical assumptions (deep reading)
May 7, 2014
IAT 355
41