Learn to Make Interactive Graphics with Updated Getting Started with Processing

We started the Processing project in 2001 as a software sketchbook and to teach computer programming fundamentals within a visual context. Instead of printing “Hello World” to the console, people start by drawing a line to the screen. Since then, Processing has evolved many times over into what it is today — a powerful, minimal environment for learning, sketching, and producing professional work, with a dedicated community of contributors who extend the software with the ever-growing list of libraries (extensions). As always, Processing is free software and can be downloaded from the project website.

With Processing 3, we think we’ve made another leap forward. It has a new code editor with an enhanced interface, better error checking, and a built-in debugger. Processing 3 is faster for OpenGL work and we’ve added new features for high-resolutions screens and full-screen sketches. We also have a new and easier way to install and update Libraries, Modes, and Tools. A more complete list of changes is available online.

With the release of Processing 3, we’re thrilled to publish a second edition of Getting Started with Processing, an update of our 2010 book. The second edition is updated for Processing 3. The code and text has been updated throughout. It also includes a new chapter on working with and visualizing data, the topic of transformation now has its own chapter, and the new Sound library for Processing 3 is introduced with examples for audio synthesis and making graphics respond to sound. The book is now in full color, including the code listings, for improved legibility. All of the figures and diagrams have been updated for clarity.

The main benefit of Processing 3 for the readers of Getting Started with Processing is the enhanced code editor. It brings many essential features of professional coding environments to the simple (but not simplified) Processing editor. Code syntax details that are second nature to experienced programmers are often the most frustrating aspect of coding for beginners. Real-time warnings and error checking in Processing 3 help learners see where they need to put more focus on their code. Additionally, the new ability to “tweak” code allows changes to be made to the code while it is running. The minimal built-in debugger makes it possible to pause, examine, and expose the inner workings of a program while it is running.

To get a feel for how Processing works, here are two examples from the book — one from near the start and one near the end. This is Example 3-18; it shows how to define transparent colors:

size(480, 120);
noStroke();
background(204, 226, 225); // Light blue color
fill(255, 0, 0, 160); // Red color
ellipse(132, 82, 200, 200); // Red circle
fill(0, 255, 0, 160); // Green color
ellipse(228, -16, 200, 200); // Green circle
fill(0, 0, 255, 160); // Blue color
ellipse(268, 118, 200, 200); // Blue circle

Later, after the book has introduced variables, loops, functions, arrays, and data types, more interesting programs are possible. This code below is Example 12-3. It loads a table of latitude and longitude values for the U.S. postal codes and it draws each location as a point. Because this data is so dense, it’s larger than the example screen size. The mouse moves the visualization left and right to focus on different areas.

Table cities;

void setup() {
  size(240, 120);
  cities = loadTable("cities.csv", "header");
  stroke(255);
}

void draw() {
  background(0, 26, 51);
  float xoffset = map(mouseX, 0, width, -width*3, -width);
  translate(xoffset, -300);
  scale(10);
  strokeWeight(0.1);
  for (int i = 0; i < cities.getRowCount(); i++) {
    float latitude = cities.getFloat(i, "lat");
    float longitude = cities.getFloat(i, "lng");
    setXY(latitude, longitude);
  }
}

void setXY(float lat, float lng) {
  float x = map(lng, -180, 180, 0, width);
  float y = map(lat, 90, -90, 0, height);
  point(x, y);
}

All of the examples in the book can be downloaded through the new Processing 3 Contribution Manager and then opened through the File menu. Once the Contribution Manager is open, select “Getting Started with Processing” and then “Install” to add them to your version of Processing.

In addition to this book, we’ve worked with Lauren McCarthy to create Getting Started with p5.js and with Allison Parrish to create Getting Started with Processing.py. Lauren has ported the original book to JavaScript through the p5.js project. Allison has ported the book to Python through the Processing.py project. Both books modify the original content as appropriate for these different programming languages. Lauren’s book is available now and Allison’s will follow in a few months.

Processing, p5.js, and Processing.py are all supported by the Processing Foundation. We started the Foundation in 2012 with the two-fold mission to promote software literacy within the visual arts, and visual literacy within technology-related fields. Our primary goal is to lower the barrier of entry to coding for non-developers, and promote the visual arts for people from all backgrounds. 

We’re thrilled to share Processing 3 and the Second Edition of Getting Started with Processing with you.