W0 - 👨‍🏫 Lecture - Computer Science from Scratch

Video: YouTube
|500

#CS50x #Computer_Science #Complexity_Theory
#Algorithms #Complexity_Theory

Read more here

Previous Part | Next Part 🔜

↩️ Go Back

Table of Contents:


A) Introduction to CS50 and Problem Solving

A.1) What is Computer Science? 👨‍💻🧩

Welcome to CS50, Harvard University’s introduction to computer science and programming.

At its core, computer science is about problem-solving.

You take an input, which is the problem you wish to solve, and work toward a solution, or output. In between lies a “black box” of code — the magic that enables computers to process solutions.

Our goal is to empower you to control this process.


A.2) First Programming Experiences

Early in the course, you’ll recreate a portion of Super Mario Brothers using ASCII art, giving you a taste of foundational programming.

Later, you’ll build CS50 Finance, a web application that simulates real-time stock trading using virtual currency.

Over time, you’ll move from simple projects to fully functional applications, culminating in a final project of your own design.


B) Counting Systems: Unary, Decimal and Binary 🖐️🤖0️⃣1️⃣

What is Computer Science?

A simple way to understand data representation is to start counting people in a room with fingers. This unary notation, while easy to grasp, is limited. We humans are more used to counting with base 10 (using the digits 0,1,2,3,4,5,6,7,8,9).

Computers use binary, which consists of only 0 and 1.

Unlike our base 10 system (from 0 to 9),

where we construct numbers based on powers of ten,

binary is based on powers of two, creating a simplified yet powerful framework for data representation.

B.1) Binary and Bits

The 0 and 1 from binary are known as bits (binary-digits)

Computers communicate through binary because they operate with electricity: on (1) or off (0). This state can be represented by light bulbs

or, more accurately, by millions of tiny transistors inside a computer, each capable of switching on or off.

Increasing Representation with Bits:
With multiple bits, we can represent increasingly complex values.

For example: Three bits (each representing 0 or 1) enable us to count from 000 to 111, or from 0 to 7. Each additional bit doubles the number of values we can represent, enabling computers to process and store vast amounts of data.

B.2) Decimal to Binary Conversion

Computers rely on base 2, where each position corresponds to a power of two: ones, twos, fours, and so on. For example:

With this structure, we move beyond simple light bulb analogies to a scalable, efficient representation system.

Binary Number Example: Converting 110010 to Decimal
Consider the binary number 110010. What decimal value does this represent? Here’s how to break it down:

Following this pattern, the binary 110010 translates to 32 + 16 + 2 = 50 in decimal.

The Power of Binary in Computing:
Binary’s simplicity enables computers to handle complex calculations. Using patterns of on and off switches (bits), computers process data efficiently. The ability to represent numbers and data in binary underpins all computational processes, from simple calculations to complex algorithms.


C) Beyond Numbers: Representing Letters with Binary (ASCII and Text Representation) 🖥️⌨️

Computers began as calculators,

|300

but they now handle much more complex tasks, including representing text.

|400

How, then, could a computer represent letters of the alphabet using only switches (binary)?

