Language: English or Japanese

Description??

The following image is taken from www.Proce55ing.net. To see it in context, click Reference, then Environment.



Immediately, you are probably thinking "Wow, this is such a simple interface. How could it possibly be as capable as Director or Flash?" Both Director and Flash have all kinds of import and media editing interfaces based on common tasks in commercial multimedia. In Processing, all of this is either done using another program, or done by programming in Java. For example, Flash provides its own mini-Illustrator, while Director provides its own mini-Photoshop. In consequence, a large body of work done in both pieces of software have resembled the restrictions of their integrated editors. In Processing (and in Java), you provide your own list of vector paths or GIF files, and you render them using programming. You are free to generate your own forms and structures using the language to control the pixels on the screen more directly. For those experimental people who aim to produce new forms independently or ahead of the status quo and its automation tools, Processing can be more convenient.

Here is an introduction to the six buttons on the left side of the window.

For those of you who use FlashMX, this is a review. The following is called structure00 in the example sketches.

And Java variables are as follows:

Flash people: there is no such thing as var. For in-depth information on variables, consult the official Java language tutorial.
Here is the part about variables.

What about if-then?

Things are a bit different from Lingo when it comes to comparison. The programmer uses a single "=" to assign a variable some value. One uses a "==" (double equal) when trying to determine whether or not a number equals another number. Additionally, "not equal to" is no longer "" - it is now "!=" - and the rest are the same ("" , ">=" , and "consult the authority.

What about repeating loops?

Lingo people, this is the same as "repeat with i = 0 to 4." Inside those parentheses, there are three special statements separated by two semicolons. The first statement creates a temporary variable. The second statement specifies a condition which allows the loop to continue looping. As soon as i is no longer smaller than 5, then the loop will stop. The third statement gives you a chance to incrementally change i however you want. "i++" is shorthand for "i = i + 1". Sun can tell you much more about for loops.

While loops are similar to the structure of an if-then.

If you are curious about getting heavy on the flow-control syntax, here is a broader link to the Java language tutorial, the part about flow-control.

I will get into custom routines (functions) in a little while. I give you these basic introductions to the syntax - not in order to be thorough, but in order that you will understand the drawing functions that are about to follow.

For more introduction to the structures, see the Processing Language Comparison and the Processing Structure Examples.

size(200,100); background(0,0,0); stroke(255,0,0); point(50,50); stroke(0,255,0); point(100,50); stroke(0,0,255); point(150,50);

Run this code, and you should hopefully get the following image. This is a wide black window with three pixels colored red, green, and blue.

Let us break this code down, line for line.

First of all, it is necessary to know that the screen is a graph of pixels - each individually addressable by a unique (X,Y) coordinate. The origin (0,0) is at the top left corner of the rectangle. As you add to Y, you move down. As you add to X, you move to the right. It's similar to playing the boardgame, Battleship. This is no different from Director or Flash.

size(200,100);

Calling the size function lets the size of the canvas to 200 pixels high, 100 pixels wide. If you do not call this at the beginning, the default will be 100x100.

background(0,0,0);

Calling the background function lets you change the color of the entire canvas. In Director, this is the stage color. In Flash, this is the document's background color. 0,0,0 means black. If you never call background in Processing, then the default will be gray.

stroke(255,0,0);

Calling the stroke function lets you change the current drawing color so that every drawing command called after it will draw using that color. 255,0,0 means red. If you never call stroke in Processing, then the default will be black.

point(50,50);

Calling the point function will set the pixel at 50,50 to the current stroke color. In this case, red.

stroke(0,255,0);
point(100,50);

This code makes a green dot in the center.

stroke(0,0,255);
point(150,50);

This code makes the blue dot on the right.


As you can see, this is similar to draw( ) Image Lingo, or those drawing methods in ActionScript. You control the screen like it is a canvas that understands certain drawing operations. Let us now expand to more complex shapes.

Now, here are some pre-fab shapes.

triangle will draw a three-pointed polygon. It has six parameters. Parameters 1 and 2 are the first X,Y coordinate. Parameters 3 and 4 are the second X,Y coordinate. Parameters 5 and 6 are the third X,Y coordinate.

triangle(x1, y1, x2, y2, x3, y3);

quad will draw a four-pointed polygon. The structure of the parameters are similar to that of triangle, but this time, a fourth pair of parameters are added to specify a fourth X,Y coordinate.

quad(x1, y1, x2, y2, x3, y3, x4, y4);

rect will draw a rectangle. The first and second parameter will specify the position, while the third and fourth parameters specify the width and height.

rect(x, y, width, height);

ellipse will draw an oval. Its parameters work the same way as those in rect.

ellipse(x, y, width, height);

Now I will modify this program to show you something new. The new code is marked.

(Notice here, I am specifying colors in a different way than before - this time HTML style)

Fill is introduced as the cousin of stroke. Fill is what makes the polygons green, while stroke is what makes the outlines red. Fill's parameters specify a color, like stroke. The default fill is white. But what if I want no fill?

Now, you can see the quad underneath the oval because only the strokes are being drawn. Similarly, there is noStroke, which disables the outline from being drawn. To enable stroke or fill once more, you must call stroke or fill, specifying a color.

Drawing with curves is slightly more complex than drawing with straight lines. Specifying a curve requires providing non-visual information that helps to define the severity and direction of curvature. Processing provides both the curve( ) and bezier( ) methods.

curve(x1, y1, x2, y2, x3, y3, x4, y4);
bezier(x1, y1, x2, y2, x3, y3, x4, y4);

For the curve( ) function, the first and second parameters specify the first point of the curve and the last two parameters specify the second point of the curve. The middle parameters set the points for defining the shape of the curve.

For the bezier( ) function, the first two parameters specify the first point in the curve and the last two parameters specify the last point. The middle parameters provide the context for defining the shape of the curve.

In the bezier( ) examples above, the orange lines reveal the hidden control points for the curves.

Although Processing has provided these quick primitives, you are still free (and encouraged) to construct your own shapes.

Using the beginShape( ) and endShape( ) methods are the key to creating more complex forms. beginShape( ) begins recording vertices for a shape and endShape( ) stops recording. The beginShape( ) command requires a parameter to tell it which type of shape to create from the provided vertices. The parameters available for beginShape( ) are LINES, LINE_STRIP, LINE_LOOP, TRIANGLES, TRIANGLE_STRIP, QUADS, QUAD_STRIP, and POLYGON. After giving the beginShape( ) command, a series of vertex( ) commands must follow. To stop drawing the shape, give the endShape( ) command. Vertex( ) commands with two parameters specify a position in 2D and vertex( ) commands with three parameters specify a position in 3D. Each shape will be outlined with the current stroke color and filled with the fill color (see the Color section for more information).

The following note is found in the Processing reference:

Although this is the case, you can still look up some examples on the web that will tell you how to construct anything you want from convex polygons.

Here are some examples from Proce55ing.net

Getting an image onto a Processing sketch is simple. Java only accepts JPGs or GIFs (unless you want to do extra work). You can place the image into your sketch by using the file system and a couple lines of code. First, save your sketch. Then you can find the sketch file by looking in the Processing program folder. In that folder, you will see a folder called sketchbook. In that folder, you will probably see two folders - one called examples and another called default. In default, look for the folder with the same name as your sketch. Inside that folder, you will see another folder called data. This is the folder in which you must place your image file for easy Processing. Here is another way to say it:

Processing Folder/
??????????????? sketchbook/
??????????????????? ????????default/
????????????????????????????????? your_sketch_name/
?????????????????????????????????????????????????????????????? data/
????????????????????????????????????????????????????????????????? your_imagefile.gif

Let us assume that I have a sketch called image_example_1 and I want to draw the following image called twombly.jpg, a drawing by Cy Twombly:

I would save it in the appropriate folder:

Processing Folder/
??????????????? sketchbook/
??????????????????? ????????default/
????????????????????????????????? image_example_1/
?????????????????????????????????????????????????????????????? data/
????????????????????????????????????????????????????????????????? twombly.jpg

And now I am ready to add the code.

BImage is an object that will hold your loaded file until you draw it. b is what I chose to call this one. image( ) is what actually draws the image to the screen.
image(BImage, x, y, width, height);
You may also choose to omit the width and height, and the image will then draw at normal scale.

Straight imported files are not the only way, as URLs also work.

For more detailed information concerning images, you may consult the Processing reference. Here is the part called Loading_and_Displaying. Building upon this knowledge, it is also possible to show sequencial images (video footage). For more excitement, see the Processing Image Examples.

The error will say that it cannot find Bodoni-Italic.vlw.gz. This is because you have not yet imported the font file into your data folder. (see the images section of this tutorial for more information on your data folder). After choosing the font you like, look in the fonts folder within the Processing program folder. Copy your font of choice into your sketch's data folder, and the program should run fine after that.

BFont f = loadFont( "Bodoni-Italic.vlw.gz" ); loads that font file into the variable f.

textFont(f, size); sets the current font and size before drawing the text.

text("handglove", x, y); renders the text in place.

This example incorporates rotation, and a simple for loop.

Okay. If you are not a "typography person" and do not care for any of this, there is always a way to simplify things, at the expense of control. Furthermore, if you need something like a text entry field, it's useful to write your own. Most widgets of vernacular user interface are not hard to add to a project if you think of them as small, modular, interactive exercises - rather than seeing them as some kind of thing that the operating system exclusively provides. The thing you gain is ultimate control over the design. For more vernacular interface re-inventions, see the Processing GUI Examples.

Also see the whimsical Processing typography examples. Processing comes from a group of people concerned with aesthetics and computation. New forms of typography is one of the things that?their particular MIT Media Lab research group is world famous for.

Processing is a brand new work in progress, and as I said before, it is important to continue checking the website for updates. A new release can easily be installed in place of the new one, and your sketchbook/default folder can simply be copied from version to version. As I write this document, Processing is at version ALPHA 0050, when I came back to update the tutorial in Fall 2004, they were at ALPHA 0068. Processing might change the names of the three modes, basic, standard and advanced to something more fitting. At the time of ALPHA 0050, Casey was telling me it might also change its name from Proce55ing to Processing, and we all watched the change happen. The graphics engine has improved by adding anti-aliased rendering, alpha values in color (transparency factor), and the polygon fill will be improved. This is not to say that one cannot already write these things with a bit of research. Processing was written in the same language that it asks users to program in. This is different from Flash and Director, which are authored mainly in C. Amit Pitaru has created Sonia, a library for creating sound. As network communication is very useful, it is a prime item on the todo list. This may include downloading files from the web, but also generalized TCP/IP allowing you to talk to telnet, FTP, Gnutella, Carnivore, other Processing apps, and even Flash and Director programs. There is already network code floating around the Processing discussion pages, and it will probably be formally supported in the future. For camera vision, there is a library called JMyron. Myron is a Processing implementation of WebCamXtra, an open source camera vision Xtra for Director. In the spirit of integrated development environments, Processing hopes to add a more built-in tools such as a color picker, and a bezier editor. In addition to the software, Casey and Ben hope to expand the community. A code repository will be established as a central directory for useful pieces of Processing code. Processing is also open-source, which means that anyone can edit the Processing software itself. A proper open-source framework will be established so that anyone can download the code, recompile Processing, and then contribute the new version. There is already an accumilating page of Processing extension libraries.

With all this in mind, I hope that you will find Processing useful in addition to Macromedia tools that you are either learning, or have already mastered. Please publish or send any Processing examples around so that we might learn from your explorations, and do not forget to be a part of the online community by engaging in the discourse section of the Processing site. Happy creating!