CS106A - Lecture 1 - Code and Bit

Today: Bit, code, functions, and the while-loop

• The computer is powerful
• But the computer is so stupid!
• It runs code mechanically
• You have insight
  Think of an algorithm
  Express ideas in code
  Dumb it down so even a computer can do it
• A great combination
• Your insight, driving the computer

Heads Up - 10 Little Things

• We are moving fast right here at the start
• I need to show 10 little things for anything to work
• They are numerous
• They are weird looking
• But they are not that difficult
• So just hang in there for a couple lectures

Program Made of Functions

A computer program (or "app") is a collection of code for the computer to run. The code in a program is divided into smaller, logical units of code called functions, much as all the words that make up an essay are divided into logical paragraphs.

Python programs are written as text in files named like "example.py". The program text will be divided into many functions, each marked by the word def:

Bit Robot - Getting Started

We have this "Bit" robot, lives in a rectangular world divided into squares, like a chessboard. Bit is my research project - open it up to the world soon. We'll use bit at the start of CS106A to introduce and play with key parts of Python. The code driving Bit around is 100% Python code. The nice thing about Bit code is that the actions have immediate, visual results, so you can see what the code is doing.

Here is bit in two sentences: bit moves from square to square, can paint the square it is on red, green, or blue. Black squares and the sides of the world are blocked - bit cannot move there.

For reference, here is a more detailed guide to Bit's features: Bit Reference

Bit can do 5 actions in the world: move, left, right, paint, erase

For now we'll just jump in with an example.

Example do_bit1() Function

Below is a code in a Python function named "do_bit1" that creates bit in a little world and commands bit to do a few things. There is syntax here - not pretty. Don't worry about all the syntax in there just yet. First let's see what it does.

def do_bit1(filename):
    bit = Bit(filename)  # Creates "before" picture
    bit.move()
    bit.paint('blue')
    bit.right()
    bit.move()
    bit.paint('green')

1. The function starts bit off facing the right side of the world with a couple empty squares in front (before-run picture):

2. The code in the function moves bit over a couple squares, painting some of them. So running the function does those actions, and afterwards the world looks like this (after-run picture):

Run It First

• Before looking at the code details
• Run the function to see what it does
• What does "run" mean?
• Run a Function = run its lines top to bottom
  Also known as "calling" the function
• Each line does something
• In this case, each line in the function prompts a little action by bit

Experimental Server Link

Here is the bit1 problem on the experimental server (you can run it too, or just watch):

> do_bit1() example

We'll use Nick's experimental server for code practice. See the "Bit1" section at the very top; the "bit1" problem is there. Often the code in a lecture example like this will be incomplete, and we'll work it out in lecture. There is a Show Solution button on each problem, so you can always play with it again later and check your answer.

Run It

Click the Run button and see what it does. See how bit takes actions in the world first, and then we'll fill in what's going on with the lines of code. You can use the "steps" slider to run the code forwards and backwards, seeing the details of the run.

Now let's look at all of that syntax to see how this works.

def do_bit1(filename):
    bit = Bit(filename)
    bit.move()
    bit.paint('blue')
    bit.right()
    bit.move()
    bit.paint('green')

Click the Run button a few times to run this function, then we'll discuss what each line of code does.

1. Run a Function = Run Its Lines

The Run button in the web page runs this do_bit1 function, running its lines of code from top to bottom. Running a function is also known as "calling" that function. In this case, each line in the function commands bit to do this or that, so we see bit move around as the function runs from top to bottom.

2. bit = Bit(filename) - Set Up World

This line creates the world with bit in it, and sets the variable bit to point to the robot. We needs this line once at the top to set things up, then the later lines use the robot. We'll explain this with less hand-waving later. This drawing shows the setup - the bit robot is created along with its world, and the variable bit is set to point to the robot.

3. bit.move() = Call the "move" Function

• There is a function named "move" that Bit understands
  This function moves bit forward one square
• The syntax bit.move() calls the "move" function
• Calling a function runs its lines
• This is the "object oriented" or "noun.verb" style of function call
• Note the parenthesis at the right side of the call bit.move()
  The call does not work without the parenthesis - syntax!

4. bit.paint('blue') = Call the "paint" function

• There is a function named "paint" that Bit understands
  It colors the square bit is on
• The paint function takes a "parameter" - extra information to use
• The parameter value we want to use is written within the parenthesis
• e.g. bit.paint('blue')
  This means: run the paint() function, passing in 'blue' as the parameter value
