Lesson 5 – Putting It All Together

(1)

(2)

Chapter

 10 – Algorithm

 11 – Debugging

(3)

Chapter

(4)

Algorithm

 In the real world, software projects

usually involve many moving parts.

 This chapter aims to demonstrate how a

(5)

Algorithm

 You, the programmer, will start with an

overall vision, but must learn how to break it down into individual parts to successfully execute that vision.

 The focus will not be on good game

(6)

Algorithm

 How do you go from thought to

code?

 How do you implement your own

algorithm to realize your ideas?

 We will see how a larger project divides

(7)

Algorithm

 We will continue to emphasize

object-oriented programming, and each one of these parts will be developed using a class.

 Before we get to the idea and its parts,

(8)

(9)

Algorithm: Dance to the beat of your

own drum

 An algorithm is a procedure or formula

for solving a problem.

 In computer programming, an algorithm

the sequence of steps required to perform a task.

 Every single example we have created

(10)

Algorithm: Dance to the beat of your

own drum

 An Algorithm is not too far of from

a recipe.

1. Preheat oven to 4000 F.

2. Place four boneless chicken breasts

in a banking dish.

3. Spread mustard evenly over

chicken.

(11)

Algorithm: Dance to the beat of your

own drum

 The previous silde is a nice algorithm for

cooking mustard chicken.

 Clearly we are not going to write a

Processing program to cook chicken.

 Nevertheless, if we did, the above

(12)

own drum

(13)

Algorithm: Dance to the beat of your

own drum

 An example that uses an algorithm to solve a

math problem is more relevant to our pursuits.

 Let’s describe an algorithm to evaluate the

sum of a sequence of numbers 1 through N.

 Where N is any given whole number greater

than Zero.

SUM(N) = 1 + 2 +3 + ...

+ N

(14)

Algorithm: Dance to the beat of your

own drum

 Algorithm:

1. Set SUM = 0 and a counter I = 1

2. Repeat the following steps while I is less

than or equal to N.

a. Calculate SUM + I and save the result in SUM

b. Increase the value of I by 1.

3. The solution is now the number saved

(15)

own drum

 Translating the preceding algorithm

(16)

own drum

(17)

10.3 From Idea to Parts

 To practice our development strategy,

we will begin with the idea, a very simple game.

 Before we can get anywhere, we should

(18)

10.3 From Idea to Parts

 Rain Game

 The object of this game is to catch raindrops

before they hit the ground.

 Every so often (depending on the level of

difculty), a new drop falls from the top of the screen at a random horizontal location with a random vertical speed.

 The player must catch the raindrops with the

(19)

10.3 From Idea to Parts

 How do we do this?

 For one, we can start by thinking of the

elements in the game:

 Secondly, we should think about these

elements behaviours. The raindrops

(20)

10.3 From Idea to Parts

 For example, we will need a timing

mechanism so that the drops fall “every so often”.

 We will also need to determine when a

raindrop is “caught”.

(21)

10.3 From Idea to Parts

1. Develop a program with acircle controlled by the mouse. This circle will be the user-controlled “raind catcher”

2. Write a program to test if two circles intersect. This will be used to determine if the rain ctacher has caught a raindrop.

3. Write a timer program that executes a function every N seconds.

(22)

10.3 From Idea to Parts

 Parts 1 through 3 are simple and each

can be completed in one fell swoop.

 However, with part 4, even though it

(23)

10.4 Part 1 : The Catcher

 This is the simplest part to construct

and requires little beyond what we learned in Chapter 3.

 Having pseudocode that is only two

(24)

10.4 Part 1 : The Catcher

 Pseudocode :

 Erase background

(25)

(26)

(27)

 This is good step, but we are not done.

 As stated, our goal is to develop the rain

ctacher program in an object-oriented manner.

 When we take this code and incorporate it

(28)

10.4 Part 1 : The Catcher

 Our pseudocode would be revised to

look like the following.

 Setup

 Initialize catcher Object

 Draw

 Erase Background

 Set catcher location to mouse location

(29)

 Example 10-1 shows the code rewritten

(30)

 The Ctacher class itself is rather simple,

(31)

(32)

(33)

10.5 Part 2 : Intersection

 Part 2 of our list requires us to determine when

the catcher and a raindrop intersect.

 Instersection functionality is what we want to

focus on developing in this step.

 We will start with a simple bouncing ball class

