Welcome to Part 1 of The Harvard CS50x Adventures. This is my journey, as a complete newbie, into the programming world. Throughout these adventures, you will see my exact thoughts and ideas as I take the CS50’s Introduction to Computer Science course on edX from Harvard University.

Today, we start at week 0 of the course where I learn some of the basics of computer science and get started with a simple drag-and-drop programming language known as Scratch. Let’s jump into this adventure!

Humble Beginnings

I was sitting in my chair in front of my computer. I had this bright idea jotted down in my notebook. The Marketing Programmer, a blog about computer science from the perspective of a digital marketer.

I was a little conflicted. I had just written a blog post about my roadmap into the computer science world. Still, I was hesitant about actually going on the journey.

It wasn’t a lack of desire to learn, but a problem from my blogging perspective. I was conflicted between writing blog posts when I didn’t fully understand the broad picture because admittedly, I know hardly anything about computer science. I didn’t want to publish anything blatantly wrong.

But at the same time, I wanted to showcase the entire experience with learning computer science from a beginner’s perspective. There were too many experts out there, it’s time for something different.

I couldn’t decide. But what the heck, I was wasting my time thinking. Why don’t I just start the course and see what happens?

Click, click. I opened up Google Chrome. I quickly typed in “Harvard CS50” in the search box and opened the edX link to the course.

CS50x 2020 Week 0, here we go!

Computers Speak In Binary

binary code

Photo by Alexander Sinn on Unsplash

As every good student should be doing, I was thinking while watching the lecture.

I watched Professor David J. Malan take the stage and introduce himself. Then he went into a brief explanation of what computer science is.

I eased in and became focused when Prof. Malan began his introduction of how computers interact.

Computers speak in zeros and ones also know as binary. Like our decimal system, computers also have place values. However, instead of ten, each place values have powers of two.

64 32 16 8 4 2 1

0  0  0  0 0 0 0

With binary, you have only two options. One or zero or, in other words, true or false. One represents true, and zero represents false. With that in mind, if we want to represent a number like five, it would look like this.

64 32 16 8 4 2 1

0  0  0  0 1 0 1

Amazing! I can basically speak in binary now.

But my mind was stirring. Yes, we can basically represent any number in the world with this system and do math, but how do we go from numbers to life-changing applications like WordPress blogs, YouTube, and the very games I play so often?

Going From Simple To Complex

Slowly the answers began to unravel themselves. As I was asking those very questions in my head, Prof. Malan seems he knows exactly what I’m thinking and starts explaining how we represent other data with numbers.

Some time ago, humans decided to create standards like ASCII and Unicode to use numbers to represent various characters like letters and even emojis.

Then we have RGB, which stands for red, green, and blue. Each pixel on any screen, your monitor, phone, laptop, TV, etc., is a combination of 3 lights, red, green, and blue. To get the colors we want, we assign some numbers to each color, and the mixture is what we see on our screens.

There was an interactive game in the lecture where the professor called up students to play. There were 8 light bulbs. They represented the place values, 128, 64, 32, 16, 8, 4, 2, and 1.

The volunteers had to make the number the professor assigned by turning on various lightbulbs. For example, to make the number 13, someone had to turn on bulbs 8, 4, and 1.

In essence, that’s what a computer does when it responds to code. It turns various switches on or off, and the mini lightbulbs making up our pixels on a screen will react to those switches. Except, a processor in a computer has billions of switches called transistors.

Complicated things are really just a combination of simple things.

I realized that what we have today is the same as what we had before except multiplied by thousandfolds. What’s happening in the background is still switches being turned on or off to represent numbers, except they switch at light speed.

This idea has definitely built a serious appreciation for how much our world has advanced from a technological standpoint.

What Computer Science Ultimately Is

programming on laptop

Professor Malan started the lecture with an explanation of what computer science is. In his words, “Computer science is fundamentally problem-solving.”

He presented us with a picture that had the word “input” on the left side with an arrow pointing towards a black box. And on the right side of the black box, there was an arrow pointing towards the word “output.”

