Week 1

Song: The Illiac Suite for String Quartet

Introduction to Class

Review Sylabus

Introduction to Creative Computing

Computers are widely used in art and design. Almost all design work created today contains computationally generated/altered elements.

  • Automation!
  • New Forms!
  • Dynamic Form!
  • Interactivity!

Many effects that used to be created by custom code in the past are now baked into photoshop and after effects. Personally, i use coding to create even static illustration work, and enjoy the ability to explore variations quickly. It also introduces elements of iteration and surprise.

With traditional design and art media, you are constrained to a single expression of your intent. With interactive media, you can codify your intent, and create works that can create new expressions and forms based on unknown future contexts. You can create systems that can grow and change. You can build yourself, your intentions, into your work and create a work that can not only speak AT your audience but that can engage in a dialog.

What is a Program?

A program is kind of like a recipe, where the computer is the chef. -Rory Solomon
A program is a set of instructions that explains to the computer what you want it to do.
A program is a file on the computer that can be read and executed.
A program is an art medium that lets you express how your work should behave, rather than simply how it should look.
Computer programming is the process of creating a program that does what you want.

Computers are Stupid Ignorant Jerks

Computers are Stupid; they have no intelligence whatsoever. They can not figure out how to do something on their own. When you teach a person, they are responsible for most of the work of learning. When you explain how to do something to a computer, you must do ALL of the work. They can not “catch on”.

Computers are Ignorant; they have no knowledge. They know how to do only a few very basic things. They will consider you instructions without any sense of context or history. A computer doesn’t know what a square, a day, or a cat is unless you explain it.

Computers are Jerks; they are obnoxious, rude, and completely lack empathy. Computers don’t mean to be, but because they are stupid and ignorant they often come off like a jerk. They will do exactly what you ask them to, rather than what you clearly intend. When executing your program, if they encounter even the slightest formatting mistake, they will refuse to continue.

http://en.wikipedia.org/wiki/Complex_instruction_set_computing

http://en.wikipedia.org/wiki/Turing_machine

Activity 1: Lets Make a Drawing

Learning To Program

Computer programming is the process of creating a program that does what you want. The most important skill in programming is learning how to think formally about what you are trying to make the computer do—to break down and specifically describe a complex, vague goal. This skill is central to programming regardless of the language and environment you choose. This skill is extremely valuable in almost all creative endeavor, even when a computer is not involved.

The next two skill is learning how to communicate in the language you are using. This requires both understanding the grammar or syntax of the language, as well as the vocabulary.

Grammar: Paradigms and Pieces

Vocabulary: Libraries and Blocks

  • Many programming languages come with a standard library and make use of additional libraries. These libraries contain reusable code for common tasks. Making use of these libraries allows you to do powerful things quickly, without having to explain all the details to the computer.
  • The Processing API Reference http://processing.org/reference/

Activity 2: Lego State of Mind

The Processing Development Environment

The Processing website http://processing.org/
An IDE is an Integrated Programming Environment. It allows you to edit your code, build your program, and see the result.
A Processing project is called a Sketch, it is stored as a folder of files on your drive.

Processing Example Code Review

Look at an example included with the PDE. Explain how it works, point out the elements of grammar and vocabulary.

Demo: Drawing With Processing

An example

size(300,300);
stroke(0,0,255);
fill(0,255,0);
rect(50,50,200,200);

An example with an image

PImage img;
img = loadImage("YOUR-IMAGE-FILENAME.jpg");
image(img, 0, 0);

You must add the image to your project from the Sketch > Add File menu item, or by adding the drawing the sketch folder automatically.

Play

One of the best ways to learn is to play. Start small. Iterate. Experiment with what you know. Set your own goals and then try to meet them. If it doesn’t work try to fix it. Throw away stuff you don’t like. Keep what you like, try variations on it. Open some example code, change something, guess what will happen, see if you are right.

Comments

When writing code, care should be taken to make the code easy for future programers to read and understand. Comments are notes you can include within source code to help with this.

In your assignments you should include many comments to explain what the code is doing. This helps me see how well you understand your code.

Assignment

  1. Read this week’s lecture notes.

  2. Get the Getting Started with Processing book. Also available as and ebook. Read Chapters 1-3

  3. If you plan to work on your own computer, install Processing. If not, find a lab computer with it already installed. Look through some of the examples and try running some to make sure everything is working. Take some time to play.

  4. Create a hand drawn sketch on paper: self portrait, landscape, still life, whatever you like. Create a Processing sketch that recreates your sketch using the drawing commands in the Processing API. Be sure to include comments in your code as we discussed in class. See book pages 15-32 for help. Watch the first part of this video from Rory for some helpful tips for this assignment.

  5. Based on the example at the end of this week’s lecture notes (or in the book on page 78), add an image file to your sketch, and in your code create a PImage and draw it to the screen using image(). Note the difference between this method and the previous one. Think about the advantages and disadvantages of each. How would you go about reszing these different images? And what would it look like in each case?

  6. Go online and explore the world of Creative Computing. Collect a set of links to share with the class. Find a link for each of the following:

  • Tool: A software, that makes making easier.
  • Reference: A site that provides reference information on any relevant topic.
  • Project: A page documenting an interesting interactive and/or physical computing project.
  • Maker: A site about an individual or organization that creates interactive and/or physical computing projects.
  • Forum: A forum or community site where you can reach out for help with specific questions. Smart Questions
  • Inspiration: Anything that sparks an idea (half baked is fine) for a project. Tell us the idea in the description.
  • Self: A portfolio or other site about yourself, if you have one. Other sites you maintain. (optional)

  1. Bring your hand drawn sketch, a print out of your code, and a print out of the result of your code to class next week.

  2. Watch the second part of the video from Rory to see how to post to the class blog. Login to the blog to make sure you have the right username and password. Feel free to update your account info if you’d like. Post your code, a screen shot of drawing your code makes, and the image your code uses. Include your collected links, with short descriptions, in your post.

  3. Make sure you have your Processing Sketch with you next week.