Introduction To Computational Media (ICM) : Week 1

What is Computational Media..?

(Essentially Programming, but oh so much more)

Computation Wikipedia Definition
Computation can be defined as finding a solution to a problem from given inputs by means of an algorithm

Media Wikipedia Definition
Plural form of medium. A truncation of the term media of communication, referring to those organized means of dissemination of fact, opinion, entertainment, and other information.

So.. We are using computers to create and disseminate what?

  • Art
  • Communication
  • Entertainment
  • Education

    • What are some examples?

    So.. Why? What are the strong points of using computational media?

  • Interactivity
  • Efficiency
  • Other strong points?
  • Drawbacks?

    • Some questions:

  • Can a painting be interactive?
  • Is the experiece of interactive art different for each user?
  • Is it an echo chamber?
  • What happened to all of my time?

    • What is programming?

    Creating a sequence of instructions 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...

    Programming typically involves using the following constructs to create an algorithm (the instructions):

  • Conditionals - Testing an equation to see if it is true or false and executing a set of instructions based upon that result (see the if statement above)
  • Iteration - Repeating a set of instructions over and over again. More commonly referred to as a loop. (see the breathing example)
  • Variables - A symbolic representation of some value which can change or vary. (In algebra you used variables in equations, like y = x + 6. A more complete example would be: Given x = 5, y = x + 6, what does y equal?)

    • Other important concepts in programming are Data Structures which include things like Objects and Arrays and Functions for making pieces of code reusable.

    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, you have to be very explicit.

    Pair Programming

    Have no fear, there is a way to remedy this situation. Pair programming involves teaming up with another individual while you are programming. Generally one person is the driver and the other the back seat driver looking over the driver's shoulder. One person is dealing with the mechanics while the other is checking them and keeping an eye on the overall program.

    We will start out using pair programming in this class. Towards the end of the semester it will be up to you whether or not you would like to work in this manner.

    Languages

    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.

    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 interpretted but that is more than made up for by their utility.

    Processing

    Processing is a free and Open Source Java based IDE and an API.

    Java is at the lower end of high level languages, it is equally good at many tasks and is easy to understand if you have a background in lower level languages like C as well as for those with higher level language skills (JavaScript, Perl, PHP and so on).

    Processing takes this one step further and makes Java useful to those with no or minimal programming experience whil 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 it's 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.

    Modes:
    Processing has 3 modes of operation, basic (the mode we will start in), continous (the mode we will work in most of the time) and Java (the mode we will introduce later in the semester).

    In basic mode, you can simply start inserting Processing commands or functions.

    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) 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. Point Reference

    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. Line Reference

    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. Size Reference

    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: CORNERS or CENTER. Changes the mode for drawing a rectagle. 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() Ellipse Reference
    ellipseMode() EllipseMode Reference
    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 undoubtly 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.

    Publishing or Uploading Homework to Stage
    In order to share your work with the world (and to turn in your homework) you will need to publish your project and code.

    Fortunately, Processing makes this very easy. Simply choose File: Export at which point a Windows or Finder window will appear with the title "applet". In this window, you will see an html page (index.html), a loading graphic (loading.gif), a jar file (the name of your project.jar), a java file (name.java), and a pde file (name.pde).

    The HTML page, is the page that contains your embedded Processing Applet. If you open this up in a browser you should see your applet run.

    The JAR file is the actual program that is running. It is your applet.

    The PDE file is the Processing project file. It allows others to open up your project in processing.

    The JAVA file is the source code for your final applet. Check it out, it is interesting.

    The GIF is simply a graphic that Processing displays while your applet is loading.

    In order to publish your work you need to take all of the files in this directory and upload them to a place of your choosing (in your public_html folder on stage).

    Here are some further instructions for uploading your homework: http://stage.itp.tsoa.nyu.edu/~dbo3/cgi-bin/itp/itp.cgi?ICM_05_Fall_Uploading

    One last step, enter a link to your homework on the Wiki: http://stage.itp.tsoa.nyu.edu/~dbo3/cgi-bin/itp/itp.cgi?ICM_VanEvery_Fall_05 Instructions are on the page.