P5+details

=Processing Details Page=

This page will cover all kinds of stuff to do with Processing. It is more for tutorial and prepared work, rather than random questions and answers -- that kind of thing should go in the relevant section of the FAQ.

Contents:
Charette Introduction (the hand-out). Getting your hands dirty (how to learn to read Processing code). Code snippets to do specific useful things. Other notes and tips. Tutorials on the web. Specific Sample Scripts Troubleshooting

Some text:
The goal of this charrette is to learn some basic techniques of scripting that can help us analyze pixel-field conditions. The particular starting point we are taking is to define points on a pixel field based on a specific definition of a threshold of ‘intensity’. Once we have pin-pointed zones of high intensity, we connect these with lines -- first in space (i.e. on one snapshot), then through time (across snapshots) -- to create a kind of lattice. The form of this lattice will then be open to discussion.

Experiment with the script as given: in particular, how does varying the match radius and match factor affect your results? Once you get the analysis into a 3D program, how can you ‘flesh it out’?

Food for thought:
[ From the last handout: //These systems have exhibited some machinic properties (inputs and outputs, replaceable parts, iterative behavior, responsiveness, rule-following, types of feedback, etc.) and some ambient properties (emergent qualities, distributed effects, continuous but limited variation, particular but not derivative or linear reactions, multi-media in the broadest sense, time patterns or signatures, degrees of mobility or fixity, degrees of control, etc.). As the initial syllabus proposed, this definition “becomes an expanded view of rationality”.// ]

1. In this process, an interaction between pixel field and vector, between iterative emergent behaviour and projected (goal-oriented) measurements, what is ambient, and what is machine? 2. Are there parts of this process that you could actually do by hand, while keeping (perhaps increasing) the rigor of the overall analytic machine? The answer is almost certainly yes... keep this in mind for when you hit limits to your ability to code something! 3. What is this lattice we have constructed? At what scale, and in what media, does it operate? Is it a physical structure to be skinned as appropriate to particular programmatic constraints? Or is it a set of flows/connections, some of which will be instantiated, others not, depending on a site situation? Or....

Next steps:
The script you have been presented with sets up a structure of analysis and form production that you can – indeed, must -- expand upon. Obvious areas of experimentation include:

1. The original field of behavior (the Cellular Automata, in this case) could be replaced with any number of other options: other cellular automata or complex field conditions, video feeds, sequences of still images related in any way you deem appropriate.

2. The power of the analysis: could you add smarter code to identify edges, specific mixtures of color, particular arrangements of pixels, etc.? How can you redefine ‘intensity’ from it’s rather simple definition in the current code (as ‘green pixel’)? Could you introduce memory to the analytic code, so that it could track certain conditions as they change? Also remember #2, above.

3. Feedback: could the ‘analysis’ start to introduce something back into the original field? This seems hugely provocative.

First, just some links: [|Edge detection example with Processing (note... it's still pixels, it's just boosting contrast levels, in a way]

Getting your hands dirty.
The best way to start working with code in processing is to work through (i.e. copy the code off the page, paste it into your processing window, and click "run") the little examples on [|the P5 learning page] in the following order (note, this is just the order that I think will be clearest for beginners -- obviously you can explore these examples however you like -- gshowman):

1. Structure / Statements and Comments: make sure you know how to use comments, they help you keep track of your thinking as you write the program, and make your code easier to understand for other people, like //your teammates//. When you collaborate on code, it's frequently a good idea to put your initials or a name after a comment, like this:
 * ``//``Angie, I fixed this line, it was changing too fast... -- gshowman**
 * x = x + 0.01;**

2. Structure / Setup and Loop These are the two basic functions for structuring any processing script. Make sure you understand every line of the code in this example! Also notice how when I refer to functions, I always put parentheses after them, like this: my_function. This is an aspect of syntax that you should get used to.

3. Structure / Functions Just a nice little snippet that shows how you can write your own functions. Note that it doesn't matter where you define the function (i.e. write the code for it) in your script, could be before or after the loop and draw functions.

4. Form / Points and Lines //and// Form/Shapes The basic shapes you want to know how to draw to begin to create and animate form, etc.

5. Data / Integers and Floats This example explains both how to create variables, and what different 'kinds' of variables mean. Well, in this case, what different kinds of numbers can do.

//...there will be more.... please post any that you think are especially helpful...//

-link to a processing intro

Code snippets.
1. Loading an image into the processing window: Here is a chunk of code that loads up an image from a file in your sketch's 'data' folder: code format="java" // load the image PImage I = loadImage("barca_01.jpg");

// show the image on the screen image(I,0,0, width, height);

// filter the image filter(GRAY); filter(POSTERIZE, 4); code It is potentially frustrating to put your image in the right place. Processing keeps each script file (your code) in a "sketch" folder, and it wants any image files you use to be inside that sketch folder too. There is an easy way to do this -- when you have your code open in processing, go into the "Sketch" menu and choose "Add File". Then find your image file and processing will copy it into the right place for you. Then you can just refer to it by name in your code (the way I did with "barca_01.jpg" above).

//As always//, please read the documentation for those specific functions I used above (loadImage, image, etc.) on the processing.org homepage in order to learn about more capabilities. filter has lots of cool features.

Notes and Tips:

 * Processing, proce55ing, p5**... these are all names people use for processing. The original use of the double-five was to differentiate the name from the general word "processing", I imagine. It's also a reference to script-kiddy culture, obviously (l33t, etc.). But now it turns out that P5 is a really convenient way to name the thing, so you'll see that a lot on forums on the web.

//“Proce55ing” is the spelling we originally used for the URL of the web site, because "Processing" was already taken. Even though it's a combination of numbers and letters, it was always pronounced “processing.” Since then, we saved our pennies, had a can drive, and used the funds to acquire the processing.org domain name. As a result we are no longer using the name “Proce55ing.”//

//When we see it with the 55's it annoys us and we want to punch people in the face. Or punch ourselves in the face for using it in the first place. Actually, we try not to be that emotional about it but we're trying to avoid the previous naming. However, to make it more confusing, we sometimes still use “p5” (but not p55!) as a shortened version of the name.//

(http://processing.org/faq.html)


 * Syntax** (i.e. the precise positioning and choice of every character you type) really matters in programming. Processing has its own particular syntax, which is really just the java programming language's syntax. Learn to recognize and use correctly characters such as the double-slash "``//``", the semi-colon ";", the parentheses "blah", the period "blah.x", the space key (spaces mean things, so none of your names can have spaces in them!), and learn the difference between "=" and "==" (this one is more tricky, but crucial).

Specific Sample Scripts
Here are two large scripts, written by either gshowman or fbitonti (or both): The original analysis code for a simple cellular automata (automaton?).

A version of that code that replaces the cells with a single loaded image, converts the image to grayscale, and looks for black pixels.

Troubleshooting
Check out [|this thread] on the processing forums.
 * Processing fails to load**