Sunday, October 9, 2011

Processing Class 6: 3D and Libraries

Hello Class! I hope you all had a great week. Here is a brief of what I want to cover today:

3D in Processing
- How to change the Processing rendering engine to handle 3D graphics: MODE in size()
- Using the 3D Primitives: box() and sphere()
- Using pushMatrix() and popMatrix() to adjust placement of 2D shapes in 3D: translate(), rotateX(), rotateY(), rotateZ()

- What is a library in Processing
- Where to find available libraries and how to find their reference
- How to include a library in a sketch
- How to download and setup a library to work with the Processing application

3D in Processing
While it is important to learn how to draw in Processing using 2D shapes, at some point you are going to want to break into the z-axis. The z-axis represents depth or distance from the user, assuming the user is facing the display. Many of the commands we have been using for 2D shapes such as line() and point() include ways of handling the z-coordinate along with the x and y. Before you can utilize any z-coordinate, you will need to set the render engine in Processing to understand and handle 3D. You set the render engine inside the call to size() inside of setup(). Normally, when sketching in 2D, you only need to use size() to set the width and height of the sketch. When wanting to incorporate 3D, you need to set another 3rd parameter, MODE. The MODE allows you to choose P3D, a Processing based 3D render engine, or OPENGL, a render engine that utilizes calls directly to the graphics card. You will need to look closely at the differences each render engine creates in the look and function of your sketch. Each has a different look and feel and some 2D elements, such as stroke and lines, do not always appear as you might expect.

Lets all take a look at what 3D looks like in Processing by first checking out the examples. Open Examples/3D/Camera and take a look at the 3 sketches inside. These 3 sketches point out how the camera works inside your sketch.
Now open Examples/3D/Image, these sketches show how image data can be used in a 3D environment. Extrusion is especially nice as it moves the position of points based on the brightness of the pixel in the reference image. It is possible to do this with a webcam as well.
Make sure to also take a quick look at the Textures folder and as well as the Transform folder. Rotate1 and Rotate2 examples in Transform show how pushMatrix and popMatrix can be used to create 3D images.

Most of these examples use the P3D render native to the Processing language. However, a few utilize the OPENGL library. Next we are going to learn how to use libraries to add functionality to your sketches.

Simply put, Libraries add things your sketch can do. A library is code that was written to work within Processing, and is specific to a certain task, such as: talking to an Arduino, evaluating sound or creating sound, robust typography control, exotic file type export.

The Processing download includes several libraries which are available upon install. Any other libraries will need to be downloaded and saved into a libraries directory. The libraries directory(folder) needs to be located inside of your sketch folder, the folder where Processing looks to find your sketches(by default it is located in your documents folder). Download the library from the web and place the library folder inside of your libraries folder. Make sure and support Examples files are stored inside the library folder in a folder named "examples".

When you want to include a library in your sketch, simply mouse over the "Sketch" drop down menu item at the top of the screen, and select "Import Library…". This will in turn open another drop down menu, listing all of the available libraries. When you click a desired library, a bit of code is added to the top of your sketch on to what ever tab is open. For example, when I choose to include the OpenGL library, the code looks like this:
import processing.opengl.*;

Now lets take a look at some of the examples included with the libraries included in Processing.

Sunday, October 2, 2011

Processing Class 5: Images, Video and Saving

Hello Class. This week we are going to revisit nested for loops to move through images and grab data. We are also going to explore how to use video, both local files and a webcam. After we get through that we will learn how to save out versions of our sketches for others to see.


Processing has a native data type specific to images called PImage. Anytime you want to work with an image you need to use a PImage. The PImage object has multiple properties. Some of them are an array of pixel color value, width, and height. Images that are made up of a grid of pixels are called raster graphics.


Video requires using the video library from processing. We will explore basic use so that we have a better understanding of how to use libraries for next weeks class.