Topic Writing functions which can take arguments

Class Students learn to write a function which can accept arguments,

Description return values and can be reused for different game objects.
Students also learn to create their own little code library.

Class C21

Class time 45 mins

Goal ● Learn "true" and "false" as the two boolean values.

● Write a function which can accept arguments, return values
and can be re-used for the different game objects.
● Create a little code library and use it within the code.

Resources ● Teacher Resources

Required ○ Laptop with internet connectivity
○ Earphones with mic
○ Notebook and pen

● Student Resources
○ Laptop with internet connectivity
○ Earphones with mic
○ Notebook and pen

Class structure Warm Up 5 mins

Teacher-led Activity 15 min
Student-led Activity 15 min
Wrap up 5 min

Start the video call from H2H

CONTEXT
● Review the collision and bounceOff algorithm created in the last class.
● Writing function for DRY

Class Steps Teacher Action Student Action

Step 1: Let's quickly review what we did in

Warm Up last class.
(5 mins) ESR:
Can you recollect our learnings from Last class we were learning
the last class? to design algorithms.

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
1
 We learned how to write an
algorithm to:
- detect collision between
the two game objects and
- make two game objects
bounce off against each
other.

Amazing that you remember. ESR:

In the collision algorithm we
Do you recollect how our collision checked if the horizontal
algorithm works? and vertical space between
the two objects is 0 (for
different positions of the two
objects).

Awesome. ESR:
We checked if the object
Do you remember how our bounceOff had collided and then
algorithm worked? reversed their velocities.

u Ahh. I am so glad that you remember

our two algorithms from last class.

Our code from last class had a

limitation - It would work only for the
two rectangles which we had named
movingRect and fixedRect.

In this class we will work on our code

to make the code work for any two
game objects. We will also create a
small library so that we can use our
code in any project.

How would this kind of help? ESR:

It will make it easy for us to
Let's get started. write new code without
repeating - DRY principle.
Remind the student about the DRY
principle - DON’T REPEAT
YOURSELF.

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
2
 Teacher Initiates Screen Share

CHALLENGE
● Write a collision function which works for any two game objects.

Step 2: Teacher asks the student to open the Student observes

