Chapter 10 Algorithms 1 Last Day of class

Chapter 10 Algorithms 1

• Last Day of class Friday No t • Video, anyone? • • • es : Slide show like chap 15 Rotate, e. g. , flower, rocket Pop & push matrix Explanation of Array Power. Point examples NEW: How to share Processing in a webpage. • Please complete course evaluation in Oaks • Approach: Show, not teach Algorithms 2

In this Chapter… • Learn how to construct a program that does more than one thing. • Employ cumulative learning of drawing shapes, interactivity, variables, loops, conditions, functions, objects, arrays, and more. • Think of what YOU want to do with your projects and beyond… • The primary strategy is to break down into smaller programs; then integrate together in the end. 3

What to Expect • The chapter uses a generic example that serves as a good guide for creating larger programs. It is a game; simple. It involves: – Interactivity – Multiple objects (using arrays) – A goal • Will go through chapter using incremental development. Algorithms 4

Definitions • Algorithm – A logical sequence of steps required to perform a task. • Pseudocode – An outline of a program, written in a form that can easily be converted into real programming statements. Algorithm example Pseudocode example • Allow users to interact by • Add mouse press function adding balls to screen with append to the array • Use different size balls, • Use random for sizing varying between small and between 10 – 50 px moderate. More info… Algorithms 5

The Algorithm Process 1. Idea – Start with an idea 2. Parts – break into smaller parts – – – Write the pseudocode for each part Implement the algorithm with code Take the functionality of each algorithm and build a class 3. Integration – Integrate all classes into a larger program/algorithm. Algorithms 6

An algorithm example – Sum a list of numbers: The algorithm might be: • Create variable to hold Sum • Create Counter and set it at 0 • Create a loop that cycles through the array. Each time: – Calculate the Sum of the first item – Increase the counter by 1 • Solution saved in Sum • Display solution Algorithms 7

Then translate algorithm to code by using while() or for() int [] nums = {3, 10, 1 }; int sum = 0; int i = 0; while(i < nums. length) { sum = sum + nums[i]; i++ ; println(sum); } println("_______n. The cumulative is " + sum); Algorithms 8

This chapter breaks down the solution even more 1. 2. 3. 4. 5. 6. Developing an idea Breaking down idea Working out algorithm for each part Writing code for each part Creating algorithm for putting parts together Integration of parts. You should use this strategy in all of your projects… Algorithms 9

Description of Rain Game The object of the game is to catch raindrops before they hit the ground. New drops will drop from the top of the screen from time to time. They will be located randomly across the screen. The player must catch the raindrop with the mouse before they hit the bottom of the screen. 10

Preview of game + another example… • See textbook website (maybe after class) • I’ll show it to you. • A project from previous semester More info… Algorithms 11

Individual Parts of the Program 1. Program a circle controlled by the mouse to catch rain. 2. A collision detection program. If the rain catcher catches a raindrop. 3. A timing program that executes a function every N seconds 4. Combine: A program with circles falling from top to bottom Algorithms 12

Without a class, it would be void setup() { size(400, 400); } void draw() { background(255); stroke(0); fill(170); ellipse(mouse. X, mouse. Y, 64); } INSTEAD… lets use Example 10 -1 to create a Catcher class. This might be interesting: https: //processing. org/reference/cursor_. html 13

Before doing the intersection test, let’s simply get the bouncing ball class. Note the pseudocode: • x and y locations • radius • Speed for x and y • Constructor: – – – Set radius with argument Randomly pick location Randomly pick speed Increment x by speed in x direction Increment y by speed in y direction • If ball hits edge, reverse direction • Display by drawing circle at x and y location Algorithms 14

The Bouncing Ball Class & Main (in examples 10 -2 & 10 -3) Copy/Paste the class and examine line-by-line. Then type the main program. 15

Another look at distance function First introduced on page 133 Also, note how the function is assigned to a variable. Have you seen that before? 16

Compare distance with sum of radii If the distance between the center of circle 1 and circle 2 is less than the sum of the radius of circle 1 and circle 2, then they intersect. 17

//On page 198, this function measures distance to see if intersecting. //It will be incorporated into Ball class boolean intersect(float x 1, float y 1, float x 2, float y 2, float r 1, float r 2) { float distance = dist(x 1, y 1, x 2, y 2); if (distance < r 1+r 2) { return true; }else { return false; } } //On page 198, this boolean variable tests with specific objects, ball 1 and ball 2 boolean intersecting = intersect(ball 1. x, ball 1. y, ball 2. x, ball 2. y, ball 1. r, ball 2. r); if(intersecting) { println("The circles are intersecting"); } } See next slide for truly simplified example of this type of coding 18

