CS50 2024 - Week 0: Computational Thinking and Foundations

Introduction to Computer Science and Programming

• CS50 Overview: This is Harvard University's introduction to the intellectual enterprises of computer science and the arts of programming. The course aims to teach students how to think, take inputs and produce correct outputs, and master foundational tools.
• Programming Languages: Throughout the semester, the curriculum covers several languages including Scratch, C, Python, SQL, HTML, CSS, and JavaScript.
• Core Objective: The goal is for students to become pilots or conductors in their interactions with computers, reaching a point where they can teach themselves new technologies and solve real-world problems.

The Role of Artificial Intelligence in Programming

• Modern Context: Artificial Intelligence (AI) has become ubiquitous and is fundamentally changing how programming is performed. This transformation has been underway for several years and is accelerating.
• AI as a Tool: AI serves as an assistant that can help find bugs, solve problems, and implement new features.
• Human as the Bottleneck: Historically, human effort has been the limiting factor in development due to finite time and team sizes. AI helps alleviate this bottleneck.
• Importance of Fundamentals: Despite the rise of AI assistants (like Copilots), understanding fundamental concepts remains essential. The relationship is compared to modern calculators; even though calculators exist, it is still valuable to understand basic arithmetic, derivatives, or integrals.

Creating a Custom Chatbot Demo

• Environment: Visual Studio Code (VS Code) is a popular, free, and largely open-source text editor used by industry professionals to write code. It functions like a text editor (e.g., Notepad or Google Docs) but without rich formatting like bolding.
• Python Programming: Using the Python language (files ending in $.py$), a chatbot can be constructed using about 10 lines of code.
• Implementation Steps:
  • Importing Libraries: Code begins by importing functionality from the OpenAI API ($\text{Application Programming Interface}$).
  • Client Setup: A client program is created to interact with the OpenAI software.
  • Models: Statistical models drive AI behavior. The demo utilized a model like $\text{GPT-5}$.
  • Dynamic Prompting: Instead of hard-coding a specific question, the program can use an $\text{input()}$ function to ask the user for a prompt, store it in a variable, and pass it to the AI.
  • System Prompts: These provide STANDARDIZED instructions to the AI to control its behavior, such as limiting answers to one sentence or adopting a specific persona (e.g., "pretend you're a cat").

Debugging and The CS50 Virtual Duck

• Rubber Duck Debugging: A practice where programmers keep an inanimate object (like a rubber duck) on their desk. When stuck, they verbalize their logic to the duck. This process helps the programmer identify their own errors through verbalization.
• CS50 AI: Students have access to a virtual duck at $\text{cs50.ai}$ or integrated within $\text{cs50.dev}$.
• Policy on AI Usage: Per the course syllabus, it is not allowed to use external AI like ChatGPT, Claude, or Gemini. However, using CS50's own AI tutor is highly encouraged. It is designed to act as a human tutor, leading students toward a solution without providing the answer outright.

Information Representation and Binary

• Computer Science Defined: The study of information representation and processing. It is primarily about problem-solving through computational thinking.
• Problem-Solving Model: Input (the problem) undergoes processing (the "black box") to produce Output (the solution).
• Binary System ($\text{Base 2}$): Computers represent all information using zeros and ones ($0$ and $1$).
  • Bit: A single binary digit.
  • Electrical Representation: On a hardware level, a $0$ corresponds to a switch (transistor) being off (low voltage), and a $1$ corresponds to it being on (high voltage).
• Counting in Binary:
  • Each position has a different weight based on powers of two.
  • Column weights from right to left: $2^0=1$, $2^1=2$, $2^2=4$, $2^3=8$, $2^4=16$, etc.
  • Three bits ($111$) represent the decimal number $7$ ($4 + 2 + 1$).
  • With one hand (5 fingers), using binary allows counting up to $31$, providing $32$ total combinations including zero.
• Bytes: A unit of measurement representing $8$ bits.
  • One byte can represent values from $0$ to $255$.
  • Total permutations for one byte is $256$ ($2^8$).
• Scaling Up: Modern systems typically use $32$ bits ($\approx 4 \times 10^9$ permutations) or $64$ bits.

Representing Text, Colors, and Media

• ASCII ($\text{American Standard Code for Information Interchange}$): A mapping of numbers to English characters.
  • Capital letter 'A' is represented by the decimal number $65$.
  • Capital letter 'B' is $66$.
  • Lowercasing a letter (e.g., 'A' to 'a') involves adding $32$ to the code. In binary, this means toggling the bit in the $32$ column from $0$ to $1$.
  • The message "HI!" is represented by the byte sequence $72$, $73$, $33$.