Teacher-led Visual Code editor and navigate to
Activity the last project for collision algorithm
(15 min) ​ eacher Activity 1)​ .
(T
Student opens the web
Teachers ask the student to open the server application and
web server application and point it to points it to the last project
the last project for collision algorithm for collision algorithm so
so that the code can be tested. that the code can be tested.

Let us look at our code. Right now our

code can detect collisions between
fixedRect and movingRect and we
have to write a big series of if-else
conditions inside our code to do that!

What if we wanted to just call

something like isTouching() and the
computer could tell us if the two ESR:
rectangles are touching. What should Write a function called
we do then? isTouching()

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
3
 Awesome. Let's do that. Let's write a The student observes and
function called isTouching. learns.

Teacher modifes the code to create a

function called isTouching().

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
4
 Let us place our code from line 18 to
28 inside isTouching() function.

What do we need to do now? How do ESR:

we use the function we just created? We need to call the
isTouching() function from
inside draw.

Let's call the isTouching function. Student observes the output

of the code.
Teacher calls the isTouching function
and checks the output on the web
browser.

Has anything changed? ESR:

No, the output remains the
same.

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
5
 Yes!

But if you think of it, isTouching()

function should only tell if the two
objects are touching. It should not
change the colors of the rectangles. ESR:
should they? No, they shouldn't.

Let us modify our code for function Student observes, asks

isTouching() so that it tells "yes" if the questions and learns.
two rectangles are touching and "no"
if the two rectangles are not touching.

In computer language, "yes" and "no"

are written as true and false. These
are called boolean values.
© 2019 - WhiteHat Education Technology Private Limited.
Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
6
 Our function can return TRUE if the
two rectangles are touching and
FALSE if the two rectangles are not
touching. We can then write our code
based on the isTouching function.

Teacher modifies the isTouching()

function code to make it return true or
false.,Teacher also uses the
isTouching function inside draw() to
change the colors of the rectangles.

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
7
 Our code now looks more intuitive to
understand. We can also change the
colors of the rectangles without

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
8
 changing anything in the isTouching()
algorithm.

For example: Let's make the

rectangles turn to blue instead of red
when the two rectangles collide.

Where should I change my code? ESR:

We should change the
colors inside if(isTouching())
condition.
Teacher makes the change and
shows the output.

Okay! Everything looks to be working

great so far. But - our collision
algorithm is working for only these
two rectangles.

Don't you think it should work for any

two game objects and tell if they are ESR:
colliding? Yes!

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
9
 Let us create some more game The student helps the
objects first. Can you help me with the teacher in writing the code.
code?

Teacher creates some more sprites.

For now, our isTouching function only The student observes and
checks collision between the learns.
movingRect​ and ​fixedRect​. We
should be able to check collisions
between any two objects.

We should be able to say something

like-
isTouching(movingRect,
gameObject1)
and our function should return true or
false depending on whether these two
© 2019 - WhiteHat Education Technology Private Limited.
Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
10
 objects are colliding.

For this to happen, our function

should be able to ACCEPT
arguments in its definition. Here the
arguments will be the sprites whose
collisions we want to check. We can
change our function definition to make
it accept arguments.

Teacher modifies code to add

arguments in isTouching function.

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
11
 Now inside our isTouching function, The student observes and
we would want to check the collisions learns.
for these two objects - object1 and
object2

Teacher modifies the function

isTouching() to change movingRect
and fixedRect to object1 and object2.

Now, isTouching() can be used with Student observes the output

any two objects. Let's use it with and asks questions.
movingRect and gameObject1 and
see.

Teacher modifies the code to check

collisions between movingRect and
gameObject1.

Teacher modifies the code to check

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
12
 collisions between movingRect and
other gameObjects.

What do you see? ESR:

isTouching() is now working
for the different game
objects.

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
13
 Now we can use isTouching()
anywhere in our code to check
collisions between any two game

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
14
 objects.

How do you find that? ESR:

Exciting

Later in the class, we will see how we -

can write many such functions and
create our own library - just like
p5.play library which we have been
using in our codes.

As a challenge, can you take the ESR:

bounceOff code from our last class Yes!!
and change its definition so that it
works for any two game Objects?

Amazing! Let's start.

Teacher Stops Screen Share

Now it's your turn. Please share your

screen with me.

● Ask Student to press ESC key to come back to panel

● Guide Student to start Screen Share
● Teacher gets into Fullscreen

ACTIVITY
● Write a bounceOff function which works for any two game objects.
● Creating a small code library which can be used with any project and allow
one to use collision and bounceOff functions.

Step 3: Guide the student to get started on The student adds the
Student-Led his/her project. bounceOff project from the
Activity last class in their code
(15 min) editor. (Student Activity 2)

The student opens the

output on their web browser.

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
15
 Guide the student to write the The student modifies the
bounceOff function and test it. code to write a separate
bounceOff function which
can accept two objects.

The student tests the code

for the two objects -
movingRect and fixedRect.

Let’s move on to create our very own

library now!

You know the p5.play library which

we are using in our code contains
several functions with algorithms
which we have been using in our
projects so far - like collision,
playSound, mouseDown, etc.

These are all defined inside the

p5.play.js file which is inside our
project.

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
16
 You can open the file and take a Student opens the p5.play.js
peek. Do not get bogged down by the and takes a peek at the
complex code. We will learn how to code.
read and understand this type of code
soon.

For now, we will learn how to quickly The student creates a js file
create our own library with functions called ​myOwnLibrary
which we can use in any project. inside the same project.

Let's create a file called

myOwnLibrary.js inside the same
project in which we are working. The
js in the end tells that it is a javascript
file.

(The new file can be created inside

the file directory or by right-clicking on
the file navigator in visual code studio
and creating a new file.)

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
17
 Copy the two functions - bounceOff The student copy pastes the
and isTouching - which you created function definitions for
inside myOwnLibrary.js bounceOff and isTouching.

You can remove these function

definitions from sketch.js

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
18
 Include the myOwnLibrary.js in your The student includes the
index.html file. myOwnLibrary.js file in the
header of index.html using
Now you can include this file into any script tags.
project and use the two functions -
bounceOff and isTouching - in your
code without writing any code!

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
19
 You can experiment with using these Student experiments using
functions inside sketch.js and see the the two functions defined in
output. their own library.

Teacher Guides Student to Stop Screen Share

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
20
 FEEDBACK
● Encourage the student to make reflection notes in markdown format.
● Complement the student for her/his effort in the class.
● Review the content of the lesson.

Step 4: Amazing! ESR:

Wrap-Up You created your own library! Isn't - We learned about
(5 min) that fantastic. booleans - true and false.
Let's wrap up our class. - We learned how functions
can accept arguments and
Can you quickly summarize what we return some value.
learned in today's class? - We learned how to use
functions to not repeat
ourselves.
- We learned how to create
our own library of functions.

You get Hats Off for your excellent Make sure you have given
work! at least 2 Hats Off during
the class for:

A lot of learning in an hour!

We are now ready to get started on

the Angry Birds Project which you
have been waiting for!

Let's meet in the next class soon!!

Project Overview Note:​ This is a tiered project with multiple Students engage with the
tasks. All students must do the main task. teacher over the project.
The main task is very similar to the
projects that are already live. Each tiered
project has two or more additional tasks
which are optional.

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
21
 JUMPING BOX

Goal of the Project:

Today, you learned how to extend the
feature of collisions and created your
own library which allows you to try
collisions with more than one object.

In this project, you will have to

practice and apply what you have
learned in the class and ​Create 4
collision surfaces and a moving box.
Also Color of the box should get
changed as per the collision surface
color.

Story:
John and Jacky are two brothers who
are planning to create a game. They
are creating a game in which the box
will start moving with a specific
velocity and its color gets changed
according to its colliding surfaces'
color.

I am very excited to see your project

solution and I know you will do really
well.

Bye Bye!

Teacher Clicks

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
22
Additional Encourage the student to write Student uses the markdown
Activities reflection notes in their reflection editor to write her/his
journal using markdown. reflection as a reflection
journal.
Use these as guiding questions:
● What happened today?
- Describe what happened
- Code I wrote
● How did I feel after the class?
● What have I learned about
programming and developing
games?
● What aspects of the class
helped me? What did I find
difficult?

Activity Activity Name Links

Teacher Activity 1 Collision https://github.com/whitehatjr/collisionAlgorith

Algorithm C19 m/blob/master/sketch.js

Teacher Activity 2 Collision algorithm https://github.com/whitehatjr/collisionAlgorith

C20 m2/blob/master/sketch.js
(Ref)(solution)

Teacher Activity 3 BounceOff https://github.com/whitehatjr/bounceOffAlgorit

Algorithm C20 hm2/blob/master/sketch.js

Student Activity 1 Collision https://github.com/whitehatjr/collisionAlgorith

Algorithm C19 m/blob/master/sketch.js

Student Activity 2 BounceOff https://github.com/whitehatjr/bounceOffAlgorit

Algorithm C19 hm/blob/master/sketch.js

© 2019 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
23