Don’t get overwhelmed by what the intersect function and intersecting variable are doing. It is very common to set a variable equal to the result of a function. //print the xpos if more than 60; otherwise print text float xpos = random(50, 80); rect(xpos, 30, 10); if (xpos > 60) { println(xpos); } else { print("It's less than 60"); } 19

Example 10 -4 uses the same functionality and logic by placing the intersect function into the Ball class. See next slide and let’s open and examine. 20

Example 10 -4 was done by modifying 10 -2 & 10 -3 …This is what was changed. In the Ball class: • Add color variable: color c= color(100, 50); • Add the highlight() function • Inside of display(): - change to fill(c) - add c =color(100, 50) to reset color after ball displays • Add the boolean intersect() function as shown on page 201; noting that Ball object called b is passed into the function. In the main page: • Add an if statement stipulating: if intersect() is true, then highlight() runs. 21

Timing § The millis() returns the number of milliseconds since a sketch started. § 1, 000 ms = 1 second § Try the quick code to change background in 3 seconds Example 10 -5 • Open or copy/paste from learningprocessing. com. • It resets and changes to random grayscale every 5 seconds. 22

This is example 10 -7, but it’s best as a class float x, y; void setup() { size(400, 400); background(100); x = width/2; y = 0; } void draw() { background(#ccff 99); fill(#00 ff 55); no. Stroke(); ellipse(x, y, 16); y++; } Exemplifies skills from Chapter 5. Instead, create the Drop class as shown on page 205. Exercise 10 -3, uses OOP with same idea. IMPORTANT REMINDER: Try to keep draw() as clean as possible. Better modularity. 23

Pages 206 – 207: 1, 000 balls See pages 206 -207. (No need to type this time) Pg 206 Drop class //an array of drops Drop [] drops= new Drop[50]; class Drop { void setup() { size(400, 400); for(int i=0; i<drops. length; i++) { drops[i]= new Drop(); } } Notice all balls drop at once although it seems like they don’t. This is due to varied speed at random(1, 5). void draw() { background(255); //run the drop functions for(int i =0; i<drops. length; i++){ drops[i]. move(); drops[i]. display(); In 10 -8 (from textbook), the total. Drops variable allows one to drop at a time. } //end draw /*the if statement not a part of page 206, but allow drops to re-start Or you could put in move() */ if (drops[i]. reached. Bottom()) { drops[i]. y=0; } } //end of for() float x, y; float speed; color c; float r; Drop() { r = 8; x = random(width); y = -r*4; //raindrop starts a little above window speed = random(1, 5); //each drop at diff speed c = color(50, 100, 150); //blue color } void move() { y += speed; } //check to see if it hits bottom boolean reached. Bottom() { if (y> height) { return true; }else{ return false; } } //display raindrop void display() { fill(50, 100, 150); no. Stroke(); ellipse(x, y, r*2); } } 24

Let’s get our hands a little dirty • • Incremental instruction: test one drop. Save the file you’re working on as Exercise 10 -3 (see pg. 206) Just for kicks, what would you like to happen when the ball reaches bottom? Show & tell, anyone? ? Drop class Drop { float x, y; float speed; color c; float r; Drop() { r = 8; x = random(width); y = -r*4; //raindrop starts a little above window speed = random(1, 5); //each drop at diff speed c = color(50, 100, 150); //blue color } void move() { y += speed; } //check to see if it hits bottom boolean reached. Bottom() { if (y> height) { return true; }else{ return false; } } //display raindrop void display() { fill(50, 100, 150); no. Stroke(); ellipse(x, y, r*2); } } 25

Example 10 -8 It’s improved because there is just one drop coming down at a time. 26

Fancier Raindrop Type example 10 -9 and let’s discuss what it is doing. Once the visually pleasing rain is designed, it can easily be incorporated into the drop class. Calculating size of circles 2*2=4 3*2=6 4*2=8 5 * 2 = 10 6 * 2 = 12 7 * 2 = 14 27

Puttin’ on the Ritz Either open yours, or Create file with 4 tabs and paste Example 10 -10 from textbook website. 28