1. I wish that we could calculate by steam.
- attributed to Charles Babbage
The computer is a universal machine.
It’s a mind-set, not a skill-set. Brilliance helps, but is not required. Instead, adopt these mantras: be stubborn, bossy, lazy, obsessive, cynical, plodding, and importunate. Why? So you can use IT as a tool to do cool stuff…
Schedule:
Monday – service (John 13); Universal machine (slides 1-6); software/data/expressions (slides 18-22); lab 2.1
Wednesday – architecture/Moore’s law (slides 7-17); binary representations/color? (slides 23!; 24-30?); variables (slide 20); lab 2.2
Friday – work day
Monday – functions/scope (slides 36-37); repetition/animation effect (slide 34); lab 3.1; quiz 1. (postpone scripture/news to Wednesday)
Wednesday – algorithms (slides 32-35); lab 3.2

2. Computing Systems Universal Machines Computer elements:
Computer Architecture
Computer Software
I’ve done these sections in the following way:
History, Technology and Perspective on Monday in the classroom
Architecture on Monday in the lab (by moving the students)
Software as an introduction to the lab on Wednesday

3. Computer History
Computers were developed to mechanize mathematical computations.
Two historical definitions:
A computer is “one [a human] who computes; a reckoner; a calculator.” - Webster’s Dictionary, 1828
A computer is “a programmable electronic device that can store, retrieve, and process data.” - Merriam-Webster Dictionary, 2000
Manual computing was very important in the 1800’s (industrial revolution) and into the 1900’s (the world wars) because of the use of mathematical tables in navigation, engineering, etc. The tables were also very hard to produce and filled with errors.
A British mathematician named William Shanks spent 28 years of his life calculating Pi to 707 places, finishing in Soon after his calculations, another mathematician called De Morgan found that Shanks had made an error in the 528th place, after which all his digits were wrong!
The 2 definitions show how the view of computing changed around 1940.

4. Charles Babbage (1791-1871) “Analytical Engine”
1833
Primary innovation:
The difference engine was single-purpose
The analytical engine was general-purpose
Only the difference engine was built, recently.
Babbage died an embittered man, having never convinced anyone of the value of his ideas (apart from Ada and a few others - see the next slide)
“recently” links to excellent 4 minute video of Difference Engine No. 2 built after 2000
XXX In the video the machine is much bigger. And the picture is from the British museum? I think I saw it there.
a recreation of the difference engine
images from Oct., 2004

5. Ada Lovelace (1816-1852) “the first programmer”
Developed a set of “notes” on how to instruct the analytical engine
Suggested the use of punched cards
Known as the “first programmer”
She was Countess of Lovelace and Lord Byron’s daughter. She was a supporter and mentor of Babbage.
images from Oct., 2004

6. The Universal Machine A computer is a universal machine.
It can perform any computation.
Key ingredients in our universal machines:
Hardware
Software
Computers are universal devices, unlike hammers and other artifacts that are designed to do one thing.
Hardware: framework for “any computation”.
Software: describes a specific computation.
a communication with the computer.

7. Computer Architecture
Network
Mother board
CPU
RAM
CPU/Main Memory - Find info on your machine’s CPU (mouse-right on “My Computer” and choose “Properties”). You should be able to find all the info on your main memory and processor, but our lab may restrict part of that information. – Multiple-core processors
System State - Show the current system use (ctrl-alt-del and choose “Task List”). See what you can find about the current machine state here.
Secondary Storage – Find the size of your hard drive an your other mounted drives. Double-click on “My Computer”. Make particular note of the H: drive. – Backups!
Peripheral devices – Note the peripheral devices the system has. Note that the printer is mounted remotely and that you now have a print quota at Calvin. – Touch screens
Network – Check the network connection speed (using the task manager opened above). Internet (discussed later)
Software – Check out the OS (using “My Computer” – “Properties”) and the application programs as time allows.
Hard disk CD
DVD
USB drive

8. Memory Sizes Bit Byte Kilobyte (KB) Megabyte (MB) Gigabyte (GB)
Terabyte (TB)
Petabyte (PB)
Exabyte (EB)
Bit - A single 0 or 1
Byte - 8 bits: enough to store one character
Kilobyte (KB) – 1024 (2^10) characters: a paragraph of text
Megabyte (MB) - ~1 million (2^20) bytes: a book or a minute of mp3 audio
Gigabyte (GB) - ~1 billion (2^30) bytes: 16 hours mp3 audio, 20 minutes of DVD video
Terabyte (TB) - ~1 trillion (2^40) bytes: all the text in Calvin’s library, or 150 DVD movies