• e.g. bit.paint('green')
  Paints the square green instead
• The paint() function works with the three parameter values: 'red' 'green' 'blue'

5. Other functions: bit.left() and bit.right()

• There are also functions named "left" and "right"
• These turn bit left and right 90 degrees in the world
• The syntax to call these functions is the same, e.g. bit.right()

6. def = Define a Function

Now we'll go back and talk about the first line. This defines a function named do_bit1 that holds the lines of code we are running.

def do_bit1(filename):
    bit = Bit(filename)
    bit.move()
    bit.paint('blue')
    ...

• 1. The definition of a function starts with the word: def
• 2. The def is followed by a name for the function, e.g.: do_bit1
  The name is chosen by the programmer
  We'll have better examples later, we promise
  The name is often verb-like, referring to what the function does
  One or more lowercase words, separated by underbars
• 3. After the name is a parenthesis pair, not explained today, then a colon
• 4. All the indented lines below the def are the lines which make up this function
  In this case the lines move bit around
• Summary: a function = a name + a bunch of lines of code

A Little Talk About Syntax Errors

"Syntax" is not a word that regular people use very often, but it is central in computer code. The syntax of code takes some getting used to, but is not actually difficult.

• Syntax - code is structured for the computer
  Remember the computer is kind of dumb!
• Very common error - type in code, with slight syntax problem
• e.g. syntax error: bit.move[)
• Professional programmers make that sort of "error" all the time
• Just type it in, run it, fix the errors
• Not a reflection of some flaw in the programmer
• Do not give in to the following thoughts (imposter syndrome):
  "Another syntax error .. maybe I'm not cut out for this!"
  "I bet nobody else is getting these"
• Just the nature of typing ideas into the mechanical computer language
• Fixing these little errors is a small, normal step
• The computer is a powerful tool in your hands
  But you need to talk to them their way on syntax

"Bit Errors" Exercise - Sport and Fix!

• Exercises to desensitize: a bunch of typical errors, see them and fix them
• These all have errors, trying run and fix (lecture demo, or on your own)
• Would a human understand what these mean, even with the errors?
• These are on the experimental server, uses your Stanford login
• Compile Error - syntax problem, code does not run
  e.g. mismatched parenthesis or quotes, un-even indentation
• Runtime Error - code runs, then hits an error on some line
  The program halts on the error line
  Bit gets a funny "error" face for a runtime error
• Lecture, start with 1, 3, 6
• biterr1 (syntax error)
• biterr2
• biterr3
• biterr4 (runtime error)
• biterr5
• biterr6 (bad move)
• biterr7
• biterr8

(optional) You Try One: bit2

> do_bit2() example

Here is an exercise like bit1 with the code left for you to do. We probably won't have time for this today, but you can do it on your own.

Bit begins at the upper left square facing right. Paint the square below the start square green, and the square below that green as well, ending like this:

The word pass is a placeholder for your code, remove it. Conceptually this does not look hard, but expect to make some mistakes as you get the little syntax and naming details right as required by the (lame, needy) computer

Aside: Pedagogy Words vs. Just Run It

• Good to have words, explaining how something works
• But that only goes so far
• Can just put an example up and just run it
• SEE how it works
• We try to use visualization tech so this works

Suppose I Give You This go-green Problem

Bit starts at the upper left square as usual. Move bit forward until reaching a wall, painting every moved-to square green. The resulting world looks like:

• Looks like a lot of work + tedious
• To make all that green, lots of these two lines
  bit.move()
bit.paint('green')
• Need to stop when reaching far wall
• Q: How to do this?
• A: Loops

Run go-green code

First we'll run the code. This code is complete. Watch it run a few times to see what the loop does, and we'll look at the details below.

> go-green

Aside: Checkmark / Diff Features

• The system knows what the world is supposed to look like when the code works correctly
  If the output is correct at the end of the run, it gets a green checkmark
• "diff" Feature - diagonal red marks on incorrect squares
  The system knows what the world is supposed to look like, marking squares that are the wrong color with a red diagonal

How Does a Loop Work?

The loop is a big increase in power, running lines many times. There are a few different types of loop. Here we will look at the while loop.

While - Test and Body Syntax

The while loop has two parts - the test expression which controls the looping, and the body contains the lines which are run again and again.

While Test

The first thing the while does is run the test code to see if the loop should run or not. In this case, the test is the code bit.front_clear() so we need to look at what that function does.

bit.front_clear()

