Processing Art: What It Is and How Artists Use Processing and p5.js

Processing art is artwork written as code in Processing, the free, open-source programming language and environment that Casey Reas and Ben Fry started in 2001 as graduate students at the MIT Media Lab, or in p5.js, its JavaScript counterpart for the web browser. The artist writes a short program, called a sketch, and the program draws the image, often redrawing it many times a second so the work moves and changes while it runs.

Processing sits inside the wider practice of creative coding, where artists and designers use software as their medium, and much of what it produces is generative art. This article stays with the tools: where Processing came from, what a sketch looks like, which artists have used it, who looks after it, and how the work is shown.

Key takeaways

• Processing is a free, open-source, Java-based language and editor for visual work, first released on August 9, 2001 by Ben Fry and Casey Reas.
• It was made to serve as a "software sketchbook" and to teach programming fundamentals in a visual context, and it grew into a tool professionals use.
• p5.js, created by Lauren Lee McCarthy in 2013, brings the same approach to JavaScript and the browser.
• Every animated sketch is built on two functions: setup() runs once, and draw() repeats until the program stops.
• Works made with these tools include Casey Reas's Process series, Aaron Koblin's Flight Patterns and Sasha Stiles's A LIVING POEM, shown at MoMA.
• The nonprofit Processing Foundation, established in 2012, maintains Processing and p5.js and runs fellowships, education programs and Processing Community Day.

What is Processing?

Processing is a free, open-source programming language and development environment for making images, animation and interaction with code. Ben Fry describes it on his own site as a language and environment "for people who want to program images, animation, and interactions." Its source repository calls it a "software sketchbook and Java-based programming language."

You use it as a desktop application. The Processing website tells beginners to download the Processing application, select an example, and hit Run. According to the project's overview, the software has always run on Mac, Windows and Linux, and its community has written more than a hundred libraries for computer vision, data visualization, music composition, networking and electronics.

Today the name covers a family of tools. The Processing Foundation calls Processing "a family of accessible, artist-friendly tools," and the p5.js site lists Processing, Processing.py, Processing for Android, Processing for Pi and p5.js as one ecosystem.

Who created Processing, and why?

Casey Reas and Ben Fry started Processing in spring 2001, when both were graduate students in John Maeda's Aesthetics and Computation research group at the MIT Media Lab. In their own account, it grew directly out of Maeda's Design By Numbers, a project released in 1999. The Processing Foundation's history adds that Maeda made Design By Numbers with Reas and Fry, and traces the lineage back to Muriel Cooper's Visible Language Workshop, founded at MIT in 1975.

The stated purpose was teaching. Fry and Reas write that Processing was "initially created to serve as a software sketchbook and to teach programming fundamentals within a visual context." Their aim was software literacy within the visual arts and visual literacy within technology, and they designed it to be as simple as possible for beginners, inspired by the immediacy of BASIC and Logo.

The project began small. Ben Fry taught the first Processing workshop in 2001 at Musashino Art University in Japan, and the project was first called Proce55ing before it was renamed and moved to processing.org in 2004.

The teaching approach spread. In a National Science Foundation-sponsored survey at Bryn Mawr College, students in an introductory course taught with Processing said they would be twice as likely to take another computer science class. The Wiring and Arduino projects adapted the Processing environment to teach electronics.

What does "processing art" mean?

In this article, "processing art" means art whose source is a Processing or p5.js program. The phrase names a toolset rather than a style, so the work varies widely. The Processing Foundation's showcase groups work made with its tools under generative art, performance, data visualization, typography, print, fabrication, games and extended reality.

Processing's overview gives a similar spread: projected stage designs for dance and music, images for music videos and film, images exported for posters, magazines and books, and interactive installations in galleries, museums and on the street. What these share is the method. The artist writes the rules, and the computer carries them out.

What is p5.js, and how does it relate to Processing?

p5.js is a free, open-source JavaScript library that brings Processing's approach to the web browser. Lauren Lee McCarthy created it and led it from 2013 to 2020, and the Processing Foundation describes it as "bringing Processing's philosophy to JavaScript and the browser."

Because it runs in a browser, the official getting-started tutorial has you work in the p5.js Web Editor, or in a code editor such as VS Code. The p5.js project calls itself "a friendly tool for learning to code and make art" and says it prioritizes accessibility, inclusivity, community and joy. Version 2.0 arrived in 2025 with variable fonts, beginner-friendly shaders and new color modes.

