Pandemic Programming Projects

Things are a little crazy right now. Some students have computers and reliable Internet at home while others do not. I even have a student living on a boat off the coast of B.C.

Stay healthy and try to keep up with subjects like maths, sciences, and languages. Not to say this course is not important but it is an elective.

Our school board has put together a fantastic FAQ that you and your parents should read.


Keep your eyes on your emails and feel free to post in our class discussion forum.

Warm-Up with Side Challenges

Are you frustrated with the course or your programming skills? Are the PPP tasks a little too challenging?

I suggest some Side Challenges to warm up!

In Repl.it, you will find some new assignments that start with "SC". These are meant for a quick, smaller challenge to get the mind going. Practice loops, arrays, strings, etc... I will be adding SC's whenever I get time (and think of it).


PPP 1 - Binary Search

Read carefully (click this to open instructions)

Let's ease back into programming with this task. (TL;DR Video)

Searching through a long list of items for a particular one, like a name, can take a long time. Imagine how long it takes to look through all the data in the Google search engine for a specific string like "To be or not to be".

A Linear Search goes through the list one-by-one, usually starting at index 0, and stops when it finds the requested item. If the list has a billion items and each of those has a billion sub-items... if the target is the very last one, this would take a long time.

However, if the search list is sorted, we can cut this time down exponentially by doing a Binary Search. (The action of sorting the list adds to the complexity but is certainly worth it, considering the alternative.)

In Binary Search, the sorted list is searched in halves.

  • Look at the middle item (or as close as possible). Is that the target? If not, is it too low or two high?
  • If it was too high, take the left half of the remaining items and find its middle... repeat
  • If it was too low, take the right half of the remaining items and find its middle... repeat

In this way, we cut away half of the list with each iteration.

Go to our Repl.it class for this assignment. (direct link)

PPP 2 - Two-Dimensional Grids (Arrays / Matrices)

Have you heard of The Matrix ? If you haven't watched it, you should.

{Video instructions from Mr. Brash}

Two-dimensional arrays of data are also known as a matrix. They can be written in several ways but most people think of them like a typical x-y plane of rows and columns.

Games, grids, and data science use matrices to control, manipulate, and calculate large amounts of data. Whenever you see a shape drawn on a computer, there is a good chance the data for that visualization is being held in a matrix.

A matrix is always listed as height first, then width. So a m x n matrix has height m and width n.

  • A QR Code is a good example of using a 2D Matrix (array) to visualize data. Here's a QR Code Generator to see it in action. And here's a description of the complicated algorithm that generates QR's.
  • A path or maze from a start point to an end is another good example.
  • An extension to a path is a heat map. A heat map is a path that shows different colours based on how many times a particular point is hit.
  • We can also store numbers based on place-value and search must faster this way.
  • Think about checkers, chess, minesweeper, connect-four, battleship...

Here is how to multiply two matrices.


See your task in Repl.it for the assignment.


Aside: A 3-dimensional matrix can be used to store even more data, like depth. Your expensive graphics cards use tons of very large matrices and complex data manipulation to move and display things realistically. If you have an interest in game programming, you will take many classes on matrix manipulation in University. Thankfully, many toolkits already do this for us (like Unity and Unreal Engine).

PPP 3 - Drawing on the HTML Canvas

This might feel disconnected from what we've been learning but it is a necessary "aside" if we want our programs to look pretty and get away from the console...

I've made a playlist showing how to manipulate images on a canvas element.

As always, your task will be in Repl.it - this one is called PPP3 - Canvas Practice

Mon. May 4th

⇨ PPP 4 & 5 - Model View Controller (MVC)

In my 4th video for the HTML Canvas and 2D Arrays, I cover what the MVC is all about (Model View Controller programming design). Essentially it is how programs with a user interface keep track of the data (model) and update the interface (view) for the user. The user clicks on or types into the view and the code (controller) reacts appropriately.

The instructional video is a bit longer out of necessity. Grab a pen and paper, watch the video, and check Repl.it for PPP4 and PPP5.

Don't forget you can request a tutorial session with me and the side-challenges (SC) in Repl.it are a great way to practice coding (and increase your mark).

Wikipedia has a great article (pretty easy read) on MVC

Check the YouTube videos and Repl.it!

PPP 6 - Object Oriented Programming (OOP)

Object Oriented Programming (OOP) is a paradigm or structure of programming that every "coder" should learn. It utilizes the best parts of procedural programming (what we've been doing) and packages it into manageable groups - objects - that can interact with each other.

This style of programming creates a wonderful connection real life. For example, we are humans. We are designed to have two legs and arms, each with joints and other properties like left or right. As human objects, we can interact with other humans and other objects - some of which are also mammals.

Coming soon...

Useful Links