Syllabus / NotesWeek1
Introduction To Computational Media (ICM) : Week 1
I thought this was a programming class. What is "Computational Media"?
We will learn programming, but the real question is WHY are we learning programming? What do you want to do with this skill set?
Create Art? Communicate an idea? Entertain? Educate?
More than any other art form, interactive media must account for the user experience.
What is programming? Creating a sequence of instructions (algorithms) to enable something to be accomplished.
We are all natural programmers specifying instructions for ourselves and executing them. We program all day long, usually subconsciously but never-the-less we are doing it. Everything from telling our feet to walk the 12 ft to the door way, opening the door if it is closed and walking through to your brain or central nervous system telling your body to breathe on a regular basis. Inhale, exhale, inhale, exhale...
Everything you need to learn in this course, you will learn in the first 4 weeks
People vs. Computers
Raed Tihs Snetnece
Congratulations, you are not a computer. Computers are not very good at this. People generally have no problems what-so-ever. Computers need precise language.
Syntactical Errors (or syntax errors) are often the result of people skipping over portions and filling in the blanks because we understand. Computers just don't understand so you have to be very explicit.
High level and Low level.
High level languages are those that are closest to our (human) language whereas low level languages are closest to what the machine understands. Low level languages are generally faster, written specifically for the computer and high level languages often go through a series of translations, interpreting the code and rewriting it at a lower level before the machine actually runs it. These translations generally make the program run slower, but today's computers are so blindingly fast that it's practically irrelevant for most computing tasks.
Here's a very incomplete list of languages, approximately from low level to high level:
All programming languages have both weak and strong points. Perl for instance is structured to make it very easy to do text parsing whereas PHP is great for writing web based applications. Both are high level languages and are interpreted but that is more than made up for by their utility.
Compiled Vs. Script Languages Most of the lower level languages must be translated into binary executable code, or "compiled", before they can be run. Once the language has been compiled, it does not need to be compiled again although no changes can be made without recompiling. The advantage is that these programs will run faster because they are optimized to the specific hardware and software configuration of a particular computer or digital device. The disadvantage is that these compiled programs are incompatible with other systems. This is why programs compiled for Windows won't run on Macs, etc.
Script Languages are interpreted line by line every time they are run. This constant interpretation into code that the computer understands will slow down the program a bit, but the advantage is that it can run on any number of different machines. Because script language code is never compiled, it can easily be read and modified by humans. Think about HTML. If it were compiled then web programmers would have to make a different page for Windows, Linux, OS X, Palm, Nokia, and every other digital device out there. Instead, we have web browsers that interpret the HTML on-the-fly into a format that your computer can display. (Whether HTML is a programming language is a topic of debate).
Processing Processing is a free and Open Source Java based IDE (integrated development environment) and an API (Application Programming Interface).
Processing makes Java useful to those with no or minimal programming experience while leaving in place the full functionality of Java for those with experience.
Download and Install it: http://www.processing.org/ Unless you work on the lab machines only (which have Processing installed already) you will need to download it. (If you are downloading it for Windows, make sure you get the version with Java, not the Expert version without Java.)
IDE stands for Integrated Development Environment. It is the editor you write a program in and the means to compile and test. The Processing IDE is very simple and easy to understand.
Open up Processing and go through the IDE Try out the commands under the File menu: New, Save, Sketchbook Examples, Export Try out the commands under the Sketch menu: Run, Stop Your best friend will be the Help menu: Reference It has buttons for quick access to: Run, Stop, Export
API stands for Application Programming Interface. It is the code or statements that the language supports. Processing has its own language for programming that is based upon Java (actually it is simplified Java). Processing also supports normal Java but we will get to that later.
Coordinate System: All programming languages that allow you to draw to the screen use coordinate systems in one form or another. Generally these coordinate systems reference pixels (picture elements).
Processing (and most other languages and graphics programs like photoshop) reference the 0 point of the window (both x and y axis) as the top left corner and work from there. Going down increases the value of the y axis and going to the right increases the value of the x axis. Therefore the point (10,15) in the form (x,y) would be 10 pixels to the right and 15 pixels down from the top left corner of the window.
Commands: Make this reference your best friend.
We are going to start with the very basics that you will need to get your homework done.
point(x,y) As the name implies, this draws a point on the screen at the specific x and y coordinates. This is a pixel (picture element).
To write this command in Processing, simply type: point(10,10); and click run. If you squint you can probably a black dot 10 pixels from the top and 10 pixels from the left.
You will notice that all commands end with a semicolon. This is a Java standard and consistent through many programming languages.
line(x1,y1,x2,y2) Draws a line from (x1,y1) to (x2,y2). As an example: line(10,15,30,30); draws a line from the point 10 pixels to the left, 15 pixels down to the point 30 pixels from the left and 30 pixels down.
size(width, height) Sets the size of the canvas that you are drawing on. size(100,100); would make the canvas 100 pixels wide by 100 pixels tall.
background(grayvalue) Sets the background color of the canvas to the specified grayscale value. A gray value of 0 means black whereas a value of 255 means white. background(127); would fill the background with a medium gray color.
background(redvalue, greenvalue, bluevalue) Sets the background color of the canvas to the specified value. Processing (and most other color representations on the computer) use an additive color space. Think of it like the sun, the absense of the sun makes it dark or black whereas full sun light would be white. Colors are mixed out of the additive primaries of red, green and blue. Again, as with the gray scale values, these go from 0 to 255 (which is 8 bits per channel).
You may have noticed that there are two background() functions listed. This means that background() is overloaded. Processing (Java) considers a function to be the total of it's signature, that is, for our purposes it's name and the number of it's arguments. background() with one argument is the first function and background with 3 arguments is the second. We couldn't have another background that only takes one value but does something other than the the first one.
fill(grayvalue) or fill(redvalue,greenvalue,bluevalue) An overloaded function (like background()) that specifies the fill color for any shape that is to draw on the screen.
noFill() turns off the fill for any shape that is to draw on the screen. The shape will be transparent.
stroke(grayvalue) or stroke(redvalue,greenvalue,bluevalue) Specifies the color to be used for drawing anything to the screen (line, point, shapes).
noStroke() Turns off the stroke color for shapes, effectively making their outline transparent.
rect(x, y, width, height) Draws a rectangle with the specified width and height at the specified x and y position.
rectMode(MODE) MODE can be: CORNER (the default), CORNERS or CENTER. Changes the mode for drawing a rectangle. CORNERS means that the x and y coordinates specified will be the top left corner or the rectangle. CENTER means that the x and y coordinates specified will be the center point of the rectangle.
At this point, you should be comfortable enough with the reference material to look the following commands up on your own: ellipse() ellipseMode() triangle()
Comments Comments are very important to programming. They allow you and others to understand your code. You should immediately get into the habit of commenting everything you do in Processing.
To create a comment, in your code, simply prepend the line with a double slash "//".
// This is a comment
If you are entering multiple lines for a comment, you can start the comment with a slash and asterisk and end with an asterisk and a slash.
/* Enter comments Here More comments */
Errors At this point you will have undoubtedly run upon an error in your code. Processing puts error messages down the red bar between the output window and code window.
Unfortunately, Processing's error reporting isn't the greatest in the world and it takes some getting used to to be able to identify the exact error.
For instance: I opened up Processing and typed "test" into the code window and hit run. Processing reported: "unexpected token: test" in the red bar. In other words, Processing didn't understand "test" as it is not a command in the language.
For another example: I typed "line(10,10,50,50)" leaving out the semicolon. Processing reported: "unexpected token: null" Meaning: Processing was looking for something but found nothing (null). In this case it was looking for the ";" semicolon.