Computer Science I Animations. Bouncing ball. The if statement. Classwork/homework: bouncing something. Compress and upload work to Moodle.

Animation is producing a succession of (static) pictures fast enough that our mind interprets the pictures as showing motion. – Visual music We produce animation in Processing by using the draw function. – Default frameRate of 60 times/sec. This is a goal. If draw has too much to do, may not be this fast. You can experiment. – Erase display, using background( ) each time.

Bouncing ball planning We know How to draw a circle at a given location, with horizontal and vertical chords the same and some set amount. We know how to erase the display. We don't quite know how to bounce… We do know how to check the value of a variable against another variable and take action depending on a condition.

Planning, cont. Define variables bx, by for the position of the ball and dx, dy for the increments (aka deltas) each frame. The setup function sets the values of the variables. The draw function does all the work – Changing the values of bx and by – Checking values against the wall values. Changing dx and/or dy in certain situations.

The if statement The if statement is used to check a condition and do something. – A condition uses various operators to return a true or false value: (dis > limit) (dis >= limit) (dis == limit) NOTE double equal sign!! (dis < limit) (dis <= limit) Combinations: ((xval >= b1) && (xval <= b2))

The = sign versus == The = sign is part of an assignment statement. The == sign checks a condition.

The if versus if-else (pseudo-code) if (today == 1) { do_something } if (today==1) { do_something } else {do_something_else}

Checking on hitting the walls THERE ARE NO WALLS AND THERE IS NO BALL. We write code to keep track of position of ball. My approach is to do the two horizontal checks together using a compound condition and the two vertical checks together using a compound condition. The if-true clause changes the delta for the NEXT iteration, that is, the next frame.

//bouncing ball float bx,by,dx,dy; int balldiam = 20; void setup() { size(800,600); bx = width/2; by = height/2; dx = 1; dy = 2; }

void draw(){ background(0); //erase window ellipse(bx,by,balldiam,balldiam); bx = bx+dx; if ((bx>=width)||(bx<=0)) {dx = -dx;} by = by + dy; if ((by>=height)||(by<=0)) {dy = -dy;} }

Improvement void draw(){ background(0); //erase window drawBallThenMoveAndCheck(); } void drawBallThenMoveAndCheck() { ellipse(bx,by,balldiam, balldiam); bx = bx+dx; if ((bx>=width)||(bx<=0)) {dx = -dx;} by = by + dy; if ((by>=height)||(by<=0)) {dy = -dy;} }

Why … Do I think this is an improvement? The name of the new method says what it does: – Draw ball, then… – Move ball, then… – Checks if the NEXT move should be different The draw method erases the screen and then does the action.

Fancy Random choice of color User (player) actions Pressing arrow keys changes velocity – In physics, velocity is a vector: speed + direction. – In our example, the dx and dy indicate the changes in the horizontal and vertical position. – Note: d stands for delta. Delta refers to change. These are conventions. We can (fortunately or unfortunately) name things whatever we want. – Need to see how to detect which key.

Random color Many ways One way: fill(random(255),random(255),random(255)); The random function returns a random floating point number from 0 up to but not including the parameter.

Random color Choose from a set list of colors Use the datatype color Use an array for the list of colors color[] colors = { color(223,115,255), //heliotrope color(114,47,55), //puce color(255,255,240) //ivory };

In setup Call random once to get an index into the array fill(colors[int(random(colors.length)))]); Match up the ( ) and the [ ] call of function fill, setting the fill color index into array colors call of int function to truncate to integer call of function random with the value colors.length Note: code will still work if I add another color.

void keyPressed() { //use arrow keys to change deltas (velocity) if (keyCode==UP) { dy = dy -.5; println("dy decreased, now ",dy); } if (keyCode==DOWN) { dy = dy +.5; } if (keyCode==LEFT) { dx = dx -.5; } if (keyCode==RIGHT) { dx = dx +.5; }

Classwork Get the plain example working and then modify (but keep it a bouncing something) – Draw something other than a circle. – Draw the walls. – Slow down or speed up when hitting a wall. – Do something when it hits a wall – Do something in response to mouse click – ? Look at the fancier thing. Can you just add the keyPressed method to your example? Do you want to?

Homework Do your own program involving – Use of random – Use of animation – Optional: Images Font(s) and text You must use variables and you must create your own functions (methods)