1. ______________________________________________________________________________________ SCHOOL OF INTERACTIVE ARTS + TECHNOLOGY [SIAT] | WWW.SIAT.SFU.CA IAT 355 Java using Processing ______________________________________________________________________________________ SCHOOL OF INTERACTIVE ARTS + TECHNOLOGY [SIAT] | WWW.SIAT.SFU.CA

2. 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, 2014IAT 3552

3. 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, 2014IAT 3553

4. 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, 2014IAT 3554

5. Drawing in Processing  Automatic creation of display window  Window has a coordinate system for drawing May 7, 2014IAT 3555 x y 050 100 0 50 100

6. 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, 2014IAT 3556

7. Drawing several points point( 30, 20 ); point( 85, 20 ); point( 85, 75 ); point( 30, 75 ); May 7, 2014IAT 3557

8. 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, 2014IAT 3558

9. 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, 2014IAT 3559

10. 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, 2014IAT 35510

11. Drawing primitives revisited  What are the different syntax parts of a drawing primitive? line( 0, 0, 50, 50 ); May 7, 2014IAT 35511 method name parentheses contain arguments arguments, parameters

12. 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, 2014IAT 35512

13. 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, 2014IAT 35513

14. 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 7, 2014IAT 35514 int x; // variable x can hold integers (int) int y; // 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

15. Effect of creating an int variable May 7, 2014IAT 35515 // Single int int anInt; // Put a value in the int anInt = 3; // Type error! anInt = “hello”; CodeEffect Name: anInt, Type: int 3 “hello” Can’t shove “hello” into an int

16. Assigned values must match the type May 7, 2014IAT 35516 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 y point(x, y); // use the values of x and y to draw a point

17. 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, 2014IAT 35517

18. 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, 2014IAT 35518

19. 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, 2014IAT 35519

20. 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, 2014IAT 35520

21. 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, 2014IAT 35521

22. If if statements introduce conditional branches if ( ) { // do this code } have one of two values: true or false May 7, 2014IAT 35522

23. Some boolean expressions May 7, 2014IAT 35523 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;

24. Example Try changing the values of drawRect and drawAnX May 7, 2014IAT 35524 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); }

25. 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, 2014IAT 35525

26. 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, 2014IAT 35526

27. 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, 2014IAT 35527

28. 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, 2014IAT 35528

29. 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, 2014IAT 35529

30. 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, 2014IAT 35530

31. Mouse callback methods  There are several built-in methods you can fill in to process mouse events mousePressed() mouseReleased() mouseMoved() mouseDragged() Example: void mousePressed() { if( mouseBotton == LEFT ){ println( “Left Mouse Button was pressed” ); loop(); // activate drawing again } May 7, 2014IAT 35531

32. 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, 2014IAT 35532

33. while loops while( ) { }  Repeatedly executes the code body while the boolean expression is true May 7, 2014IAT 35533

34. for loops for( ; ; ) { } 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 7, 2014IAT 35534

35. Converting for to while  Seeing how for loops can be converted to while loops helps you understand for for( ; ; ) { } // is the same as ; while( ) { ; } May 7, 2014IAT 35535

36. 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, 2014IAT 35536

37. 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, 2014IAT 35537

38. Arrays  An array is a contiguous collection of data items of one type  Allows you to structure data –Accessed by index number May 7, 2014IAT 35538

39. Effect of creating an int variable May 7, 2014IAT 35539 // Single int int anInt; // Put a value in the int anInt = 3; // Type error! anInt = “hello”; CodeEffect Name: anInt, Type: int 3 “hello” Can’t shove “hello” into an int

40. Creating an array of ints May 7, 2014IAT 35540 // declare byte array int[] intArray; // initialize byte array intArray = new int[5]; // set first element intArray[0] = 3; // set third element intArray[2] = 5; CodeEffect Name: intArray, Type: int[] 01234 each element has type int 00000 01234 30000 01234 30500

41. Practice reading code  If code is a medium, then it can be both written and read  Reading code reveals –New programming constructs –Strategies and techniques (design patterns) –Style –Philosophical assumptions (deep reading) May 7, 2014IAT 35541