Creative Computing

\\ aims By the end of the session you will be able to: 1.Move objects around 2.Write simple interactive programs 3.Use the mouse position to draw points and lines 4.Use if statements to control animation and mouse interaction 5.Use transforms for moving objects

Creative Computing int x; void setup() { background(255); size(200, 200); x = 0; } void draw() { x = x + 1; strokeWeight(4); point(x, 100); }

Creative Computing int x; void setup() { background(255); size(200, 200); x = 0; } void draw() { x = x + 1; strokeWeight(4); point(x, 100); } Variables

Creative Computing int x; void setup() { background(255); size(200, 200); x = 0; } void draw() { x = x + 1; strokeWeight(4); point(x, 100); } Happens at the start of the program Do any initial set up like changing the size of the screen or the background colour Set the initial values of any variables

Creative Computing int x; void setup() { background(255); size(200, 200); x = 0; } void draw() { x = x + 1; strokeWeight(4); point(x, 100); } Happens every time the screen is redrawn (many times a second) Update any variables Draw stuff (using the variables)

Creative Computing \\ Exercise Look up random, make a point move randomly Both left-right and up-down Change colour over time Can you make a point move back and forth?

Creative Computing \\ aims By the end of the session you will be able to: 1.Move objects around 2.Write simple interactive programs 3.Use the mouse position to draw points and lines 4.Use if statements to control animation and mouse interaction 5.Use transforms for moving objects

Creative Computing \\ if statements void draw() { background(255); strokeWeight(10); if (mousePressed) { point(mouseX, mouseY); } Check if the mouse is pressed Anything in the curly brackets only happens if the mouse is pressed

Creative Computing \\ Exercise Make a point follow the mouse cursor without a trail Look up pmouseX draw a line from the previous mouse position to the current one Look up rect and draw a box with the mouse, what about ellipse? Make the mouse change the screen colour

Creative Computing \\ aims By the end of the session you will be able to: 1.Move objects around 2.Write simple interactive programs 3.Use the mouse position to draw points and lines 4.Use if statements to control animation and mouse interaction 5.Use transforms for moving objects

Creative Computing \\ more about if statements void draw() { if (mousePressed) { background(0); } else { background(255); } Happens if the mouse is pressed Happens if it isnt pressed

Creative Computing \\ more about if statements void draw() { if (mouseX > 100) { background(0); } else { background(255); } You can compare things If the mouse position is more than 100

Creative Computing \\ comparisons X == Y is X equal to Y? (not different from X = Y) X != Y is Y not equal to Y? X Y is X less/greater than Y X = Y is X less/greater than or equal to Y

Creative Computing \\ more about if statements void draw() { if (mousePressed && mouseX > 100) { background(0); } else { background(255); } && (and) combines different tests together

Creative Computing \\ more about if statements void draw() { if (mousePressed && (mouseButton == LEFT) ) { background(0); } else { background(255); } Check which mouse button has been pressed

Creative Computing \\ exercises Draw points only if the left button is down Create a rollover – a box that changes colour if the mouse is over it Create a moves that moves and bounces of the edges of the window Can you create Pong?

Creative Computing

\\ aims By the end of the session you will be able to: 1.Move objects around 2.Write simple interactive programs 3.Use the mouse position to draw points and lines 4.Use if statements to control animation and mouse interaction 5.Use transforms for moving objects