1. Game with US Beginner Tutorial

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

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

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

5. Basic Coding Processing basics Commands Variables Conditionals Iteration

6. 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)

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

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

9. 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();

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

11. Variables Type Name Value (not always) int x = 5; TypeNameValue

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

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

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

15. Variables Some variables are managed for you int mouseX Current X position of the mouse int mouseY Current Y position of the mouse boolean mousePressed Whether the mouse button is currently pressed char key Which key was typed

16. Variables Global variables Everything can see it Local Only local can see it

17. Conditionals If If, else Else if

18. Conditionals if( ) { //do this }

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

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

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

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

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

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

25. Iteration (Loops) For loop Assignment Stopping condition Increment Body for( ; ; ) { //body }

26. Iteration (Loops) For loop int i; for(i = 0; i < 10; i++) { println(i); }

27. Iteration (Loops) For loop for(int i = 0; i < 10; i++) { println(i); }

28. Iteration (Loops) While loop while( ) { //do something }

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

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

31. Example Bouncing Ball

32. Input Mouse int mouseX; int mouseY; int pmouseX int pmouseY

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

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

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

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

37. 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

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

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

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

41. Input Keyboard key keyCode keyPressed keyPressed() keyReleased() keyTyped()

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

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

44. 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?

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

46. 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..

47. 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

48. 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

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

50. 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();

51. Images To include images or sprites put the file into your sketch folder Can put any image you want Background Sprites

52. Images To put an image in your program: PImage b;  Declare b = loadImage(“picture.png”);  Initialize Image(b, 0, 0);  Use

53. Images Image(name, x, y); The x and y of the image is like the x and y of a rectangle (0,0) is top left corner of the image

54. Images Sprites I highly suggest you download Paint.Net http://www.getpaint.net/download.html Save files as.png so you can add an alpha channel

55. Images Alpha channel is just a see-through background If you only want your sprite, and not a rectangular background around it, use an alpha channel But (x,y) of image is still top left of the rectangle

56. Classes Classes are a way to separate your code even further Organizes programs into separate files Classes are used to make objects

57. Classes A simple class: class Particle { //variables for the class declared here //methods for the class written here }

58. Classes A simple class: class Particle { int x, y, r; Particle(int positionX, int positionY, int radius) { x = positionX; y = positionY; r = radius; }

59. Classes The class is the template The object is the actual thing you use Once you have a class, you must create an object

60. Classes Creating an object: Particle p; p = new Particle(100, 100, 30); Using an object: p.doSomething();

61. Classes Variables class Particle { int x; int y; int dx; int dy; //methods }

62. Classes Variables The variables in your classes can be used in other parts of your program: Particle p; void setup() { p = new Particle(100, 100, 30); p.x = 200; p.y = 200; p.dx = 5; p.dy = 4; } void draw() { //do something }

63. Classes Constructor Runs once when you create the object Must have the same name as the class Usually initialize variables here (kind of like setup) Can have parameters in the constructor p = new Particle(100, 100, 30);

64. Classes A simple class: class Particle { int x, y, r; Particle(int positionX, int positionY, int radius) { x = positionX; y = positionY; r = radius; }

65. Classes Methods Can put methods in your class just like in your main program Need void in front of methods (just like setup and draw) Unless you are returning something... Use the methods just like you use variables p.drawParticle();

66. Classes class Particle { int x, y, r; Particle(int positionX, int positionY, int radius) { x = positionX; y = positionY; r = radius; } //methods go here }

67. Classes class Particle { int x, y, r; Particle(int positionX, int positionY, int radius) { x = positionX; y = positionY; r = radius; } void drawParticle() { ellipse(x, y, r, r); } void moveParticle() { x += dx; y += dy; }

68. Classes Particle p; void setup() { size(400, 400); p = new Particle(100, 100, 30); } void draw() { background(0); p.drawParticle(); p.moveParticle(); }

69. Arrays If we want multiple particles how are we going to make them? Particle p1; Particle p2; Particle p3; Particle p4...

70. Arrays We would need variables for every particle Declare Initialize Use What if we wanted 1000 particles?

71. Arrays Arrays are a collection of primitive types or objects Primitive types: int, float, boolean... Objects made from classes

72. Arrays An array can only hold one type You can hold many different types into arrays But you can only hold one certain type in any one array You can have an array of ints You can have an array of Particles You cannot have an array of ints and Particles

73. Arrays Declaring arrays: int[] intArray; The data type is int The name of the array is intArray

74. Arrays Declaring arrays: Particle[] p; The data type is Particle The name of the array is p

75. Arrays Initializing arrays: intArray = new int[5]; Must initialize the array with a size Here we can have 5 items in the array

76. Arrays Initializing arrays: p = new Particle[1000]; Must initialize the array with a size Here we can have 1000 items in the array

77. Arrays Arrays are kept in a list with an index from 0 to the size of the array minus 1 An array of size 5 has an index from 0 to 4

78. Arrays How to put things in the array: intArray[0] = 5; intArray[1] = 6; intArray[2] = 7; intArray[3] = 8; intArray[4] = 9;

79. Arrays How to put things in the array: p[0] = new Particle(100, 100, 30); p[1] = new Particle(200, 200, 30); p[2] = new Particle(300, 300, 30); p[3] = new Particle(400, 400, 30); p[4] = new Particle(500, 500, 30);

80. Arrays Can use loops to put things in the array int[] intArray = new int[5]; for(int i = 0; i < 5; i++) { intArray[i] = int(random(0,100)); println(intArray[i]); }

81. Arrays Can use loops to put things in the array Particle[] p = new Particle[1000]; for(int i = 0; i < p.length; i++) { p[i] = new Particle(1*i, 1*i, 30); }

82. Arrays Use arrays just like their data types intArray[2] = 4; intArray[3] = 6; intArray[4] = intArray[2] + intArray[3]; println(intArray[4]);

83. Arrays Use arrays just like their data types p[0].drawParticle(); p[0].moveParticle(); p[1].drawParticle(); p[1].moveParticle();

84. Arrays Use arrays just like their data types for(int i = 0; i < p.length; i++) { p[i].drawParticle(); p[i].moveParticle(); }