The two share a vocabulary. setup(), draw() and line() appear in both reference manuals, so a sketch can move between them with modest changes.

How does a Processing sketch work?

A sketch is built around two functions: setup() runs once when the program starts, and draw() runs over and over until the program stops. Processing's reference for setup() says it defines initial properties such as screen size, and the reference for draw() says draw() "continuously executes the lines of code contained inside its block until the program is stopped," updating the screen at the end of each pass.

Each pass is a frame. In p5.js, draw() tries to run 60 times per second by default, and the artist decides what changes from one frame to the next.

Here is a complete p5.js sketch you can paste into the p5.js Web Editor:

function setup() {
  createCanvas(400, 400);
  background(245);
  stroke(20, 25);
}
 
function draw() {
  // noise() returns smooth values between 0 and 1
  let angle = noise(frameCount * 0.005) * TWO_PI * 2;
  let r = 40 + noise(frameCount * 0.01 + 50) * 150;
  let cx = width / 2;
  let cy = height / 2;
  line(cx, cy, cx + cos(angle) * r, cy + sin(angle) * r);
}

setup() makes a 400 by 400 canvas, paints it light gray, and sets a dark, mostly transparent stroke (the second number in stroke() is alpha). Every frame, draw() reads two values from noise(), which p5.js describes as random numbers that "can be tuned to feel organic," and turns them into an angle and a length. frameCount, the number of frames drawn so far, moves the input forward a little each time, so the line sweeps around the center instead of jumping.

The sketch never calls background() inside draw(). Processing's reference notes that pixels drawn to the window are cumulative, so leaving background() out lets every faint line build on the last. Here that accumulation is the drawing. Because noise() produces different results each time a sketch runs, every run makes a different image from the same rules.

The Processing (Java) version uses the same structure, with void setup(), size(400, 400) as the first line of setup(), and typed variables such as float.

Which artists and works are made with Processing?

Casey Reas's Process series is the clearest case of an artist and a tool growing up together. Reas's own account of Process says its development coincided with the creation of Processing, and the Processing Foundation's showcase lists his Process Compendium 2004 to 2010 among print work made with its tools. Each Process is a short English text: Process 4, for example, fills a surface with circular Elements and draws a line between the centers of any two that touch, shading short lines black and long ones white.

Reas treats the text as the work. His site states that the rules are the artwork, and that software and hardware are "secondary interpretations that can shift over time." Process has been shown at the Whitney Museum of American Art, SFMOMA, the Centre Pompidou and the Victoria and Albert Museum, and in 2022 he completed Pre-Process, an Art Blocks edition of 120 works drawn from sketches he began in 2003.

Aaron Koblin's Flight Patterns visualizes the paths of air traffic over North America. Koblin writes that the FAA data "was parsed and plotted using the Processing programming environment," in experiments first made for the project Celestial Mechanics with Scott Hessels and Gabriel Dunne at UCLA.

The Processing Foundation's showcase credits several more. Philip Worthington's Shadow Monsters is a participatory installation created with Processing. Golan Levin's Meshy, an interactive drawing environment from 1998, was revised in 2024 with p5.js. Sasha Stiles's A LIVING POEM, shown in MoMA's Agnes Gund Garden Lobby from September 10, 2025 to March 3, 2026, was made using p5.js.

Institutions use the tools too. Processing's overview says the Exploratorium in San Francisco uses Processing to develop exhibitions, and that projects made with it have been featured at the Museum of Modern Art, the Victoria and Albert Museum and the Centre Pompidou. For a wider list of artists working in code, see digital artists to know.

What does the Processing Foundation do?

The Processing Foundation is a 501(c)(3) nonprofit that maintains Processing and p5.js and works to widen access to creative coding. Its history says it was established in 2012 by Casey Reas, Ben Fry and Daniel Shiffman to expand the software's reach and support its long-term development.

Its mission is "to promote software learning within the arts, artistic learning within technology-related fields," and its stated goals include maintaining and improving Processing Java and p5.js. Its programs include:

• Fellowships: since 2013, the Processing Foundation Fellowship has supported emerging artists, educators and coders.
• Processing Community Day: started in 2017, it is a set of locally organized events run by more than 50 regional nodes, with over 120 events held from Tokyo to Santiago. The first was held at the MIT Media Lab with over 200 people attending.
• Education: Art + Code is a professional development program for U.S.-based educators bringing software concepts into K-12 art classrooms, using p5.js.
• Grants: paid pathways into open-source contribution for the people who build the tools.

