The schedule below will have code and slides added as we go along – either before class, if appropriate, or immediately afterward in the case of code that is constructed live during lectures.) The labs and homeworks are shown here and will be numbered correctly Real Soon Now.
Student5502. (A template for transforming a picture by changing every pixel in it, and two illustrations: darkening a picture and making it a photographic negative).
More code for transforming pictures: this time Monochrome (either a straight neutral grayscale black-and-white version of a color picture, or a sepia toned monochrome.)
Here is a handy test function that you can use to create a picture, do something to it and show it before and after the transformation.
The keyword "if", and selective computation. Posterizing a full-tone picture.
A posterize function that makes every pixel either black, white, red, green, blue, cyan, magenta, or yellow.
Wild color transformations. Psychedelia!!
Try out the Blast function which is a blast because it blasts the pixel values. Go into the Edit/Options menu and compare the effects of running this function with the "...Modulo 256" option checked and unchecked. We will discuss what this means and why it has the effect it does in class.
Selective manipulation of picture parts.
This is the Student5512: For all of the pixels in the picture, ask each pixel in turn if its x and y coordinates mean that it is in the area we want to change, and if it is, we make the change.
The more efficient way of doing this is only ever to look at the pixels that we want to change. (But how?)
And an illustration of copying: A boring collage construction kit that copies the same picture into the quadrants of a canvas and saves it.
The Student5521. (1) Draw a line down the center of a picture by looking at all pixels, ask them whether they are in the center line, and if so change them; (2) Consider all the x,y coordinates that have y=width/2 and go through only those pixels that have coordinates x,w/2, changing those.
Interlude! More on functions. Procedures, or "functions" that do things vs. true functions that return values. (Slides). Code for simulating Wedding. A comparison of Student5523 (partial code with gaps to fill in in class).
Mapping pictures onto themselves: mirror images
Clever merging of pictures: chromakey, and the weather forecast.
Purple rinse A program that gives people (those with hair ;) ) a purple rinse. A pixel is judged to be a hair pixel if it is close to being hair colored.
Chromakey A program that selectively superimposes a foreground image (e.g. a meteorologist or a Jedi sword-wielding Stephen Colbert) photographed against an even-colored background (e.g. green screen or blue screen) on top of a background scene (e.g. a weather map or an action scene).
Graphics vs. imaging. Drawing vs. painting.
Movies (Chapter 12) (Homework 3 is on animation)
Movie psychophysics and workflow for generating movies (slides): movies1.pdf
Making a movie from frames. Saving files to disk. File names: a preview of text processing.
Student5554: Illustrates separation of logical concerns into several different functions. (E.g. coordinating the making of the movie, adjusting the color balance of a single frame, changing the blue of a single frame, chaning the green of a single frame, saving a frame to a file with an appropriately numbered name.)
In this example, we want to create a fresh canvas each time through the loop. If we created the canvas outside the loop and only updated it each time through, the "ball" would leave a trail.
Student5558 from Jon Cohen illustrates that when you want to "grow" a display (like the logo here) you only create the canvas once and update it each time through the loop.
2D Pong Animation Ball bounces off each edge of canvas while changing color.
More interesting animation involving walking/crawling sprites. This one has Student5573. Try this with different sprites. You will need to change the file names of the sprites, obviously, and also the findSprite function from mod 11 (the number of Homer sprites) to mod N (where N is the number of sprites to cycle through).
Truly bizarre movie, worth watching at least once: fish.mov
Sound (Chapters 6-8) (Homework 4 is on sound)
Sound encoding and auditory psychophysics. Slides: SoundEncoding.pdf
Making sounds quieter and louder. Going to eleven.
Code for amplifying sound by multiplying values by two (careful! this allows clipping) and by normalizing sound (i.e. stretching dynamic range of sound so that its maximum value is +/-32k).
Adding/blending sounds together. Adding two sounds and removing noise from a signal (Two functions. One that introduces noise/a second sound into a sound, and the other that returns the blended sound back to its original state by subtracting the "noise" sound. This is approximately how noise canceling headphones work.)
Navigating our way through sounds by sample index:
Equivalent ways to get all the samples in a sound. (There is a bug with getSamples() in an earlier version of JES that caused it always to crash with an off-by-one error. You should not encounter this, but if you do, either download JES 3.0.6 againg or use version 2 of this code.)
Reversing sounds.
Splicing sounds together.
Designing and Debugging (Chapter 9)
An interlude on getting it right in programming – or at least making it less wrong.
Or how about automated censorship? (We didn't discuss this example in class, but you never know: it could come up on a test.)
HTML
Slides about HTML: html.pdf. We won't go through these one by one in class, but they are useful for reference and supplement the textbook discussion of HTML.
Unfortunately the network service operator is moving its servers this weekend, and so the above site has been down (for the first time in two years!). It should be available Sunday by noon. If not, you will have to refer to the slides or inspect other sites to become familiar with HTML tags.
After the class on Python-generated pages (when we generated Chuck Norris's home page) I edited that page to illustrate how to embed pictures in HTML source: (1) as a read-only picture, and (2) as a clickable picture. View this page and its source to see the difference: homepage.html
The two purposes for markup: logical structure and organization of pages vs. layout and appearance. The latter is increasingly being done by another language, CSS. See the CSS zen garden site for examples of this separation. (You don't need to know any CSS, just that it exists and what it does.)
Lots of differently laid out pages with identical content but different CSS specifications: http://www.csszengarden.com/ (Click "select a design")
Python programs that read and edit web pages. Some slides illustrating this.... html2.pdf
How HTML works. Servers and clients.
Write your own (trivial) web client. (This program only works for as long as AJC formats its weather page in the assumed way.)
In fact, the function is already broken (Nov 9). It still finds the temperature correctly, but now mangles the time because the AJC page format has changed slightly.
Dynamic and maintainable web pages: A peek at Javascript and CSS
Difference between computing a date/time at page-creation time vs. whenever the user views a page: Student5592
Aaargh! It wasn't a bug with Safari ;) it was a bug in Powerpoint. The Javascript I copied and pasted from the slide contained a smart quote and so was invalid Javascript. The browser therefore just quietly ignored it. If you follow in my steps, make sure that all the open and close quotes for the strings in the javascript are plain quotes.
In fact, don't bother. Here is the web page, including the Javascript that does the popups as soon as the page loads. If you view its source, you will find it is the same as on the slide shown in class, except that all the quotes are simple: js.html
Other Programming Styles and Languages (Chapter 14, 16)
Turtle Graphics using functions and methods:
Tom, the turtle does his thing (which is nothing to get excited about, really)
Species of animals: using biological taxonomies (but not scientifically respectable ones) to illustrate object oriented programming with classes and subclasses.
Breeds of dog: using breeding taxonomies to illustrate OOP with subclasses and constructors.
"Species" of object-oriented turtles. (Homework 6 is on turtle graphics)
Chameleons, which are really just turtles that change color.
Noisy frogs, which are just turtles that occasionally jump and make croaking sounds.
(American!) Football play (from Cedric Stallworth). Enjoy this and see if you can work out how it works. Do not even think about copying this as the starting point for your homework unless you really understand it.
Recursively drawn trees. Trees are recursive structures that consist of a trunk/branch with two trees, each of which consist of a branch and two.......
Recursively drawn trees with a bit of random noise. Run this one several times. It should look like a natural branching structure – a tree? a system of blood vessels? a neuron's dendrites? Think about this: Perhaps natural growth patterns are natural processes following a recursive turtle algorithm? The environment provides the noise in the form of accidentally placed dust particles, or an abnormally cold winter here or there, etc.
Alcohol is even worse for turtles than randomness. Drunken turtles draw a recursive tree (idea from Barb REMOVED). This turtle staggers and lurches a bit when moving, but the little errors accumulate as it draws the tree. Some of its trees look like messy trees; others don't look like trees at all. It depends when the biggest random errors occur.
Speed (Chapter 13) and the theory of algorithms. Slides: FILE function cannot find the upload.
Storing data so that different programs can access and update data.
"Unimedia". Converting on medium to another. Visualizing sound as a picture, using a spreadsheet as an intermediary representation. (Lab 4 was on Excel.) soundToText is a Python function that saves a sound to a text file; textToSound is the converse program that reads in a list of numbers and interprets them as sample values in a sound. Slides on mediashifts: mediashifts.pdf. soundToPicture is the static sound "visualization" function that I showed in class. It has thresholds of 64 and -64 for 8-bit sounds. For 16-bit sounds, you will need to increase them to (say) +/-1000.
Final grade calculator. Enter your grades into the dummy spreadsheet. The dummy values there are full points for everything except for a 50 on one of the tests (to show you that this is disregarded) and a zero on one of the pop quizzes (which is also ignored). Note that the pop quizzes are not all out of the same total (three, four or six, depending on the test). dummy.xls