9. Historical Perspective
ENIAC
200 bytes memory
5,000 additions per second
Allegedly dimmed the Philadelphia lights when started
30 tons
Samsung Galaxy S3
16G memory
~1.5 billion additions per second
runs on a 3.7v, rechargable, lithium ion battery
133 grams
- Palm VIIx has a 20MHz Motorola MC68EZ328 Dragonball processor, 8MB
of RAM, 2MB of Flash memory, and can display 16 gray scales
The Clie T665C has a new DragonBall Super VZ Processor (66 MHz CPU)/16 MB (DRAM) Memory
Droid X2 uses a dual-core, 1Ghz processor, up to 32GB RAM.
The original DOS OS was limited to 640K - way too small!
images from & Sept., 2013

10. Moore’s “Law”
There is some question as to whether this trend will continue and if it will ever hit a “wall”. See Kurzweil.
Moving to multi-core changes speed-up claim.
Note the log scale on the left!!!!! Exponential growth!!
Processing capacity for the price doubles every 18 months
image from wikipedia, January 2009

11. What’s the
Big Idea
The Digital Divide
Not everyone has equal access to information technology.
“I now realize how true it is that God does not show favoritism, but accepts men from every nation who hear him and do what is right.” - Acts 10:34-35
Key problems:
Computer technology costs money that people don’t have.
Computer literacy costs money.
IT is decidedly western in structure and support (e.g., the world-wide-web is not really world-wide).

12. Computer Software Software systems comprise:
Data structures to be stored
Algorithms to be performed
Software is specified using programs written in programming languages.
We’ll use a modified version of the HTML5 canvas drawing functions in Javascript.
Do demos on Monday and Wednesday (see other slides). They are starters for the lab exercises.

13. Literals Literals are object values specified explicitly in the code.
Examples: 42
"Joe Ku"
Numbers are just numerals, real or integer.
Strings are surrounded by double-quotes.

14. Variable Declarations
Variables are used to store individual values that are reused during program execution, potentially changing over time.
Pattern (declaration & assignment):
var identifier;
identifier = expression;
Alternate, equivalent pattern:
var identifier = expression;
The recipe for boiled rice asks for “one part rice to two parts water”. How big is a “part”?
For lab exercise 2.2 (save for Wednesday), go through these examples:
var unit = 100; <!-- Used as the size the rectangle(s) -->
<!-- make the rectangle a square. -->
strokeRect(pen, 100, 100, unit, unit);
<!-- Make the rectangle twice as high as it is wide? -->
<!-- How about an rectangle 3 parts high to 2 parts wide? -->
<!-- Put the rectangle in the upper left corner. -->
<!– Refactor to add rectangle width/height variables here. -->
<!-- Put a point in the center of the rectangle. -->
<!– If time, add another smaller rectangle inside the original. -->

15. Identifiers A variable is named by an identifier.
Javascript identifiers must begin with a letter followed by zero or more letters, digits or underscores.
Valid: age, r2d2, myGPA, MAX_SCORE, ...
Invalid: 123go, coffee-time, sam’s, $name, …
Identifiers cannot be reserved words.
An identifier is used to name a variable or a function.
Reserved words are things like int, final, double.

16. Digitizing Numbers
Programming languages use binary representation schemes to represent:
Integers
Real values
They provide these arithmetic operators: + - * /
Operator precedence governs evaluation order of operations in an expression.
Run these examples in ex2_1.html:
var answer;
answer = 42;
<!-- answer = 1 / 3; -->
<!-- answer = * 3; -->
<!-- answer = 1; answer = 2; // Only remembers the last value… -->
<!– answer = answer + 1; -->
<!-- answer = "joe"; -->
<!-- answer = "joe" + "ku"; -->
<!-- two-thirds of 500? -->
<! inches in cm? -->
<!-- division by zero? -->

17. Binary Binary is a base-2 numbering system. A bit is a “binary digit”:
0 (or “off”)
1 (or “on”)
Binary is just as powerful as decimal -- no more or less.
How many values can 8-bit representations handle? 256
This is why 8-bit, RGB color intensities are

18. Decimal Numbers 123 1*102 + 2*101 + 3*100 1*100 + 2*10 + 3*1
Decimal numbers are base-10 (using digits 0-9)
123
1* * *100
1* * *1