We can think of inputs as the details of our problems and output as the solution. The black box is computer science.

This didn’t click for me until I began watching the professor tear up phonebooks. He was explaining algorithms and the strategies of how one might find a name in the phonebook.

Shoot. Computer science is problem-solving, but not just problem-solving. Computer science is about finding the best and most efficient way to solve a problem.

Why I Could Never Understand Computer Science

Learning what computer science fundamentally is was a huge epiphany for me.

Admittedly, I have taken various computer science courses here and there, and I plagiarized. I never finished the class because I was frustrated that for every assignment, I needed to look at someone else’s code, copy it, change the names, and then hand it in.

I didn’t know how to program, and I always thought it was a syntax issue. I thought it was because I didn’t understand the programming languages.

Now I realize, it was never a matter of understanding languages. It was about being a good problem solver. Now I also understand why, for every problem, there were ten different solutions.

I was always confused about which one to copy because I was thinking about which one was right and that’s the wrong way to go about computer science.

I was taking the approach of how I learned math and science in school. On all our tests, every question really only had one way to solve it. You had to show your work too, and if you did it differently, you would lose points even if you had the right answer.

But computer science was actually more like English, you solve a problem, and as long as you get the right solution, you’re right. There wasn’t one singular best way to do things, but there were still better or worse ways of accomplishing a task.

This meant that going forward, becoming good at computer science meant thinking like a problem solver and not looking for the formulas all the time, but rather figuring out how to use various methods together to solve problems.

Problem Set 0 Brainstorm

Okay, Problem Set 0. How should I go about this?

Let me review what I need:

  • Project must have at least two sprites, one of them has to be something other than a cat
  • Project must have three scripts in total
  • Project must use at least one condition, one loop, and one variable
  • Project must use at least one sound
  • Project should be more complex than most of the demonstrated projects in the lecture, but it can be less complex than Ivy’s Hardest Game

I need a project that’s not too big nor too small. I need an idea first.

I wasn’t even looking at any projects that have been created. I was just staring at the word “Soccer.” I should totally create a game.

What immediately came to my head was the game, Pong, or at least some basic version of Pong.

I’m going to follow Professor Malan’s advice and take baby steps. In fact, I’m going to develop the concept a little more and break my project up into pieces.

Planning Problem Set 0

First, I need to figure out the objective of my game. Pong originally is a multiplayer game played at an arcade. I want to create a singleplayer game, so some things need to be modified.

The first thing I thought of was a game where you stop a ball from hitting the ground with a platform. The ball would bounce around, and you would have to react to it. Then I thought it might be a little too dull even if I continually increase the speed.

What if I made a game that consisted of trying to hit individual targets with the ball by using a platform to bounce it around? That could be interesting.

So what are some of the basic things I need to program to make this all work?

First, I need a platform. It can only move right or left and must do so with the keyboard arrows.

Second, I need the ball. The ball must be able to bounce whenever it hits the top, right side, left side, or platform but restarts in the middle if it hits the bottom. When restarting, it must move to a random position.

Let’s start with the pseudocode of these two elements.

The Platform’s Pseudocode

If right key is pressed
Move right
Else if left key is pressed
Move left
Else
Do Nothing

The Ball’s Pseudocode

Start moving ball
If ball hits right edge
bounce off
If ball hits top edge
bounce off
If ball hits left edge
bounce off
If ball hits platform
bounce off
If ball hits bottom edge
stop all
play you lose

The Plan’s Changed, What Really Happened When I Started To Code

coding in scratch

Building the platform was easy. It took me less than a few minutes. All I had to do was make a forever loop and two if statements. One of them is “if right arrow is pressed,” then move right by 12, and the other was “if left arrow was pressed,” then move left by 12.

Pretty simple, easy peasy.

The problem started when I started to work on the ball’s movements. I didn’t really know how I was supposed to create what I listed in the pseudocode with the blocks I had.

