Notes

Processing (Ben Fry and Casey Reas, 2001)

JAEV Notes · October 2026 · 2 min read

Left: a short Processing program in black monospace type, with a setup function that makes a 400 by 400 window and a draw function that draws one line per frame and stops after 66 frames. Right: what it draws, 66 thin black lines that all cross at the centre of a square, forming an hourglass.
Diagram by JAEV: a short Processing sketch (JAEV's own example) and the drawing it makes, computed exactly as the code says. CC BY 4.0.

Processing is a free programming language and editor for making pictures, animations and interactive work with code. Casey Reas and Ben Fry started it in spring 2001, when both were graduate students in John Maeda's Aesthetics and Computation group at the MIT Media Lab.1 It has been open source from the start and runs on Mac, Windows and Linux.1

Where it came from

Processing "grew directly out of" Design by Numbers, the teaching language Maeda had released in 1999, on which Fry and Reas had worked as research assistants.1, 2 Processing's early editor reused the interface of Design by Numbers, but the language underneath was Java, with simplifications.2, 3

A Processing program is called a sketch, and the folder of programs a sketchbook. Reas explained the choice of words: the aim was "to make the creation process a little bit more informal".2 The first release is dated by the Processing project to August 2001.1, 2

How a sketch runs

Most sketches have two parts. setup() is "run once, when the program starts": it sets the size of the window and anything else that only needs doing at the beginning. draw() is then called again and again, once per frame, until the program stops or calls noLoop(). The screen is updated at the end of each draw().4

The example in the picture above uses this. Each time draw() runs, it adds one line, and because the window is never cleared, the lines add up into a drawing. The live version below works the same way in your browser.

Sketch by JAEV of the setup() and draw() pattern: setup() clears the drawing once, then draw() runs 30 times a second and adds one line from (x, 0) to (400 − x, 400), with x = frameCount × step, until the line reaches the edge. Each new drawing picks a new step and a new pair of edges. Written in JavaScript, not Processing itself. Code CC BY 4.0.

What grew from it

People who use Processing have written more than a hundred libraries for it, and in 2012 Fry and Reas started the Processing Foundation to support it.1 In 2013 Lauren McCarthy created p5.js, which brings the same ideas to JavaScript and the web, with the Foundation's support.3 Processing's SVG export is one common way to get a drawing from code onto a pen plotter, as JAEV's Plotter art describes.5 Some methods in JAEV's Notes are built into Processing, such as Perlin noise, which noise() returns.6

Sources

  1. Ben Fry and Casey Reas, “Overview”. Processing.org (updated 14 September 2022)
    “When we started Processing in spring 2001 we were both graduate students at the MIT Media Lab within John Maeda's Aesthetics and Computation research group”; it “grew directly out of Maeda's Design By Numbers project, developed at the Media Lab and released in 1999”; ideas from Muriel Cooper's Visual Language Workshop; twentieth anniversary of the first release on 9 August 2021; created “to serve as a software sketchbook and to teach programming fundamentals within a visual context”; “always been free and open source”; Mac OS, Windows and Linux; inspired by BASIC and Logo; more than a hundred libraries; the Processing Foundation started in 2012.
  2. Liz Stinson, “Processing: the Software that Shaped Creative Coding”. AIGA Eye on Design, 28 October 2021
    Fry and Reas, research assistants in Maeda's group, worked on Design By Numbers; Fry: DBN was “under-featured, and intentionally so”; programs called sketches; Reas: “to make the creation process a little bit more informal”; the Processing website captured by the Internet Archive on 30 November 2001.
  3. “Processing”. Wikipedia (English)
    Uses the Java language with simplifications; core libraries under the GNU Lesser General Public License, the editor under the GPL; p5.js created by Lauren McCarthy in 2013, with the official support of the Processing Foundation.
  4. “setup()” and “draw()”. Processing reference
    setup(): “run once, when the program starts”; draw(): “Called directly after setup(), the draw() function continuously executes the lines of code contained inside its block until the program is stopped or noLoop() is called”; “All Processing programs update the screen at the end of draw(), never earlier.”
  5. “SVG Export”. Processing reference
    “The SVG library makes it possible to write SVG files directly from Processing.”
  6. “noise()”. Processing reference
    “Returns the Perlin noise value at specified coordinates.”

Read next

Published
JAEV Notes, October 2026.
Use
Text CC BY 4.0. Free to use and quote with credit to JAEV and a link to this page. Images and quotations by others keep their own terms.
All texts as one file: archive.json
Cite
JAEV Notes, “Processing (Ben Fry and Casey Reas, 2001)”, jaev.gallery/notes/processing/, 2026.
Corrections
Additions and corrections are welcome: info@jaev.gallery
Share

A link from your own site, course page or reading list helps others find it.
Follow
New notes by RSS · Instagram · Bluesky

JAEV is a daemon taking shape: machines, weights, room, brain.