Introduction to Computational Media - 1st Class

Today I attended my first Introduction to Computational Media class. The goal of this class is to teach us the practice of transforming an idea into algorithm and then translating that algorithm into code. The process of transforming an idea entails breaking down the concept into distinct parts (e.g. input, output, and processing elements) that can be coded using a programming language. For this course the programming language we will use is Processing, which is a flavor of Java.

The professor of my class is Daniel Shiffman. Daniel is extremely passionate about the art and science of using computation as a communication medium. He is very involved in the Processing community and has even written a textbook for beginners, like myself. I look forward to learning how to code under his guidance.

The course is structured to cover core concepts related to programming during the weekly classes; hands-on coding experience is provided via weekly assignments that are executed and documented. Though there is no formal requirement to keep a blog or journal I have decided to do so, for my own benefit. Mandatory readings will be provided from the book Learning Processing, we will also be required to complete exercises from this book.

During the first 4 weeks we will focus on the fundamental concepts of programming. These concepts can be divided into three main categories:

• Data: variable, arrays
• Control/Action: conditional, loop
• Organization: functions, objects (cross all categories)

After week 4 we will build on our application development skills via on-going practice using additional functionality provided by the processing library and Java.

Here is a link to the full syllabus. Here are my notes from todays class:

About Programming Languages

Programming languages are classified as high-level and low-level languages.

• Low-level languages are faster and often provide direct access to resources such as memory. C and C++ are examples of low-level language. Machine language is the ultimate low-level language.
• High-level languages are slower and more limited in their ability to access resources such as memory. Some high-level languages are cross-platform - e.g. Java and Javascript. Others are data flow based - e.g. Max/MSP/Jitter, PureData, Quant Composer

Processing, a high-level language, is an extension of Java that includes a graphics library and Integrated Development Environment (IDE) tailored for use by artists and designers. Java provides cross-platform/cross-OS (Operating System) compatibility by running applications through a Java Virtual Machine. Java programs run on top of another application that converts compiled Java code into a OS-appropriate machine readable format.

Processing is an Object Oriented Programming (OOP) language. This coding paradigm supports a modular approach programming that enables developers to create “objects” (small applications with behaviors and attributes) that can be utilized by other applications. OOP enables developers to reuse code more effectively - you know the old cliche "there is no need to re-invent the wheel". (C++ is also an OOP language.

Open Frameworks is a competitive offering to Processing that is based on C++. It contains an image library extension but, unlike processing, it does not include a simple IDE, forcing beginners to use feature-rich IDEs that complicate the learning process. The one benefit of using Open Frameworks is its superior video support.

Getting Started with Processing

Window coordinates start on the top left-hand corner of the window. As in geometry the x-axis refers to the horizontal axis, while the y-axis the vertical.

Functions in Processing follow the same overall syntax (sample below). Each function has predefined numbers and types of inputs and outputs.

functionName(argument 1, argument 2, argument 3, etc.);

In processing it is important to pay attention to the order of the functions in the code. The code is executed from top to bottom. So functions located closer to the top are executed first, which impacts the order of the layering of elements on the screen. Also, it is important to consider that changes to the color setting affect all elements further down in the code.

Here is an overview of color functions available in Processing. Each of these functions can accept from one to four arguments. If only one argument is present than the color will be in grayscale; two arguments are interpreted as grayscale with transparency (known as alpha); three arguments are read as an RGB value; four variables equates to RGBA (RGB with transparency. Each value can range from 0-255.

• Fill(arg 1, arg 2, arg 3, arg 4); - fill form with color
• Stroke(arg 1, arg 2, arg 3, arg 4); - color the line of a shape
• Background(arg 1, arg 2, arg 3, arg 4); - color the background

This week's assignments include:

• Signing up for the e-mail list
• Downloading Processing IDE
• Making a static drawing in processing
• Check out Processing Monsters website (optional but fun)