I thought of using the glide options and the “if on edge, bounce” blocks, but it never really accomplished what I really wanted to achieve. It would move randomly on the map, occasionally hitting the edges, and then randomly teleporting somewhere else.

I went back into the notes to see if anything would give me an idea of what I should be doing.

Eventually, I came across the example where Professor Malan programmer a cat to move side to side and turn when hitting the edges. That’s exactly what I needed… except I needed it to bounce at a bunch of different angles and move all over the place.

But it got me in the right direction. First, I started off with a forever loop that encompassed the function “move X steps,” with X being a number you input. I set it as ten.

Okay, now the ball moves forever. I need to make it so that when it hits the edges or platform, it bounces. And if it hit the bottom, you lose, and the game restarts.

The bottom was easy. It’s just an if statement saying that if the ball touches the line, everything will stop. I added a “Dun Dun Dunn” sound, a representation of losing the game, and set the ball to restart in the middle for simplicity’s sake.

Hitting the left, right, top, and platform was the tricky part.

First, I need to figure out the if statements regarding hitting the edges. The platform was a little bit easier in this regard where there was an option, “if touching platform.” However, there were no options for the edges.

Eventually, I figured, when the ball is on the edge, it’s going to have a specific x and y position value, right? If I identify specific numbers as my edges, then whenever my ball’s position reaches that value, I can make it do something else.

So I came up with a few numbers to act as my edges. The next step was changing the ball’s direction.

I learned that when the ball moves, it has a value between -180 and 180 as its direction. I realized that there was no magical option that will allow the ball to bounce in the exact angle I wanted it to, and I had to do everything with math.

And that’s when this computer science problem turned into a math problem. I looked at the initial angles a ball would move at for each of the edges and looked at the number that was needed to create my desired rebound angle. I found a pattern and created a formula.

Whenever the ball hit the top edge, if its original direction is greater than 0, point in the original direction’s value plus 90. If it’s less than zero, minus 90.

For the left and right edges, it was more straightforward. The desired angle was just the negative option of the original value. So I put in the formula, 0 minus initial direction value.

The First Bugs

It was working well until playing around with my game made me realize something. My formula was not perfect.

If the ball ever bounced at angles such as 90, -90, 0, or 180, it will stay like that forever. That’s no fun for a game that’s all about reacting to where the ball bounces.

That’s when I started to debug and fix some of my issues. I began adding in conditions that if the angle of direction is ever in those 4 stated above, it will follow a different formula.

I also noticed that the gameplay wasn’t as smooth as I wanted it to be. Sometimes when the ball hits the platform, it hits it twice, and I have no idea why. For now, I left it in as it doesn’t disturb me too much.

Coding this small game has really developed an appreciation for the programming behind all the games I play. I’m actually an avid gamer, and after learning a little bit about programming, I can only imagine the work people go through to develop such sophisticated games that I play.

Adding In Features And Ready To Submit

Okay, all of the basic mechanics are working decently. It’s time to add in some things that actually makes this project a game. It’s boring if you just hit a ball around forever.

I added a system of levels and added variables. Whenever the ball hits the platform, it will send a message, and my variable, “Score,” will go up by one.

Then instead of a forever loop, I replaced it with a “repeat until” loop where once the score reaches a specific number, say 10, it will go onto the next loop where the speed of the ball has been increased. And then I added a “You Win!” and a cheering sound at the end when done.

At the time of writing, there are three levels. In the future, I might add in more levels where speed is increased even more, or the ball starts duplicating. I should probably beautify the setting of my game, but for now, this project meets all the requirements of Problem Set 0, and I’m ready to submit.

You can also check out my project here.

Submitted And I’ll See You Soon

With a few days of break where I had to do some work, I’m finally back and finished with week 0 of CS50x. My Scratch project has been submitted, and I even made an Instagram account for this blog where I published a hello world short introduction to the CS50 course.

Make sure you follow me and keep updated as I will continue posting. Get ready for Part 2 of the CS50x Adventures!

If you have any questions or comments, make sure you leave them down below. I will be sure to reply and see what you all have to say!