resources /Processing

Processing is an open source programming language and environment for people who want to program images, animation, and sound. You can think of it like Flash but using Java and open source. To really learn Processing please visit the processing site learning section, which is quite good.

Useful Links

• http://inthistogram.altervista.org/

Questions and Answers

• Can you do text entry?

  • Yes, but text entry is not as complete as Flash. Interfascia is a component that has a text field. Keep in mind that HTML is probably a better interface for user input. And, using server side code, you can have the HTML input affect the Processing. There is even a JavaScript interface library which allows the browser to talk to a running Processing applet.

Examples

• chart_line_with_class

  • Creates a line chart based on data from a URL. This example uses the Class construct.

• fade_between_images

  • Fades between two images by using the tint() function and a counter.

• slide_show

  • A Processing slide show which uses a url of a text file as an image list. This example is used as a teaching aid in the Processing Primer below.

Following is Processing Primer that creates a slide show

1. Part I - this page, making an image appear.
2. Part II - using a list of urls to load images.
3. Part III - publishing to a web server.

Get Processing

You start by downloading the processing application and running it. So go download Processing and run it and come back.

Run it and draw

We are going to start by drawing something using processing. Run the application and type the following on the text window and click the play/run button.

size(200, 200);
background(0);

This should produce the most boring thing ever. A 200 pixels by 200 pixels black box. But congratulations, you just wrote your first java applet.

References Please

We just used two commands: size() and background(). To learn what these commands do and about other commands see the Processing Reference.

The Second time is Always Better

Let's make it wide and yellow now. And let's add some dots and lines too.

size(600,200);
background(200, 150, 0);
stroke(255);
point(width/2, height/2);
point(2, 2);
point(2, 4);
line(10, 10, width, height/2);

extra fun:

• Try smooth();
• ellipse(20, height-20, 10, 10);

Am I being Saved?

Go ahead and save this thing. Now use the "right arrow with box" to rename it. Pick something descriptive. Now go to the menu "sketch" and pick "Show Sketch Folder". Look around and see where this is being saved.

For the love of Demos

Click on the "up arrow with box" icon (open) and pick the examples.

Try some examples that peek your fancy; rinse and repeat.

• Try making some changes.
• Do a "Save As" to keep a copy.

In fact, let's open the example Image->Displaying. And then do a Save As. Now go to "Sketch->Show Sketch Folder".

Data data, who's got the data.

If you want to use an image in your Processing sketch you need to put it in a data folder inside of the sketch folder. (there are no absolutes). The processing development tool has a shortcut for this, it's "Sketch->Add File..." But that isn't important right now.

Part II

---

Category Technical Help