(which we saw in Example 5-6) and work out how to determine when two bouncing circles intersect.

(34)

10.5 Part 2 : Intersection

 Here is our algorithm for this intersection

part.

 Setup

 Create two ball objects

 Draw

 Move balls

 If ball #1 intersects ball #2, change color

both balls to white. Otherwise, leave color gray.

(35)

10.5 Part 2 : Intersection

 Certainly the hard work here is the

intersection test, which we will get to in a moment.

 First, here is what we need for a simple

(36)

10.5 Part 2 : Intersection

 Data

 X and Y Location

 Radius

(37)

(38)

 We are now ready to translate this into

(39)

(40)

(41)

(42)

10.5 Part 2 : Intersection

 From here, it is prettty easy to create a

sketch with two ball objects.



 Ultimately, in the fnal sketch, we’ll

(43)

 Example 10-2 Catcher (Cont.): Two

(44)

(45)

(46)

 Now that we have set up our system for

having two circles moving around the screen, we need to develop an algorthm for determining if the circles intersect.

 In Processing, we know we can calculate

the distance between two points using the dist() function.

 The diagram in Figure 10.3 shows how we

(47)

(48)

10.5 Part 2 : Intersection

 OK, so assuming the following:

 x1,y1 : coordinates of circle one

 x2,y2 : coordinates of circle two

 r1: radius of circle one

 r2: radius of circle two

(49)

 Our job now is to write a function

(50)

 Putting it all together, we have the

(51)

 (Example 10-3: Bouncing ball with

(52)

10.5 Part 2 : Intersection

(53)

(54)

(55)

(56)

 Putting it all together, we have the

(57)

10.6 Part 3 : The Timer

 For creating a timer, the function millis( ) is best. First of all, millis() , which returns the number of milliseconds since a sketch started, allows for a great deal more precision.

 One millisecond is one one thousandth of a

second (1,000 ms = 1 s).

(58)

10.6 Part 3 : The Timer

 Let’s say we want an applet to change

the background color to red 5 seconds after it started.

 Five second is 5,000 ms, so it as easy as

checking if the result of the milis()

(59)

 Setup:

 Save the time at startup (note this should

always be zero, but it is useful to save it in a variable anyway). Call this “ savedTime ” .

 Draw:

 Calculate the time passed as the current time

(i.e., millis() ) minus savedTime. Save this as “ passedTime ” .

 If passedTime is greater than 5,000, fll a new

(60)

10.6 Part 3 : The Timer

(61)

(62)

(63)

 With the above logic worked out, we can

now move the timer into a class.

 Let’s think about what data is involved in

the timer.

 A timer must know the time at which it

(64)

10.6 Part 3 : The Timer

 Data:

 savedTime

 totalTime

 The timer must also be able to start as

well as check and see if it is fnished .

 Functions:

 start( )

(65)

 Example 10-5: Object-oriented

(66)

(67)

(68)

10.6 Part 3 : The Timer

(69)

(70)

(71)

10.6 Part 4 : Raindrops

 The fnal piece of the puzzle is the

raindrops themselves.

 Ultimately, we want an array of Raindrop

(72)

 Part 4.3—Flexible number of

raindrops (appearing one at a time) .

 We can skip worrying about the

(73)

10.6 Part 4 : Raindrops

 Setup:

 Create an array of drops with 1,000 spaces

in it.

(74)

 Draw:

 Create a new drop in the array (at the location

totalDrops). Since totalDrops starts at 0, we will frst create a new raindrop in the frst spot of the array.

 Increment totalDrops (so that the next time we

arrive here, we will create a drop in the next spot in the array).

 If totalDrops exceeds the array size, reset it to zero

and start over.

 Move and display all available drops (i.e.,

(75)

10.6 Part 4 : Raindrops

(76)

(77)

(78)

(79)

(80)

(81)

(82)

10.8 Integration: Putting on the Ritz

 Setup:

 Create Catcher object.

 Create array of drops.

 Set totalDrops equal to 0.

 Create Timer object.

(83)

10.8 Integration: Putting on the Ritz

 Draw:

 Set Catcher location to mouse location.

 Display Catcher.

 Move all available Drops.

 Display all available Drops.

 If the Catcher intersects any Drop.

– Remove Drop from screen.

 If the timer is fnished:

(84)

(85)

10.8 Integration: Putting on the Ritz

 See:

(86)