@sansumbrella (David Wicks)
writing is the most direct interface for describing systems and interactions.

@peregrintook
code is a medium; many tools constrain you to narrow subgenres. Knowing the fabric and pigments of the medium permits exploring more.

@voxels (Michael Edgcumbe)
so I can understand why the choices underlying the design seem like the most elegant solution

@barrythrew (Barry Threw)
Because the tools don’t exist to accomplish what I want to do. There is nothing more I would like than not to have to write software.

@robmyers (Rob Myers)
to learn, to gain understanding, to not be limited by affordances, and to be able to share all of this

@simonski (Simon Gauld)
why? because programming is a creative expression itself

@vormplus (Jan Vantomme)
because it’s easier to iterate through ideas and compositions. “Industry standard” tools don’t allow me to do this.

@brainSteen (Christopher Warnow)
When code goes through my hands, it has my gesture in it. Else it would be like painting with another cold dead hand holding a brush.

@eskimobloood (Andreas Köberle)
With other peoples software I can replicate other peoples dreams, with my own software I can dream my own.

@manovich (Lev Manovich)
Because writing software is a form of thinking and making theory; its a big part of cultural analytics strategy

@AlexKarasev (Alex Karasev)
Somebody has to write those tools! Not me; I just write “glue pieces” filling the functionality gaps. Some folks write to stay current

@miskaknapek (Miska Knapek)
1. it’s much more fun 2. existing software doesn’t conform to my way of working/desires 3. i want to be free :)

@admsyn (Adam Carlucci)
I use existing tools to make things that don’t exist yet (or I hope they don’t, anyway)

@madronalabs
Why do you write rather than just reading words other people have written?

@lankybutmacho
That’s the beauty of Processing for me: coding as exploration/research. Also, then the product can be concise & elegant without bloat.

@lennyjpg (Leander Herzog)
adobe is a cheeseburger, processing is like crack. it should have a warning on it. i gave it my hand and it ate my arm.

The Interactive Telecommunication Program at New York University generously funded a Processing development workshop from 17 – 20 June 2011. Ben Fry, Dan Shiffman, Andres Colubri, Jer Thorp, Patrick Hebron, and myself worked together to clearly define the 2.0 release.

Processing.Android: Open Source for Mobile Innovation
UIC Innovation Center
1240 W Harrison St, Chicago, Illinois 60607

Visit the Processing.Android event site for more information.
This event if free to attend, but requires registration.

The site says:

Processing.Android: Open-Source for Mobile Innovation brings together internationally recognized innovators from the open source software community, Chicago based startup companies, and students and academics from the areas of Art and Design, Computer Science, and Information Sciences. Keynote speakers Ben Fry and Casey Reas present the latest edition of Processing targeting Android devices, designed to simplify and streamline prototyping and development for mobile platforms… Join us for the first public summit to hold Processing.Android workshops, presentations, and panel discussions. The event is free and open to the public. Workshops require prior registration.

I’m giving a presentation:

Coding with Processing as a Design Practice
Projects created with Processing, an open-source programming environment for visual designers and artists, are used to show the potential of writing custom software as a design methodology. Examples range from dynamic information visualization to art installations to object fabrication.

And teaching a workshop:

Introduction to Processing for Programmers
This workshop for intermediate-level programmers (and up) is a brief introduction to using the Processing graphics library and environment. We’ll cover how to code 2D and 3D interactive graphics and how to use libraries to extend the base software into other domains. This workshop covers the basics of Processing and assumes the participant understands programming fundamentals from variables to object-oriented techniques.

Getting Started with Processing
Casey Reas, Ben Fry
O’Reilly Media / Make
Print ISBN  978-1-4493-7980-3
Ebook ISBN  978-1-4493-7981-0
5.5 x 8.5 inches
Paperback, 208 pages

This slim volume was written as a softer introduction to programming than our book with MIT Press, Processing: A Programming Handbook for Visual Designers and Artists. In contrast, it’s more casual and affordable and focuses specifically on Processing. At the request of the O’Reilly, we answered a series of questions to help them promote the book. I think they are the most concise way to explain why we wrote the book:

What made you write the book?

To make learning computer programming easier and more enjoyable. This book is for a different audience than the overwhelming majority of programming books. We promote a different approach that emphasizes making and doing and creativity. We introduce programming by emphasizing image making, rather than manipulating numbers and text.

Why is your book especially important now?