The Foundation reports more than 1,600 educational institutions and more than 136 fellows and grantees. Processing turns 25 in 2026, and the project is marking it with Processing Community Day events organized by local communities this October.

How do you start making art with Processing or p5.js?

You can start with either tool for free, today, with the official tutorials. The fastest routes:

• Processing: download the app from processing.org, open one of the built-in examples and press Run, then work through the Getting Started tutorial and the reference.
• p5.js: open the p5.js Web Editor in a browser and follow the p5.js tutorials, which begin with setting up your environment.
• The Coding Train: Processing's tutorials page points to Daniel Shiffman's YouTube channel of beginner-friendly lessons, where he takes on coding challenges in both p5.js and Processing.
• OpenProcessing: listed on processing.org under "See what others are making," OpenProcessing is a community of 100,000 creative coders where you write p5.js sketches in the browser, follow other coders and fork their projects. Teachers can run classes on it.

The Processing Foundation describes the intended rhythm as sketching: write code, see the results, and try again. A practical first step is to open an example, change one number, and run it again.

How is Processing art exhibited, and why does running it live matter?

Processing art is usually exhibited by running the program on a computer connected to a screen or projector, because the work is the running program. Reas writes that the Process programs, once executed, "could run indefinitely to produce an endlessly variable array of images." A recording keeps one stretch of that output and drops everything the program would have drawn next.

Reas's Process works have been installed in galleries since the 2000s: Process 11 at bitforms gallery in Seoul in 2007, and Process 4 in FEEDBACK at Laboral Centro de Arte in Gijón, Spain, the same year. At MoMA, A LIVING POEM rewrote and performed itself every 60 minutes on a screen in the museum's lobby, with each page, in MoMA's words, coming "to life in real time."

That is the idea behind living art: code that keeps running on the wall. The Layer Canvas renders generative works live on its own processor rather than playing back video, and Layer Curation includes work by Casey Reas. The Canvas is available to pre-order in the US for $6,999 plus applicable taxes, with a $99 deposit that is fully refundable until the unit ships, expected in mid-2027.

Sources

1. Overview, Processing.org, https://processing.org/overview
2. Processing home page, Processing.org, https://processing.org/
3. setup() reference, Processing.org, https://processing.org/reference/setup_.html
4. draw() reference, Processing.org, https://processing.org/reference/draw_.html
5. Tutorials, Processing.org, https://processing.org/tutorials
6. Getting Started tutorial, Processing.org, https://processing.org/tutorials/gettingstarted
7. processing/processing4 repository README, Processing Foundation on GitHub, https://github.com/processing/processing4
8. A History of Processing, Processing Foundation, https://processingfoundation.org/about/history
9. What is Processing?, Processing Foundation, https://processingfoundation.org/software/what-is-processing
10. Showcase, Processing Foundation, https://processingfoundation.org/software/showcase
11. Mission and Values, Processing Foundation, https://processingfoundation.org/about/mission-and-values
12. Processing Foundation home page, Processing Foundation, https://processingfoundation.org/
13. Fellowships, Processing Foundation, https://processingfoundation.org/programs/fellowships
14. Processing Community Day, Processing Foundation, https://processingfoundation.org/programs/processing-community-day
15. Education, Processing Foundation, https://processingfoundation.org/community/education
16. About p5.js, p5.js, https://p5js.org/about/
17. Get Started tutorial, p5.js, https://p5js.org/tutorials/get-started/
18. p5.js reference: draw(), noise(), stroke(), background(), frameCount, TWO_PI, p5.js, https://p5js.org/reference/
19. processing/p5.js repository license, Processing Foundation on GitHub, https://github.com/processing/p5.js
20. Ben Fry, benfry.com, https://www.benfry.com/
21. Process, Casey Reas, https://reas.com/process
22. Flight Patterns, Aaron Koblin, https://www.aaronkoblin.com/project/flight-patterns/
23. Sasha Stiles: A LIVING POEM, The Museum of Modern Art, https://www.moma.org/calendar/exhibitions/5839
24. The Coding Train, Daniel Shiffman, https://thecodingtrain.com/
25. OpenProcessing home page, OpenProcessing, https://openprocessing.org/