My Harvard CS50 Notes - Lecture 0 - Scratch

by Thibault Seynaeve 2 months ago 6 min read

I'm following the online Harvard CS50 course and I'm making my notes public!

Full lecture

Introduction

We're being introduced to professor David Malan. He seems extremely cool!

He explains that this is an introductionary course to computer science and the art of programming.

He prepares us for the fact that this course will feel like drinking from a firehose, because we'll be overwhelmed with a lot of information.

We'll learn:

C
Python
SQL
JavaScript
How to program (by understanding the core concepts so you can teach yourself new languages without following a class every time)
How to solve problems

Computer Science

It's about solving problems using certain ideas and techniques. We'll solve problems with computational thinking.

Problem solving basically consists of

Input -> something -> output

Binary

Computers only "speak" 0's and 1's (binary). Computers use electricity, so when you use base-2 (binary), you can use the presence of electricity (or the lack thereof) as 0 and 1.

A bit is a binary digit, a 0 or 1.

Computers have millions of transistors that are on or off, like a lightbulb. When the bulb is off, the bit is 0. When the bulb is on, the bit is 1.

In decimal (base-10), we assign the value of 123 to "one hundred and twenty three". That's because we learned that the digit to the right represents the 'ones', the middle column is the 'tens' place and the column on the left is the 'hundreds' place. If you think about it, we make this columns with 10⁰ , 10¹ , 10 ² etc.

If we change the base from 10 to 2, we get 2⁰ , 2¹, 2² , etc.

So that's how we can count in binary!

What is a byte? It's the equivalent of 8 bits. For example, 11111111 represents 255.

ASCII

How can we represent the letter A if computers only have access to 0's and 1's? We assing every letter a number.

For example, the capital letter A equals 65 (represented by a series of 0's and 1's), which means that a computer represents it as 01000001.

ASCII is enough for the English language, but 256 possibilities are not enough for more extensive languages.

Unicode

What if we have accented letters and certain glyphs, or even emojis. Unicode can use up to 4 bytes, which equals about 4 billion possibilities. The 😂 emoji is 11110000:10011111:10011000:10000010.

Since this is a very long string, we don't use it. We represent it more compactly with Unicode codepoints. It uses base-16 (hexadecimal) to represent it in a more compact way. Here, we also use A to F.

Color

If we just keep track of how much red, green and blue we need on the screen, we can create all possible colors. Every one of the dots (pixels) on your screen has 3 number associated with it. Those three numbers together display the color.

72 73 33 would be a green-ish color. Every value can be up to 255 (since it's 1 byte).

You use 3 bytes per pixel. Since the amount of pixels keep increasing, image files get bigger and bigger.

Music and videos

How can we represent audio/music? One number to represent the note, one number to represent the duration and one to represent the loudness.

Videos are many images moving quickly in a 'slideshow'.

Algorithms

Algorithms are step by step instructions to transform input to output.

What if we want to look for 'John' in the phonebook.

We can start from the beginning of the phonebook and read every name, but that will take a long time.

Another thing we can do, is start in the middle. We're in the 'M' section, so we know that John is to the left. We tear the phone book in 2 and throw awai the right half. We repeat the process and open the remainder of the book in the middle again. We're now at the E section, so we know John is on the right. We tear the book in half and throw away the left side. If we repeat the process, we'll find John on one final page.

We have to repeat this process roughly 1 times (from 1000 pages to 500, from 500 to 250, etc).

If next year the phone book doubles in size (from 1000 pages to 2000 pages), we only have to do 1 more step (reducing the phone book from 2000 pages to 1000 pages), while if we would use the first algorithm, it would take twice as long!

Pseudocode

Before we look at an actual programming language, we'll look at pseudocode, which is simply writing down your thoughts in a step-by-step way.

For example:

pick up phone book
Open to middle of phone book
Look at page
If person is on page
1. call person
Else if person is earlier in the book
1. Open to middle of left half of book
2. Go back to line 3
Else if person is later in the book
1. Open to middle of right half of book
2. Go back to line 3
Else
1. Quit

Actions like 'pick up', 'open to' and 'call' are functions.

Questions like 'if person is on page' are boolean expressions (true or false)

'Go back to line 3' is a loop

'If' and 'else' are conditionals

Artifical Intelligence

Imagine that we're creating a chatbot.

If the student says hello, the bot should say hello back.

If the student asks how you are, the bot should say that it's doing well.

If the student asks...

We can't anticipate the questions of the student, so we can't program a reply for every single query.

Large Language Models (LLM's) is an implementation of software that takes a lot of language (books, wikipedia pages, etc) and infers what a typical human would answer to a particular questions.

Scratch

For now, we'll create the cloud-based programming language Scratch to give us a very visual representation of ideas.

We add an event 'when the green flag is clicked' and make the cat say hello.

In this case, the input is 'Hello', the algorithm is 'say' and the ouput is the visual representation of the cat saying hello.

Next we ask the user for input (a name) and we want the cat so say 'Hello, Teebow'. We use the operator block 'join' to combine two results. In 'sensing', we drag and drop the answer to the question.

David emphasizes an import part of programming: don't repeat yourself!

If you want the cat to meow 10 times, don't add 'say meow' block 10 times, but instead use a repeat block. This makes it easier to maintain the code, and reduces the chances of error.

Now we go to 'My blocks' and create an own block that will make the cat meow. We create our own function! This is the important concept of abstraction. When our code for the meow function is done, we don't want to care about it anyway. We want it out of the way so it doesn't clutter other parts of our code.

Let's take it a bit further. We now want the function 'meow' to ask how many times it should meow.

This simple exercise demonstrates how we can take a parameter to make a function more flexible. This way we don't have to write a function meowThreeTimes, meowTenTimes, meowTwentyTimes, etc.

We proceed with conditionals, because we want to make the cat say 'meow' when our mouse cursor touches the cat. In this case we use the 'forever' block, so that the program keeps checking for a mouse pointer and not only once when you click the green flag.

David shows how he created a fun Sesame Street game, and he goes through the different iterations. He explains that you don't try to implement the final version of your idea from the get-go, but you take an incremental approach.

We end the first lesson with a performance of the Harvard Krokodiloes and The Radcliffe Pitches, followed by a piece of cake. I'm beginning to understand why Harvard is so expensive.

Problem Set 0

For the first problem set, I had to create a project in Scratch, so I built a simple clay pigeon shooting game. When a clay pigeon appears, you have to click it to destroy it. But beware of the real pigeons, you can't harm those! You can check out the 'game' here.