1. Variables

2. Something to mention… void setup(){ size(200, 200); background(255); smooth(); } void draw() { stroke(0); strokeWeight(abs(mouseX-pmouseX)); line(pmouseX, pmouseY, mouseX, mouseY); } 2

3. Something to mention… void setup(){ size(200, 200); background(255); } void draw() { } void mousePressed(){ line(pmouseX,pmouseY,mouseX,mouseY); } 3

4. Something to mention… background() inside setup() background() inside draw() 4

5. 5 All Primitive Types Integer Types byte: A very small number (-127 to +128) short: A small number (-32768 to +32767) int: A large number (-2,147,483,648 to +2,147,483,647) long: A huge number Floating Point Types float: A huge number with decimal places double: Much more precise, for heavy math Other Types boolean: true or false char: One symbol in single quotes ‘a’

6. 6 Primitive Type Examples Integer Types byte: 123 short: 1984 int: 1784523 long: 234345456789 Floating Point Types float: 4.0 double: 3.14159 Other Types boolean: true char: ‘a’

7. 7 Declaring and Initializing Variables Can be done in two ways: After declaration: On two lines int count; // declare the variable count = 50; // initialize the value During Declaration: On one line int count = 50; // declare and initialize Can also be initialized with a calculation int max = 100; int min = 10; int count = max – min; // calculation

8. 8 Naming Variables Rules Letters, Digits and underscore ( _ ) are OK to use Cannot start with a digit ( 0,1,…9 ) Cannot use reserved words mouseX, int, size.. Best Practices Use descriptive names boolean moreToDo ; Use ‘camelHump’ notation Start with lower case Each new word starts with Upper Case

9. Where to Declare Variables Remember that your code is in ‘blocks’ Variables can go inside or outside these blocks

10. Varying Variables: Remember that processing calls draw() in a loop If you want the variable to change every time: Declare and initialize it outside of draw() Change it inside draw() Moves as circleX increases 

11. 11 circleX Is initialized to 0 Used first time draw() is called ellipse(circleX, circleY, 50,50); Then circleX = circleX + 1; Next time draw() is called, circleX is 1 ellipse(circleX, circleY, 50,50); Then circleX = circleX + 1; Next time draw() is called, circleX is 2 ellipse(circleX, circleY, 50,50); Then circleX = circleX + 1;.. Until circleX is over 200, and the circle just moves off the right side of the screen. Call to draw() circleX 10 21 32 43 54 … 200199

12. frameRate() Function frameRate() specifies the number of frames to be displayed every second. frameRate(30) will attempt to refresh 30 times a second. It is recommended to set the frame rate within setup(). The default rate is 60 frames per second. 12

13. Exercise Modify the program so that instead of the circle moving from left to right, the circle grows in size. 13

14. Using Many Variables Make things more interesting using more variables! Declare and initialize them outside of draw() Change them inside draw()

15. 15 System Variables Processing provides many ‘built-in’ variables: appear in blue color font mouseX, mouseY, pmouseX and pmouseY width: Width (in pixels) of sketch window height : Height (in pixels) of sketch window frameCount : Number of frames processed frameRate : Rate (per sec.) that frames are processed screen.height, screen.width: Entire screen key : Most recent key pressed on keyboard (ASC-II) keyCode : Numeric code for which key pressed mousePressed : True or false (pressed or not?) mouseButton : Which button (left, right, center)

16. Using System Variables 16

17. Exercise The shapes must resize themselves relative to the window size. 17

18. 18 Random() Function random() returns a float. Two arguments random(1,100): a random float between [1,100) One arguments random(100): a random float between 0 (by default) and 100

19. Using random() 19

20. Make Zoog Move! 1) Make Zoog rise from below the screen 2) Change his eye color randomly as he moves initial code provided 20

21. 21