http://www.youtube.com/watch?v=UoPplpBPQxQ

Midterm Test

First, the test.

Using Images in Processing

In your projects so far, everything has been made with code. Code is a very powerful tool, but it is not the only tool. You can create much richer projects by combining code with other tools. Using Processing, you can load and incorporate a variety of media. We will start with images.

Preparing and Image in Photoshop

Many tools and media exist for creating images: chalk, paint, pencils, cut paper; Illustrator, Photoshop, MS Paint, Maya, Blender; cameras, scanners. Wherever your image comes from, you need to get it ready for Processing: crop it, mask it, color it, correct it, scale it, export it. Photoshop is a good tool for creating images from scratch, it is a great tool for hand manipulating and processing images.

Pixels

The two most common types of digital images are Rastor and Vector. In Rastor graphics, images are two dimensional collections of pixels (Picture Elements). Each pixel represents a sampled color at a location of the image. Pixels are often represented as 3 int values (0-255): red, green, and blue. Sometimes pixels are a single gray-scale value. Sometimes they are only full-white or full-black. Sometimes they have RGB and an alpha value representing transparency.

Resolution

An image’s resolution refers to how much detail or information the image contains. One common way to describe resolution is stating width and height of the entire image in pixels. Another is to state the number of pixels or dots in one linear inch DPI.

Digital Images don’t really have an intrinsic DPI because they don’t have an intrinsic physical size. A digital image may be displayed on a screen with very small pixels (a mobile phone) or very large pixels (a video projection). A digital image’s DPI will be different depending on the size it is displayed.

Many formats allow you to specify a DPI for the image, but this doesn’t actually change the data in the image. It is simply a suggestion for how large the image should be displayed or printed.

When preparing images for display on screen, it is usually much more important to think about the whole image size in pixels.

Transparency

Raster images are rectangular, but sometimes you want an image that is not. A wheel may be round, a character might have a complex silhouette. A rectangular image can be used for these cases by using an alpha/transparency value for each pixel. The transparency information determines which pixels are drawn, and which are not. Some might be semi-transparent as well.

File Formats

Use Photoshop’s File -> Save for Web to save your image for use in processing. Because saving your image as a .jpg or .png can compromise quality, Save for Web shows you how your image will look, and how large (in bytes) it will be. Use this view to select appropriate settings for your image. For Processing you should use either .jpg or .png images. .jpg tends to work best for photographic/richly textured images where small file-size is priority. .png works well for images with flat colors or when you need very high quality images or transparency and small file-size is not important.

Data Folder

Now that you are using media, your Processing Sketch folders will contain more than your .pde file. They will also have a data folder that will hold the media you will use. Do not keep your .psds or other large, working files in your data folder. Put only your sized, exported media in there.

PImage, loadImage(), and image()

PImages is a variable type that represents a loaded image. To load an image use loadImage() and assign the result to a PImage variable. Once loaded, you can draw the image whenever you want with the image() function.

Load Only Once!

A common mistake when starting to use images in processing is to put your loadImage code in the wrong place. It should be in setup() so Processing will load your image once, when your sketch starts. It should not be in draw(), which would make Processing load your image 30 times a second, quickly causing memory problems.

Your code should look something like this:

PImage cloud;
PImage sky;

void setup(){
    size(625, 350);
    cloud = loadImage("cloud.png");
    sky = loadImage("sky.jpg");
}

void draw(){
    image(sky, 0, 0);
    image(cloud, mouseX - 200, 50);
}

Reading

Read the Images section in the Media chapter of Getting Started.

Homework – Children’s Book

Create an interactive illustration based on a single line from a children’s book.

Begin by selecting a children’s book and choosing a line from the book as inspiration for an interactive illustration. Using that line as a starting point create a interactive illustration in Processing. Your illustration should be based solely on the line or page you choose, as if you had never read the rest of the book. Your illustration should be an entirely new work, and not follow the style of your chosen book.

Create the elements for your illustration using traditional (non-digital) media. Your elements must be made by you, from scratch. Scan or photograph your elements and prepare them in Photoshop (scan it, retouch it, crop it, size it, export it). Your sketch should use only image assets to create visuals. Don’t use rect(), ellipse(), etc. Your sketch should include the line from the children’s book. This text should be treated as part of the illustration and composition, and should be created on paper like the other elements.

You will use Processing to combine these elements into a single illustration. You can use concepts like variance, loops, and conditionals to create you illustration out of your elements, just like you did with rects and circles. Your illustration must be interactive. Your illustration should have at least one element that reacts to changes in mouse position. Your sketch should also respond to mousePressed. Adding more animated or interactive elements may improve your grade.

Don’t forget to review and clean up your code. This project should be built according to the spec.

Your technical goal in this assignment is to apply and demonstrate the coding skills we have introduced in class. In addition to technical aspects, this assignment will be evaluated in terms of aesthetics, concept, and craft. In particular think about how interaction can support the meaning of your illustration.

When you are finished with this assignment post a screen-shot of your illustration, and a .zip of your sketch to the blog. Bring your sketch to class next week, and have it on your lab station at the start of class.

We will be critiquing this work next week. We will look at everyone’s project and code; be prepared to talk about each other’s work.