19. Binary Numbers 1102 1*22 + 1*21 + 0*20 1*4 + 1*2 + 0*1 4 + 2 + 0 = 610
Binary numbers are base-2 (using digits 0 & 1)
1102
1* * *20
1* * *1
= 610

20. Digitizing Characters
Programming languages use numeric codes to represent characters.
Two common coding schemes:
ASCII
Unicode
Javascript uses ASCII by default.

21. ASCII American Standard Code for Information Interchange.
Uses 7 bit integers
27 = 128 different characters
Extended ASCII uses 8 bit integers
28 = 256 characters
ASCII is the most common code currently used.
Note the “numerals” have their own ASCII code which means that “1” is different from 1. Confusing!

22. Unicode Uses 8 - 32 bit integers
over a million characters defined.
Unicode supports a number of different character types.
Cyrillic
Ancient Coptic
All charts
This is just a small part of the full unicode support for chinese characters.
Unicode is becoming more and more common.
I may have to explain hexadecimal to explain what the row and column numbers mean.

23. Strings
Programming languages represent strings as sequences of characters surrounded by double quotes.
Javascript provides the concatenation operator (+) for string expressions.
Run the examples using println().
“I said “hello”!”
“I said\n\tSTOP!”
The String class is a reference type that has literals and operators like a primitive type.
String s1 = new String(“test”); OR
String s2 = “test”;
“123” == ???
“123” == “123” ???
“123”.equals(“123”) ???

24. Digitizing Boolean Values
Boolean values are true or false.
Javascript provides 6 boolean operators:
x == y x > y x >= y
x != y x < y x <= y
Build more complex expressions using the logical operators:
x && y x || y !x

25. Calling Functions
Functions perform specific tasks and can receive values needed for the tasks.
A function call has the following form:
functionName(argumentList)
functionName is an identifier.
argumentList is a comma-separated list of expressions, possibly empty.

26. Algorithms
An algorithm is a set of abstract instructions for performing a task.
The execution of the instructions in the algorithm is controlled using three basic control structures:
Sequence
Selection
Repetition
Algorithms are like recipes.
Show examples of sequence from last week. Try reordering things.
Do an example of some sort – brownies? Hair combing? Sorting algorithms acted out (ordering people in height order, card sorting)?

27. Sequence
By default, statements within a given block are executed in sequential order. {
statement1
statement2
...
statementn }
Algorithms are like recipes.
Show examples of sequence from last week. Try reordering things.
Do an example of some sort – brownies? Hair combing? Sorting algorithms acted out (ordering people in height order, card sorting)?

28. Repetition We will implement repetition as HTML5 animation.
Animation is an illusion created by presenting carefully designed image frames at a specified frame rate.
The programmer defines two functions:
init()
draw()
Think flip book!
They’ll need the color functions to do these examples.
Demo these things using ex3_1.html from lab 3:
Explain init()/draw()/setInterval(), global variables, getRandom().
Try slowing the animation down.
Make the points bigger.
Show alpha color with big points and an alpha style setting.
Whitewash the background for each frame – The result looks like a single dot moving around rather than a bunch of dots appearing in random places – that’s your mind filling the blanks and is the basis of why video animations work as they do.

29. Selection
if statements execute their statements selectively, based on a boolean condition.
There are two forms:
Simple if:
Two-branch if:
if (condition) {
statements }
Demo these things by copying ex3_1.html to ex3_2.html and making the following changes:
Modify the color on the left half to red.
Recap three control structures.
Add random shades of red.
Convert from point to rectangle.
Add transparency.
Explain the stop() function (see the separate stop() video demo).
if (condition) {
statements
} else { }

30. Functions
In Javascript, programmers specify new operations by defining functions.
A simple function definition uses this pattern:
function functionName() {
statements }
Most of the “interesting” operations we would like to perform are not pre-defined.

31. Scope All variables have a scope of visibility within a program.
Variables are in scope from where they are declared to end of the enclosing block.
The are out of scope outside of that block.
Scope is the range of places where a particular variable is valid/known.

32. The Difficulty of Modeling
What’s the
Big Idea
The Difficulty of Modeling
Not everything can be easily modeled computationally.
“I praise you because I am fearfully and wonderfully made.” - Psalm 139:14
The weather (just too much stuff) (although this is getting much better every year)
The human genome (just too much stuff we don’t understand)
Human intelligence (AI – to the sussman anomaly example here) - Easy things are hard, hard things are easy. E.g., Being human is harder than it looks. “One year in AI is enough to make one believe in God” – Alan Perlis.