Computing Big Ideas

< CS101

Computing - The World of Computers

• What patterns are you picking up in CS101 about the computer world?
• CS101 Strategy: play with computers and code first
• Distill the important patterns

1. Data - Lots of Numbers

• Data - an image, an email - "atomized" in the computer
• Lots of little numbers (one byte stores one number 0..255)
• Image: grid of pixels, each pixel is red/green/blue numbers 0..255
• Text: one letter represented by its ASCII code in one byte
•  - 'A' is 65, 'B' is 66, ...
• Data table (e.g. baby names) - field/row/column rectangle of text
• Work with the data:
•   code looks at/changes the numbers

2. Code

• Code
• Mechanical instructions
• Computer just follows these simple instructions
• No insight
• e.g. print(6;
• e.g. pixel.setRed(255);
• Loops - Mass Effect
•   - for (pixel: image) {
• If-Statement - Conditionality
•   if (pixel.getRed() > 100) {

3. Algorithm

• Concrete series of steps to accomplish a computation
• The idea of algorithm predates computers by thousands of years
•   -Named after ancient Baghdad astronomer and mathematician al-Khwarizmi. The word "algebra" is also derived from some of his early work ... that's a pretty influential historical figure!
• Not tied to a syntax as a computer program is
• The *idea* of the steps to perform
• e.g. long division as learned in elementary school
• No: -- I want the curb in this picture to be gray
•   -That's just describing the goal, not the steps to get there
• Yes: To make the curb gray, consider the average of the RGB values of each pixel. If the red value is greater than that average times 1.2 then ....
• In CS101 problems, I often write the algorithm I want done in English, letting you figure out how to express that idea in Javascript code.

Code vs. Algorithm

• Monkey Bluescreen Algorithm - real creativity here
• -Select the blue by comparing blue to the avg
• -Pick out pixels from the back image, but at the same x/y as the front pixel
• -Copy the red/green/blue values over to the main image
• Look at the code below: it takes the creative algorithm, and breaks it down and expresses it in the simple lego-brick steps that the computer actually understands.
• That's CS101 - how a creative programmer builds something actually useful out of simple code components

Here's our monkey/moon bluescreen example code

image = new SimpleImage("monkey.jpg");
back = new SimpleImage("moon.jpg");

for (pixel: image) {
  avg = (pixel.getRed() + pixel.getGreen() + pixel.getBlue())/3;
  if (pixel.getBlue() > avg * 0.92) {
    pixel2 = back.getPixel(pixel.getX(), pixel.getY());
    pixel.setRed(pixel2.getRed());
    pixel.setGreen(pixel2.getGreen());
    pixel.setBlue(pixel2.getBlue());
  }
}

print(image);

4. Bug

• "Bugs" are flaws between the correct intended algorithm, and what the code actually says
• The code as written does not implement what the programmer had in mind
• The computer does not say "gosh, I don't think this is what you meant"
• The code says whatever it says, and the computer just does it
• Here is an example of code with a bug. The goal here is to change the image to grayscale.

for (pixel: image) {
  avg = pixel.getRed() + pixel.getGreen() + pixel.getBlue()/3;
  pixel.setRed(avg);
  pixel.setGreen(avg);
  pixel.setBlue(avg);
}

The bug here is avg computation is missing a set of parenthesis. The intent is to do the addition, then the divide by 3. As written, only the blue value is divide by 3, the other two used as is, resulting in an avg number that is too large, like 300 or 400, so the result will be to mostly set the image to all white. The correct line for the intended algorithm is avg = (pixel.getRed() + pixel.getGreen() + pixel.getBlue())/3;

5. Abstraction

• Abstraction is a vital strategy within computing
• Every technology has a "consumer"
• Abstraction = the technology presents the consumer with simplified story of what will be accomplished
• Internal to the technology, something complicated is going on, but the consumer does not need to know that
• e.g. Prius Brake Pedal
• The Toyota Prius (and any part-electric car really) has regular brakes on its wheels like every car has. It also has a generator that slows the car and generates electricity. The brake pedal abstracts the blend of brakes+generator so you don't know or worry about. Pedal = slow-down.
• "Slow-down" is the abstraction of the brake pedal. It's all you need to know to use it.
• e.g. pixel.setRed(255)
• pixel.setRed() is an abstraction that gives you the ability to set the red value. Under the hood, something more complicated is happening, but those details are hidden. When code calls pixel.setRed(255), that action does happen, along with other complications we don't need to know about.
• Key point: Computer systems have layers: hardware, programming languages, operating systems
• Each layer uses abstractions heavily to make simple features available to other layers, while hiding some complexity. This technique is used a lot to keep the complexity in check.