Intro to Processing

Intro to Processing Game with US Beginner Tutorial

Welcome!! • Who I am • What is Processing? • Basic Coding • Input • Methods • Images • Classes • Arrays

Who I am • Mike Sheinin • mike.sheinin@usask.ca • Interactive Systems Design • Computer Science • Jelly Polo: https://www.youtube.com/watch?v=U-tEU-lVArE

What is Processing? • Text-based drawing program • Similar to Java • http://www.processing.org • http://www.openprocessing.org

Basic Coding • Processing basics • Commands • Variables • Conditionals • Iteration

Processing basics • void setup() • Runs once • void draw() • Runs until the program ends • size(x, y) • background(r, g, b) • (0, 0) is top left • size(200, 200) means the bottom right is (200, 200)

Processing basics • The semi-colon ; • UPPER and lower case • Whitespace • Variable types • Object-oriented programming language • = is assignment • == is comparison

Processing basics • && is and • || is or • // and /*...*/ are comments • ! Means not • != means not equal to • {} curly brackets for code blocks

Commands • line(x, y, x2, y2); • ellipse(x, y, r, r); • rect(x, y, w, h); • point(x, y); • fill(r, g, b); • noStroke(); • println();

Commands • Parameters • line(x, y, x2, y2); • ellipse(x, y, r, r);

Variables • Type • Name • Value (not always) int x = 5; Type Name Value

Variables • Types • int • float • boolean • long • double • color • byte • Any classes you make

Variables • Casting • Can change types to make them the same • intx = int(random(1, 5)); • random() gives a float value • x needs an int value • int(…) changes the float to an int

Variables • Declare (above setup) • int x; • Initialize (in setup) • x = 5; • Use (in draw) • x = x + 1; • x += 1; • x++

Variables • Some variables are managed for you • intmouseX • Current X position of the mouse • intmouseY • Current Y position of the mouse • booleanmousePressed • Whether the mouse button is currently pressed • char key • Which key was typed

Variables • Global variables • Everything can see it • Local • Only local can see it

Conditionals • If • If, else • Else if

Conditionals • if(<the thing I put in here is true>) { //do this }

Conditionals • if(x = 5) { ellipse(50, 50, 20, 20); } What do the numbers in the ellipse command mean? Is this allowed?

Conditionals • if(x == 5) { ellipse(50, 50, 20, 20); } Correct way The previous slide uses assignment, not comparison

Conditionals • if(x == 5) { //do this } else { //do this }

Conditionals • if(x == 5) { //do this } else if(x == 4) { //do this }

Conditionals • if(x == 5) { //do this } else if(x == 4) { //do this } else { //do this }

Iteration (Loops) • There are two kinds of loops • For loops • While loops

Iteration (Loops) • For loop • Assignment • Stopping condition • Increment • Body for(<assignment>; <stopping condition>; <increment>) { //body }

Iteration (Loops) • For loop inti; for(i = 0; i < 10; i++) { println(i); }

Iteration (Loops) • For loop for(inti = 0; i < 10; i++) { println(i); }

Iteration (Loops) • While loop while(<this is true>) { //do something }

Iteration (Loops) • While loop while(x < 10) { println(x); x++; }

Iteration (Loops) • Nested loops inti; int j; for(i=0; i<10; i=i+1) { for(j=0;j<10; j=j+1) { print(i); } }

Example • Bouncing Ball

Input • Mouse intmouseX; intmouseY; intpmouseX intpmouseY

Input rect(mouseX, mouseY, 50, 20);

Input • Example void draw() { point(mouseX, mouseY); }

Input • Example void draw() { line(mouseX, mouseY, 200, 200); }

Input • Example void draw() { line(mouseX, mouseY, mouseX, mouseY); } What is this going to do?

Input • Introducing pmouseX and pmouseY • pmouseX is the previous mouseX position • pmouseY is the previous mouseY position • Previous means the position from the last draw loop iteration

Input • Example void draw() { line(mouseX, mouseY, pmouseX, pmouseY); }

Input • Other mouse inputs • mousePressed • mousePressed() • mouseReleased() • mouseClicked() • Others...

Input • Example if(mousePressed == true) { //do something }

Input • Keyboard • key • keyCode • keyPressed • keyPressed() • keyReleased() • keyTyped()

Input • Example void draw() { if(keyPressed) { if (key == 'b' || key == 'B') { fill(0); } } else { fill(255); } rect(25, 25, 50, 50); }

Gravity • dx and dy are useful! • We can use these variables to make bouncing look more realistic

Gravity • Before we had • dx*= -1; • dy*= -1; • This just changed the direction of the ball • How would we change the acceleration of the ball?

Gravity • Add small increments to dx and dy to add acceleration • Lets do an example!

Methods() • Methods are blocks of code • They should be outside of the setup and draw loops • They can be called (used) anywhere in your program • setup, draw, other methods..

Methods() • We are already using methods • void setup() • void draw() • We can also create any method we want • The method can have any name we want • The method can have any parameters we want • The method can do anything we want

Methods() • Methods can be used to clean up code or to reuse code • Processing has its own methods as well • setup() • draw() • mousePressed() • keyPressed() • ..others

Methods() • Example int value = 0; void draw() { fill(value); rect(25, 25, 50, 50); } void mousePressed() { if(value == 0) { value = 255; } else { value = 0; } }

Methods() • Creating our own method: • Create a method called bounce() • Put the code for the ball bouncing into the method • Call the method in the draw loop like this: • bounce();

Intro to Processing