1. Programming for Artists ART 315 Dr. J. R. Parker Art/Digital Media Lab Lec 10 Fall 2010

2. Processing We now know a bit about Processing – variables, animation, random numbers, and so on. Programming is about a lot of details, not all of which have easy to show examples immediately. There are principles (generalization) involved that are important to appreciate.

3. Types Variables have types. The type dictates what kind of data can be stored in the variable. The type is specified in the variable’s declaration.

4. Types booleantrue or false charcharacter (letter, digit. ‘;’) bytesmall number, -128 to 127 shortsomewhat larger number, -32768 to 32767 int a big number longa really big number float a decimal number (3.1415926) doublea decimal number with more digits ccc

5. Declarations int i;// the variable named I holds an integer int i,j,k; boolean more = true; float size, x, y; // Three real numbers. i = 4; x = 3.1; y = 2*x – i*i; int count = 0;

6. System Variables Declared by the system and you can use them. Hold useful values. width- width of the sketch window. height- height of the window. frameCount – Number of frames drawn framerate – frames per second key- most recent key pressed keyPressed – is a key pressed mousePressed – is the mouse pressed? mouseButton – Which button is pressed?

7. Random random (10)a random number between 0 and 9 random (1,10) a random number between 1 and 10, not including 10. (int) random(1, 7) an integer between 1 and 6 (a die roll) (int) random (1, 53) – deal a card

8. Here is an animation of a die roll A histogram of rolls: void draw () { r = random (1, 7); i = (int)r; … Collect frequency of rolls, plot them.

9. Random Random numbers are used to simulate intelligence. Recall from GameMaker. Reality is messy. Randomness gives a sense of the real to things. EG hand-drawn lines are never straight. Randomness can simulate the nature of real drawn lines. Does not have to be right, just look right.

10. The Mouse We have already used the system variables mouseX and mouseY. Remember that in Gamemaker the mouse clicks were events. The same is true here. In Gamemaker we coded an event handler that executed when the event occurred. Same here. The event handler is another function like draw and setup.

11. The Mouse void setup () { size (200,200); background(255); } void draw () {} void mousePressed () { stroke (0); fill(174); rectMode (CENTER); rect (mouseX,mouseY,12,12); }

12. The Mouse void mousePressed () { stroke (0); fill(174); rectMode (CENTER); rect (mouseX,mouseY,12,12); } Changing this to ‘keyPressed’ Does the obvious thing!

13. Mouse Colours Set background color depending on the mouse position. Horizontal is RED, vertical is GREEN. Height and width will be 256 (full 8 bit color) Easy – set background to (mouseX, mouseY, 128);

14. Mouse Colours

15. Conditionals Processing has an IF construct too. Let’s do a program where we draw a traffic light that changes like the real ones do. It will count frames (steps) and change color when a reasonable number are reached.

16. Conditionals

17. int c = 0, k=0; C is color red=0, yellow=1, green=2. K is a count of frames/steps. It’s a timer. Add 1 each time DRAW is called. void setup () { size (200,200); background(255); } void draw () { fill (200, 200, 200); //Grey rect (30, 30, 40, 70); Surround ellipseMode (CENTER); Now draw lights: red on top, then yellow, then green. Fill with RED if color c=red (0) if (c==0) fill (255,0,0); ellipse (50, 40, 10, 10);

18. Conditionals Now fill with yellow if c=1, draw the circle. if (c==1) fill (255,255,0); else fill (200, 200, 200); ellipse (50, 60, 10, 10); Finally, fill with green and draw the green light. if (c==2) fill (0,255, 0); else fill (200, 200, 200); ellipse (50, 80, 10, 10); K is the timer – increase. k += 1; If timer is large enough, change the color. if (k > 200) { c += 1; if (c>2) c = 0; k = 0; }

19. Final program int c = 0, k=0; void setup () { size (200,200); background(255); } void draw () { fill (200, 200, 200); rect (30, 30, 40, 70); ellipseMode (CENTER); if (c==0) fill (255,0,0); ellipse (50, 40, 10, 10); if (c==1) fill (255,255,0); else fill (200, 200, 200); ellipse (50, 60, 10, 10); if (c==2) fill (0,255, 0); else fill (200, 200, 200); ellipse (50, 80, 10, 10); k += 1; if (k > 200) { c += 1; if (c>2) c = 0; k = 0; }

20. Println (print line) A way to print things (text, numbers) to the message window. println (“Hi there”); Prints the message ‘Hi there’ in the message window.

21. Println The value in a variable can be printed. int x=0; println (x); x = x + 1; Prints the value of the variable x in the message window.

22. Println The value in a variable can be printed along with a message. int x=0; println (“The value of X is “ + x); x = x + 1; Prints the message in the message window.

23. Println The symbol ‘+’ here means something different from the usual meaning ‘add’. Println is a function and its parameter is a character string. Technically, the ‘+’ here means ‘concatenate’, or add to the end of a string. println (“The value of X is “ + x); Takes the integer variable x, turns it into a string, and adds it to the end of the first string to yield a single string that can be printed.

24. Println There can be more than two things: println (“The sum of “ + x “ and “ + y + “ is “ + (x+y)); This works OK, but needs the () around (x+y). Otherwise it will convert x and y into strings and concatenate them! The ( ) allows us to specify the order in which we want the operations to be done. Precedence!

25. Precedence You likely have not thought about it, but there is an implicit order to the evaluation of operators in expressions. Computers love rules. 12 + 36/2 is 30 (12 + (36/2) = 12 + 18 = 30) 3 + 4 + 5 * 2 is 17 (3 + 4 + (5*2) = 7+10 = 17) -3+5 = 2 ( (-3) + 5 = 2) Parentheses are used when we wish to disrupt the natural order: (12+36)/2 does the addition first: 48/2 = 24

26. Precedence You likely have not thought about it, but there is an implicit order to the evaluation of operators in expressions. Computers love rules. 12 + 36/2 is 30 (12 + (36/2) = 12 + 18 = 30) 3 + 4 + 5 * 2 is 17 (3 + 4 + (5*2) = 7+10 = 17) -3+5 = 2 ( (-3) + 5 = 2) Parentheses are used when we wish to disrupt the natural order: (12+36)/2 does the addition first: 48/2 = 24

27. Types Types can be converted. A real number can be converted into an integer, but there are a few ways that can work out. Computers love rules. (int)1.2 is 1 (int)1.6 is 1 (int)(1.2 + 0.5) is 1 (int) 1.6+0.5 is 2 (int)-1.2 is -1 (int)(-1.2-0.5) is -1 (int)(-1.2+0.5) is 0

28. Types Floats are not precise. 0.5 is exact, because it is a power of 2 and has an exact representation is binary. 0.1 is an infinitely repeating decimal fraction in binary (like 1/3 is in decimal); Adding/subtracting 0.1 repeatedly compounds the error. What does this print?? z = y+y+y+y+y+y+y+y+y+y; println ("z = " + (z) );

29. Types z = 1.0000001 So the rule is: NEVER compare a float variable for equality against another float. (Unless it does not matter) OK: if (x >= 1.0) … Not OK: if (x == 1.0) …

30. Types Integers have a max value. If they exceed that, they become negative. You may not be warned. short k; … k = 32766; println ( "k = " + k); k = k + 1; println ( "k = " + k); What does this print?

31. Types k = 32766 k = 32767 k = -32768 Why? (do you really want to know??) Has to do with how negative numbers are represented in binary.