Software is one of the most important forces defining our future: culturally, socially, politically. We focus on the cultural component. This book integrates learning how to program with the visual arts. The promotion quotes on the inside front cover of the books sums this up, particularly the quote from John Maeda:

“Making a computer program used to be as easy as turning it on and typing one or two lines of code to get it to say, ‘Hello.’ Now it takes a 500+-page manual and an entire village. Not anymore. This little book by Ben and Casey gets you computationally drawing lines, triangles, and circles within minutes of clicking the ‘download’ button. They’ve made making computer programs humanly and humanely possible again — and that’s no small feat.”
John Maeda, President of Rhode Island School of Design

What is the single most important thing readers of your book will be able to do after reading your book

To write their own programs. This changes the relationship between an individual to her computer. She is now a creator, producer, and maker. She starts to become literate in a new way.

Who is your intended audience?

This book is for the hobbyists, tinkerers, and makers, but about it’s about software, rather and electronics and construction. It assumes no prior knowledge of programming, but it does assume a basic understanding of using computers and graphics software for drawing. The audience ranges from children to hobbyists to professionals – people interested in getting started programming through making images. It’s a perfect book for workshops because it covers the basics quickly and is inexpensive. It’s a gift for the children, nephews, and nieces of programers. It’s for people who loved Logo as a child and want to pass on that experience to the next generation.

How important is the subject matter of your book? What do you think is on the horizon for your readers?

This book is a gateway to learning more about programming. It’s intended to get people excited. It can be followed with a number of other books and classes.

Getting Started with Processing related to other O’Reilly titles:

Visualizing Data by Ben Fry
Programming Interactivity by Joshua Noble
Making Things Talk by Tom Igoe
Getting Started with Arduino by Massimo Banzi

Could you send us a list of 5-10 tips, tricks, and/or best practices?

We’ve compiled five short programs from Getting Started with Processing. Download the Processing software from http://processing.org or run them online at http://sketch.processing.org. Cut and paste one program at time into the text box and press the play button to run.

Example 3-17: Draw with Transparency

size(600, 400);
noStroke();
smooth();
background(204, 226, 225);     // Light blue color
fill(255, 0, 0, 160);          // Red color
ellipse(232, 182, 400, 400);   // Red circle
fill(0, 255, 0, 160);          // Green color
ellipse(328, 84, 400, 400);    // Green circle
fill(0, 0, 255, 160);          // Blue color
ellipse(368, 218, 400, 400);   // Blue circle

Example 4-12: Pins and Lines

size(600, 400);
background(0);
smooth();
fill(255);
stroke(102);
for (int y = 20; y <= height-20; y += 10) {
  for (int x = 20; x <= width-20; x += 10) {
    ellipse(x, y, 4, 4);
    // Draw a line to the center of the display
    line(x, y, 300, 200);
  }
}

Example 5-9: Smooth Lines with Easing

float x;
float y;
float px;
float py;
float easing = 0.05;

void setup() {
  size(600, 400);
  smooth();
  stroke(0, 102);
}

void draw() {
  float targetX = mouseX;
  x += (targetX - x) * easing;
  float targetY = mouseY;
  y += (targetY - y) * easing;
  float weight = dist(x, y, px, py);
  strokeWeight(weight);
  line(x, y, px, py);
  py = y;
  px = x;
}

Example 7-9: Move Shapes Randomly

float speed = 2.5;
int diameter = 60;
float x;
float y;

void setup() {
  size(600, 400);
  smooth();
  x = width/2;
  y = height/2;
}

void draw() {
  x += random(-speed, speed);
  y += random(-speed, speed);
  ellipse(x, y, diameter, diameter);
}

Example 10-9: Track Mouse Movements

int num = 60;
int x[] = new int[num];
int y[] = new int[num];

void setup() {
  size(600, 400);
  smooth();
  noStroke();
}

void draw() {
  background(0);
  // Copy array values from back to front
  for (int i = x.length-1; i > 0; i--) {
    x[i] = x[i-1];
    y[i] = y[i-1];
  }
  x[0] = mouseX; // Set the first element
  y[0] = mouseY; // Set the first element
  for (int i = 0; i < x.length; i++) {
    fill(i * 4);
    ellipse(x[i], y[i], 40, 40);
  }
}

This is just the beginning, Getting Started with Processing has over 120 example programs.