• The function bit.front_clear() tests if the way forward is clear for a move
• Calling bit.front_clear() returns either True or False
True if the square in front is clear for a move, False otherwise
  These are the two special "boolean" values in Python
• In effect, the way forward is clear if it is not blocked by the edge of the world or a black square
  (we'll see black squares shortly)

bit.front_clear() Expression

The phrase bit.front_clear() here is an expression. An expression is a bit of code which runs as usual, and returns a value to that spot in the code. A common way to visualize an expression in action is drawing a diagonal arrow over the expression, showing the returned value sort coming out of the expression. Here is a drawing showing the boolean value coming out of the bit.front_clear() with bit not blocked and then blocked:

How the While Loop Works

• First the loop evaluates the test-expression at the top - True or False?
• If True, the loop runs all the lines of the body, top to bottom
  After the body, it always loops back to top, to check test again
  After every run of the body .. go back and check the test
• Eventually when the test is False, the loop is done, running continues after the loop body
• If the test is False for the very first check, the body runs zero times. This is fine. (see go-green Case-4)

go_green() Code

Looking at the go_green() code and watching it run is a way to see the order that the while-loop runs the lines. Each time the test is True, the loop body moves bit forward one square and paints it green. Then the loop always comes back to the top, and evaluates the test again. Eventually bit will move to the rightmost square, paint it green, and then loop back to check the test again. Sitting on that rightmost square, the test will return False and the loop is done.

def go_green(filename):
    bit = Bit(filename)
    while bit.front_clear():
        bit.move()
        bit.paint('green')

Question: Line 5?

> go-green

Run the go-green code. Move the steps slider back so there are 2 un-painted squares and line 5 is hilighted.

Question: What line runs after line 5?

Look at the code and think about it. Then click the step button to advance the run to see what comes after line 5. It's the same every time, even the last time the loop runs.

Observations...

While Loop - Power!

• Loops are a big jump up in power
• "Do these lines again and again"
• Every algorithm has key lines to run thousands or millions of times
• Several types of loop - today while, next week for

Idiomatic Move-Forward Loop

Moving forward until blocked is a common pattern in bit problems, we'll use this code pattern to do something to each moved-to square. Often a problem statement will say to do something to each "moved to" square.

    ...
    while bit.front_clear():
        bit.move()
        # Do something to moved-to-square
    ...

One Code - Many Cases - Generality

• See the Run All menu option
• "Generality"
• There is one copy of your code algorithm
• There are many different cases it should work on
  Infinitely many possible cases actually
• General = the code should work for all the different input worlds
• Try the Run All option to see this in action

If We Have Time...

All Blue Example - Mine It For Observations

> All-Blue

Bit starts in the upper left square facing the right side of the world. Move bit forward until blocked. Paint every square bit occupies blue, including the first. When finished, turn bit to face downwards. (Demo - this code is complete. Shows the basic while-loop with front_clear() to move until blocked, and also taking an action before and after the loop.)

all-blue() Code

def all_blue(filename):
    bit = Bit(filename)
    bit.paint('blue')  # 1 paint before the loop
    while bit.front_clear():
        bit.move()
        bit.paint('blue')
    bit.right()  # Turn after the loop

1. Run All Blue Normally

When a problem says "until blocked", you typically use front_clear() a the test. In the loop, the code moves forward one square, paints it blue. The loop works on each "moved-to" square.

2. First Square is Different

Since the loop does move-then-paint, it can't do the first square. We add a separate paint to do the first square. The while loop is not set up to do the first square, so we accept for many problems that we will need to add extra code before the loop if any action is needed for the first square.

3. Do Something After The Loop

Lines in the loop run many times. Lines before or after the loop run just once. In this case, to turn downwards after the loop: the line bit.right() is after the loop, and not indented within the loop.

All-Blue Observations

• Lines before and after loop run once, as usual in a function
• Body lines in the loop are different, running many times
• It's possible for the body to run zero times

You Try It - Go RGB

> Go-RGB

Problem statement: Bit starts in the upper left square facing the right side of the world. Paint the first square red. Move bit forward until blocked. Paint each moved-to square green, except the very last (rightmost) square, paint blue. If the first square and last square are the same, paint it blue. It's ok if the code paints a square one color, and then paints it again with its correct, final color. This problem depends on lines of code before and after the loop code.

• Look at All Blue code as inspiration
• Lines before the loop for the first square
• The loop - with its lines indented after the test does the middle part
• Lines after the loop for the last square