Processing Starter Article 1

What is Processing?

An introduction to Processing, the open-source creative coding environment built for artists, designers, and beginners learning to program visually.

⏱ 8 min processing introduction creative-coding history

A Language Built for Visuals

Most programming languages were designed to solve business problems, process data, or build applications. Processing was designed to make pictures move.

Created in 2001 by Casey Reas and Ben Fry at the MIT Media Lab, Processing started as a teaching tool — a way to give artists and designers a gentle on-ramp to programming without drowning them in boilerplate code. The core idea was radical in its simplicity: what if you could write three lines of code and immediately see something visual on screen?

That idea turned into one of the most influential creative coding environments ever made.

From MIT Media Lab to the Processing Foundation

Reas and Fry were students of John Maeda, whose “Design By Numbers” project in the late 1990s had already explored the intersection of code and visual art. Processing took that concept further, building a full programming environment rather than a limited educational toy.

In 2012, the Processing Foundation was established as a nonprofit to steward the project. Today, Processing and its sister project p5.js are used by hundreds of thousands of artists, educators, researchers, and students worldwide. The source code is open and freely available on GitHub, and the Foundation hosts conferences, workshops, and a Fellows program to support creative coders globally.

What Processing Actually Is

Under the hood, Processing is Java with a simplified API and a custom IDE. When you write a Processing sketch, you’re writing Java — but the environment hides much of the ceremony. You don’t write a public static void main(String[] args) method. You don’t import graphics libraries or manage windows. You just write size(800, 600) and start drawing.

Processing compiles your sketch to Java bytecode and runs it on the Java Virtual Machine (JVM). This means:

  • It runs as a standalone desktop application, not in a browser
  • It has access to the full Java ecosystem, including third-party libraries
  • It performs well enough for real-time graphics and interactive installations

The Sketchbook Metaphor

The Processing IDE uses the metaphor of a sketchbook. Each program you write is called a “sketch,” stored in a folder called the sketchbook. This framing is intentional — it positions coding as a design practice, something iterative and experimental rather than formal and final.

The IDE is intentionally minimal. There’s a text editor, a toolbar with Run and Stop buttons, and a console below. That’s almost all. The simplicity removes friction between idea and result.

What You Can Make

Processing’s sweet spot is anything that involves drawing, animation, and interaction. Here’s a taste of what people build with it:

Category Examples
Generative art Algorithmic drawings, noise-based landscapes, recursive patterns
Data visualization Custom charts, network graphs, geographic maps
Interactive installations Museum exhibits, live performance visuals, sensor-driven art
Prototyping Quickly testing UI concepts, motion ideas, game mechanics
Physical computing Combined with Arduino for hardware/software projects
Music visualization Real-time audio-reactive graphics

Processing vs p5.js

A common question for newcomers: should you learn Processing or p5.js?

p5.js is a JavaScript library that reimplements the Processing API for the browser. It was created by Lauren McCarthy in 2013 with support from the Processing Foundation. The two projects share philosophy and most of their drawing functions, but they’re different in important ways:

Feature Processing p5.js
Language Java JavaScript
Runs in Desktop application Web browser
Performance Higher (JVM) Lower (JS engine)
File I/O Full access Limited (browser sandbox)
Libraries Java ecosystem npm ecosystem
Sharing work Export as app or video Publish a URL
Learning curve Slightly steeper Slightly gentler

Choose Processing when you want desktop performance, access to the file system, integration with hardware like cameras or sensors, or when you’re creating work for installation in a physical space.

Choose p5.js when you want to share your work in a browser, embed it in a webpage, or work in JavaScript alongside web technologies.

These tutorials cover Processing (Java). Many concepts transfer directly to p5.js.

Notable Works Made with Processing

The range of work created with Processing is staggering:

  • Casey Reas himself creates large-scale algorithmic prints that have been exhibited at galleries worldwide, including the Whitney Museum of American Art
  • Jer Thorp used Processing to create data visualizations published in the New York Times
  • Robert Hodgin (flight404) created otherworldly particle simulations and music visualizers that spread widely online in the early 2010s
  • Zach Lieberman built interactive public art installations using Processing as a prototyping and production tool
  • The annual Generative Art Conference regularly features Processing-based work

The Community

Processing has one of the warmest communities in creative technology:

  • OpenProcessing (openprocessing.org) hosts thousands of sketches you can view, fork, and remix — it’s the best place to discover what’s possible
  • The Processing Forum at discourse.processing.org is active and helpful for questions at all levels
  • Classic books like Generative Design (Hartmann, Koch, Klauss) and Learning Processing (Daniel Shiffman) use Processing throughout
  • Daniel Shiffman’s Coding Train YouTube channel has made Processing accessible to an enormous new audience

Up Next

In the next tutorial, you’ll download and install Processing, take a tour of the IDE, and get everything set up so you’re ready to write your first sketch.