Processing Discussion Forum
The forum is the place where things begin and discussions are held. It’s a place for the exchange of ideas and knowledge. We’re excited to start fresh (a little late spring cleaning) so we’re not porting over the previous content or user accounts. The previous two Processing forums (one for the software from beta to 1.0 and one for the alpha software) will be archived as HTML pages and will remain available. The Processing community has held some amazing discussions over the years and we want that knowledge to remain publicly available.

Processing Wiki
The wiki holds the technical documentation and community-generated code examples and tutorials. The best discussions from the forum will hopefully be edited and documented on the wiki as examples and tutorials for easy reference and updates.

Processing Blog
The blog is for announcements from the Processing developers. It’s a one-way communication channel used for new releases and changes to the software. The announcements that used to be made through the Processing Discourse Forum will now go through the blog.

Processing on Google Code
This is the active resource for the SVN code repository, source browsing, and bug tracking. All bugs reports and suggestions for the software will now be handled through this site.

The main Processing website will remain the place for the exhibition, code reference, tutorials, and the software download. The main website is the public face of the project, while the work and innovation happens on the forum and wiki.

Visit the course website
Visit the course exhibition at OpenProcessing

Here’s a partial list of projects that impressed me:

Project 6: Play
Michael, Ola, Matthew, Thomas, Mayura, Hugo, Grace, Gina

Project 5: Transform(er)
Ola, Michael, Heather, Jimena

Project 4: Narrate
Gina, Michael, Patricia, Mayura, Adrienne,

Project 3: Collage
Jimena, Heather, Michael, Grace, Mimi

Project 2: Respond
Ola, Grace, Heather, Michael, Ryan, Matthew

Project 1: Draw
Brianna, Ola, Hugo. Michael, Alexander, Matthew

I changed the assignments significantly from the previous version of the class and anytime that happens, there are some hits and misses. I feel good about the hits and I have clear ideas about how to improve the project briefs that were less successful. In the spirit of information exchange and self-critique, here are my thoughts:

Project 6: Play
The decision to limit the visual elements to 2 lines and 2 circles was a good move. The students focused more on the interactivity than in the past when they could spend more time creating elaborate graphics. Future: limit the project to 4 elements total rather then 2 lines, 2 circles. Each of the elements can be a circle, line, or rectangle.

Project 5: Transform(er)
This was the first time for this assignment and the brief didn’t lead to the kind of learning that I had intended. For many students it became an illustration project with very simple moving components. Future: Rename the project to something like “Transform(er) SuperMega” and turn it into a branding/logo/ID design project (can be earnest or a parody). Restrict all graphics to Processing geometry to encourage maximum formal flexibility. Instead of using mouseX as the input, use controlP5 library and have around three scrollbars change different parameters such as width, height, color, quantity, etc. Make a presentation of generative ID design (Karsten, Gadget OK!). This might be a good time to introduce bezierVertex(), curveVertex(), sin(), cos().

Project 4: Narrate
I think Alice in Wonderland was a great text to select, but not enough of the class read it closely, leading to generic narratives: “Oh no! Alice is being attacked by the cards.” The source material is amazing, it should be used. I think it’s important to formerly review the early steps of the process on this project, they should spend at least a week working on the story and images before starting the program. The decision for everyone to use the same story as the starting point was good. Future: Be a stickler for the diagrams and paper prototype, find another appropriate text with illustrations, constrain the text in the software to found elements within the  story. This leads off the Collage project well.

Project 3: Collage
Future: Too many of the projects were slight variations of the sample code, so explain the project is about setting up relations between elements, not simple giving them random values.

Project 2: Respond
This was the first time for the “eye” exercise and I was happy with the results. Future: encourage more variation (there were too many generic cartoon eyes), encourage more fluid response.

Project 1: Draw
This quarter, I limited the graphic elements to point(), line(), triangle(), quad(), rect(), ellipse(), and arc() and this was a good decision. I removed curve() and bezier() as options and didn’t discuss them in class. In the past working with bezier() was extremely frustrating to students and I don’t want to start them off frustrated. (Working with Bezier curves directly with coordinates is not pleasant for anyone.) I also made it clear that only integer numbers should be used as parameters to the drawing functions. Future: need to emphasize comments as a way to organize the code, emphasize variables.

Also, starting in Fall 2009, we started hosting the class at OpenProcessing.org. This has been great; Sinan has my sincere gratitude for creating a wonderful system.