• Unicode: A superset of ASCII that uses more bits ($16$, $24$, or $32$) to represent all human languages, symbols, and emojis.
  • Emoji "Face with Tears of Joy" (\text{\U0001F602}) is decimal $4,036,991,106$.
• Representing Colors: Uses the $\text{RGB}$ ($\text{Red, Green, Blue}$) system.
  • Each color is represented by one byte ($0$ to $255$).
  • Black is $(0, 0, 0)$. White is $(255, 255, 255)$.
  • A shade of yellow might be $(72, 73, 33)$, where the context tells the computer to interpret these numbers as color rather than ASCII text.
• Images and Pixels: An image is a collection of dots (pixels). $\text{24-bit}$ color uses $3$ bytes per pixel.
• Video: A sequence of images (usually $30$ frames per second) that creates the illusion of motion.
• Music/Sound: Represented via parameters like frequency (pitch), duration, and amplitude (loudness).

Algorithms and Computational Efficiency

• Algorithm Definition: Step-by-step instructions for solving a problem.
• Searching Example (The Phone Book):
  • Linear Search: Searching one page at a time. Efficiency is $n$ ($\text{linear}$).
  • Two-Page Search: Searching two pages at a time. Efficiency is $n/2$. Risk of a "bug" where a name is skipped between pages, requiring a recoverable step.
  • Binary Search: Dividing and conquering by splitting the book in half repeatedly. Efficiency is $\log_2 n$ ($\text{logarithmic}$).
• Efficiency Comparisons: For a $1000$-page book, binary search takes roughly $10$ steps. If the problem size doubles to $2000$ pages, binary search takes only one additional step ($11$ steps), whereas linear search takes $1000$ more steps.
• Pseudocode: A human-language formulation of logic using computer science constructs like:
  • Functions: Verbs/actions (e.g., pick up, open to, call).
  • Conditionals: Forks in the road ($\text{if, else if, else}$).
  • Boolean Expressions: Questions with yes/no or true/false answers.
  • Loops: Cyclical behavior (e.g., "go back to line 3").
• Compilers: Programs that translate high-level code (like C or Python) into the zeros and ones (machine code) that the CPU understands.

Programming in Scratch

• Interface: A graphical language using blocks ($\text{puzzle pieces}$).
  • Blocks Palette: Categories of commands (Motion, Looks, Sound, Events, Control, Sensing).
  • Scripts Area: Where blocks are assembled.
  • Sprites: Characters (default is a cat) that inhabit a stage.
• Cartesian Coordinate System: The stage is an $x, y$ plane. The center is $(0,0)$. X-axis ranges from $-240$ to $240$. Y-axis ranges from $-180$ to $180$.
• Key Programming Constructs in Scratch:
  • Events: Triggers like "When Green Flag Clicked."
  • Side Effects: Visible/audible actions (e.g., $\text{say "Hello"}$).
  • Return Values: Data handed back to the program (e.g., the value in the $\text{answer}$ block after an $\text{ask}$ function).
  • Variables: Placeholders for data (e.g., a $\text{score}$ variable).
  • Abstraction: Creating "My Blocks" (custom functions). This allows a programmer to bundle complex logic (like meowing $n$ times) into a single, reusable block, hiding the underlying complexity.

Analysis of Game Demos

• Oscar Time: Demonstrates animation using Costumes (changing a sprite's appearance to simulate motion) and Parallelism (using multiple "When Green Flag Clicked" blocks to handle movement and collision detection simultaneously).
• Ivy's Hardest Game: Demonstrates collision detection and autonomous movement:
  • Wall Collision: If touching a wall, move $-1$ steps to prevent passing through.
  • Autonomous Movement: Using a loop to move and bounce when hitting an edge.
  • Tracking Behavior: Using the "Point Towards" block to make an enemy sprite follow the player's sprite.

Questions & Discussion

• Question: How does the computer differentiate between the letter represented by $65$ and the number $65$?
• Response: It is context-dependent. The programmer or the software specifies how to interpret the data. If a file is opened in a text editor, the bytes are treated as ASCII; if opened in a calculator or image editor, they are treated as numbers or colors.
• Question: Are binary and Base 2 the same thing?
• Response: Yes, just as decimal and Base 10 are the same.