For instance:

  • Suppose we assign a binary value to each letter, with A represented by 65 in decimal form.
  • This system of mapping binary numbers to text characters is called ASCII** (American Standard Code for Information Interchange).

    ASCII was created to represent letters and punctuation in English, with 65 representing A, 66 as B, and so forth.

    This standardized mapping allows computers to interpret binary patterns as letters or symbols depending on context:

    C.1) ASCII Limitations and Expanding Character Sets (Unicode)

    While ASCII represents English characters effectively, it lacks support for many global languages.

    Each ASCII character requires 8 bits (1 Byte), allowing for 256 possible characters (2^8 combinations).

    However, this range is insufficient for accented characters and non-Latin scripts, such as those in Asian languages.

    or even emojis,

    As computing has evolved, the need for larger character sets has become essential for representing diverse global languages.

    Unicode was developed to address the limitations of ASCII, allowing computers to support thousands of characters across various languages and symbols.

    For example, while English characters fit comfortably within ASCII (256 characters), more complex languages with unique characters, such as Asian scripts, require far more.

    In Unicode, additional bits (16, 24, or even 32) are often used, providing an expansive range to include emojis, special characters, and diverse alphabets.

    C.1.2) Emojis: Adding Emotion to Text (Modern Text Representation with Unicode) 😃

    Emojis, which are commonly used in digital communication, may look like images, but they are technically characters represented by patterns of zeros and ones in Unicode.

    Just like letters, each emoji has a unique binary pattern that corresponds to a specific decimal code.

    For instance, the popular “face with tears of joy” emoji is represented by the decimal 128514.

    and as we know, the binary representation would look like this:

    This allows emojis to appear consistently across devices and platforms, transforming simple text into expressive symbols.


    Read more here


    D) Representing Color with RGB in Computers 🟥🟩🟦

    Color representation in computers follows a similar principle (we need to use numbers to represent them).

    Since we need a standard way to define colors, we use systems like RGB (Red, Green, Blue).

    The RGB model allows computers to create any color by combining these three components:

    Each color in a pixel is expressed as 24 bits (8 bits for each red, green and blue shades), which means every pixel on the screen is assigned a specific amount of red, green, and blue to create a precise color.

    And from a distance, the color combination looks like this (a yellow pixel),

    D.1) Pixels and Image Resolution

    An image is composed of many small pixels, each defined by an RGB value. When viewed at normal resolution, these pixels blend into a smooth image.

    However, zooming in reveals each pixel as a distinct colored square, a process known as pixelation. This characteristic is especially noticeable when resizing lower-resolution images, where individual pixels become apparent.

    Each pixel's RGB values require 24 bits (or 3 Bytes), and with large images containing thousands of pixels, file sizes quickly increase.

    This is why high-resolution images are often measured in kilobytes (KB), megabytes (MB), or even gigabytes (GB).


    D.2) Representing Video Files (A Sequence of Rapid Images)

    A video is essentially a sequence of images (frames) displayed in rapid succession to create the illusion of movement.

    Each frame, just like a still image, consists of pixels with their respective RGB values.

    By changing the pixel colors frame-by-frame, a computer can display fluid motion. So, a video file is essentially a series of images, processed and displayed quickly enough to appear as continuous motion.

    |300


    E) Audio Representation in Computing 🔊🎵

    Computers represent audio using numbers to encode sound frequencies and duration.

    For instance, a musical note can be represented by a specific number that denotes its pitch,

    and another value can indicate duration.

    This way, audio can be broken down into small data units, making it possible to store and play back complex sounds.

    By standardizing these values, computers can produce sound files (Digital formats for audio) that play consistently across devices.


    F) File Formats and Representation Standards 💾📄🤝

    Different file types—such as JPEG for images, MP3 for audio, or MP4 for video—each have unique encoding methods that organize bits in specific ways to optimize file storage and interpretation.

    These formats are essentially agreements among developers,

    on how to structure zeros and ones to ensure that computers can interpret data correctly.



    ____________________________________________________________



    G) Intro to Search Algorithms: Solving Problems Efficiently ----- 🧠🔄🧩

    In computer science, algorithms... (the blackbox that solves our problem)

    provide step-by-step instructions for solving problems.

    For computers, algorithms must be both correct and precise to ensure accurate results.
    There is not place for ambiguity for machines.

    |300

    Programming involves translating these algorithms into a language computers understand, which we often develop first in pseudocode—a structured outline in plain language.


    Algorithm Example: Searching Contacts in a Phone Book 📖📞

    In our everyday lives, searching for information, like a contact’s phone number, is a common task.

    On digital devices, contacts are typically stored alphabetically.

    Similarly, in the past, people relied on phone books, which organized names in alphabetical order.

    Now, we’ll explore some algorithms by examining three different approaches to searching for a name in a phone book.

    Suppose we want to look up a name in the phone book.

    If I’m searching for “David,” I could start at the first page and move through each one until I find my name.

    The pseudocode for our algorithms would look like this:

    1. Look at the first page for the name.
    2. If it’s not there, move to the next page, repeating until I find the correct page.

    This linear search is correct because it eventually finds the name, but it’s also slow and inefficient.

    If “David” is toward the end of the phone book, this method takes a long time. This search strategy is “correct” in that it eventually finds the answer, but it’s not efficient.

    Approach 2: Skipping Pages (Linear Search with Improved Efficiency) 🐢

    To make the search faster, we could increase our steps and check every second page instead of every single one.

    The pseudocode for our algorithms would look like this:

    1. Look at the first page for the name.
    2. If it’s not there, check every second page, moving through the book twice as fast, repeating until I find the correct page.

    BUT....

    This skipping strategy speeds things up, but it introduces the risk of missing the name if it happens to fall on a skipped page.

    To address this, we can add a backup step:

    This makes the algorithm more efficient without losing accuracy, though it requires a little more effort to account for missed pages.

    However, this approach is still linear and relatively slow for large phone books.


    Approach 3: Divide and Conquer (The "Binary Search" Algorithm) 🐇

    A much more efficient way to search is the binary search algorithm, which divides the search space in half with each step,

    The pseudocode for our algorithms would look like this:

    1. Open the phone book to the middle page.
    2. Check the name on the page:

    Each time we repeat this process, we’re cutting the remaining search space by half.
    In other words, we are making the problem smaller an easier with each step.

    This “divide and conquer” method is highly efficient: with a 1,000-page book, binary search requires only about 10 steps to find the target, no matter where it appears.


    Efficiency Comparison: Linear vs. Binary Search (Big O Notation)

    To understand the efficiency of these approaches, we can visualize them on a graph:

    In computer science, we express these efficiencies mathematically:

    Read more about:

    The power of binary search illustrates an essential computer science principle: algorithms should be both correct and efficient. With careful design, we create solutions that not only solve problems accurately but also use resources wisely.

    We will go deeper about these topics in this lecture:



    ______________________________________________________________



    H) Key Constructs in Algorithms and Programming

    H.1) Writing Binary search as "pseudocode"

    So let me propose that what I really just did verbally (the binary search) can be translated into pseudocode, which is like an algorithm implemented in English, or whatever your spoken or written language is.

    But the key is that it's got to be correct, and ideally it had better be precise so that there's no ambiguity.

    We then can write this:

    read it and try to understand how the problem is solved step by step.

    Note: notice how we have an Else ---> Quit. That means that if the name does not exist in the phone book then we stop searching, otherwise our logic could crash.


    H.2) Foundational Concepts used to create programs

    In the phone book example, we see several programming concepts at play:

    These foundational concepts help in designing precise and efficient algorithms, reducing the need for redundancy by enabling a loop to handle repeated actions.

    We have many topics to cover in this programming course, and we will.


    H.3) Transitioning to Code: From Pseudocode to Programming

    Once the algorithm is clearly laid out in pseudocode, we move to actual programming.

    In CS50, we start with Scratch, a graphical programming language that visually represents core concepts.

    After Scratch, we progress to a text-based language known as C.

    Though C is powerful, its syntax can seem complex, with elements like #include, <>, {}, ;, and quotes.

    A simple C program that prints “hello, world” may look complicated at first, but mastering syntax will enable us to command the computer with precision.

    Despite its initial complexity, C serves as an ideal foundation for learning how computers interpret algorithms in code form.

    I) Scratch: Building Blocks overview 🐱🧱

    I.I) main block

    When the code starts, it first runs at the yellow block

    In C we have the main function, where we start running out code,

    I.2) print block

    I.3) get user input block

    I.4) conditional blocks




    I.5) variable blocks

    I.6) loop blocks


    I.7) function blocks

    For example, a custom function meow() can handle the printf command.


    Previous Part | Next Part 🔜

    ↩️ Go Back


    Z) 🗃️ Glossary

    File Definition
    Uncreated files Origin Note
    algorithms W0 - 👨‍🏫 Lecture - Computer Science from Scratch
    ASCII W0 - 👨‍🏫 Lecture - Computer Science from Scratch
    ASCII W0 - 👨‍🏫 Lecture - Computer Science from Scratch
    ASCII W0 - 👨‍🏫 Lecture - Computer Science from Scratch
    ASCII W0 - 👨‍🏫 Lecture - Computer Science from Scratch
    ASCII art W0 - 👨‍🏫 Lecture - Computer Science from Scratch
    base 10 W0 - 👨‍🏫 Lecture - Computer Science from Scratch
    binary W0 - 👨‍🏫 Lecture - Computer Science from Scratch
    binary W0 - 👨‍🏫 Lecture - Computer Science from Scratch
    binary W0 - 👨‍🏫 Lecture - Computer Science from Scratch
    binary search W0 - 👨‍🏫 Lecture - Computer Science from Scratch
    binary search W0 - 👨‍🏫 Lecture - Computer Science from Scratch
    binary search algorithm W0 - 👨‍🏫 Lecture - Computer Science from Scratch
    bits W0 - 👨‍🏫 Lecture - Computer Science from Scratch
    computer science W0 - 👨‍🏫 Lecture - Computer Science from Scratch
    computer science W0 - 👨‍🏫 Lecture - Computer Science from Scratch
    computer science W0 - 👨‍🏫 Lecture - Computer Science from Scratch
    computer science W0 - 👨‍🏫 Lecture - Computer Science from Scratch
    computer science W0 - 👨‍🏫 Lecture - Computer Science from Scratch
    Computer science W0 - 👨‍🏫 Lecture - Computer Science from Scratch
    natural numbers W0 - 👨‍🏫 Lecture - Computer Science from Scratch
    pixel W0 - 👨‍🏫 Lecture - Computer Science from Scratch
    programming W0 - 👨‍🏫 Lecture - Computer Science from Scratch
    pseudocode W0 - 👨‍🏫 Lecture - Computer Science from Scratch
    time complexity W0 - 👨‍🏫 Lecture - Computer Science from Scratch
    time complexity W0 - 👨‍🏫 Lecture - Computer Science from Scratch
    transistors W0 - 👨‍🏫 Lecture - Computer Science from Scratch
    unary notation W0 - 👨‍🏫 Lecture - Computer Science from Scratch
    Unary Notation W0 - 👨‍🏫 Lecture - Computer Science from Scratch
    Unicode W0 - 👨‍🏫 Lecture - Computer Science from Scratch
    Unicode W0 - 👨‍🏫 Lecture - Computer Science from Scratch
    Unicode W0 - 👨‍🏫 Lecture - Computer Science from Scratch
    UTF-8 W0 - 👨‍🏫 Lecture - Computer Science from Scratch