I’ve taught for ten years now, but I’ve not written about my teaching or curriculum ideas. I’ve written extensively (too much?) about Processing, but not specifically how I use it in classes at UCLA and workshops elsewhere. This post is a start.

To throw a few more thoughts in…
I’ve been thinking more lately about how tools used for education are often different from tools used by professionals/experts. I think there’s substance to writing about how Processing relates specifically to education. How it fosters sharing information, how it limits the initial technical complexity of programming but details can be revealed to provide more flexibility in time (the training wheels come off to reveal a new experience), and how it is also simple at the core to give learners the experience of doing things the long way before they move to a higher-level library to give the same result with less effort. These factors encourage exploration, reduce frustration, and can lead to a deeper understanding of the software medium.

For the first time, we’re selling Processing t-shirts. Profits will fund Processing development. We’ve partnered with Wire & Twine to make this happen. The shirts are hand screened in Oxford, OH, the home of the Processing 1.0 launch in November 2008. The shirts are available for pre-order on a navy American Apparel 100% cotton. Order by November 30th to get your shirt by December 25th. Shirts will begin production on November 30th and ship no later than December 14th.

We have two styles: the BEAUTY, and the BEAST. The BEAUTY shirt features a network image created with the code written for the Processing web header and the cover of the Reas/Fry book. The setup() and draw() functions from this code appears on The BEAST tee. The BEAST shirt features a diagram of the iconic Processing Development Environment and a piece of the code used to create The BEAUTY tee.

For myself and Ben Fry, DBN was the catalyst for Processing. Here’s an except from an essay we wrote in 2008:

Released by John Maeda in 1999, Design By Numbers (DBN) had the most direct impact on Processing. (In fact, it’s fair to say that there would be no Processing without DBN.) This minimalist language was created to be accessible to designers and artists and it works very well to introduce ideas of programming to that audience. Two other innovative ideas were integrated in DBN. First, the programming environment could be embedded into a web page so that it could be access for free, by anyone with a Web connection. Second, a web-based courseware application was integrated into the software to allow students to upload their assignments to a server where the public could see their work and look at their source code.

Processing’s emphasis on teaching came from our experience working with Prof. Maeda on DBN. We were so impressed with how quickly a beginner could start writing programs. Initially, we were interested in melding the idea of “sketching” in code with the pedagogical aspect of DBN. While working on DBN, Ben developed several experimental versions that included other programming languages (Python and Scheme) and drawing features (color, changing the window size, magnification, movie recording, and even OpenGL support), but it was clear that these did not make sense for the DBN project because they interfered with Maeda’s intention of a simplified programming language and environment.

Because it was written for the network, it can still be used today by simply visiting the URL. This makes it simple to test drive. First, glance at the brief introduction, then check it out.

The Chrome Experiments site was launched today to feature the JavaScript potential of the new Google Chrome Web browser. A few of the projects, including my contribution called Twitch, use Processing.js. Processing.js is John Resig’s port of the 2D parts of Processing to JavaScript using the Canvas element. I developed my entire project in Processing and then basically cut and pasted it into an HTML file. And there it was, Processing code running inside a browser without a plugin. Twitch was featured at Technology Review today in the post Browser Coders Make Chrome Shine.

Here are a few developing thoughts about Chrome and Twitch:

- Chrome and its fast JavaScript capability offers a glimpse of a Web without proprietary plug-ins. This allows the code (programs) to run directly in the browser rather than loading, for example, the Shockwave Player (from Adobe) or Java (from Sun). This makes it possible to create visually exciting and interesting works without using proprietary tools (in the case of Flash) and works that are accessible to more people (in the case of Java, because many people don’t have the plug-in). This is how innovation on the Web happened back in the mid-1990s; everyone was always looking at how people did things by looking at their HTML code. It made innovation happen quickly. With Flash and Java programs, you don’t have access to the code.

- The piece I created, Twitch, focuses on the genre of one-button games. This is a game that is played with a minimal interface (just one button) and is easy to figure out. I worked to create nine complementary pieces. First, you figure out the controls and then you figure out what to do, without instructions and in a short time. It’s a light piece, meant for enjoyment.

- Technically, I think the greatest innovation of Chrome is launching each Window or Tab as a separate process. If you try to run Twitch on Firefox it starts to slow down as more windows open. Each mini-game competes for the same resources from the computer’s processor. In Chrome, because each window runs separately, the frame rate remains high.