Getting started with processing

Remarks#

Processing is an open source programming language and environment for people who want to create images, animations, and interactions.

Processing refers to the language built on top of Java and the minimal IDE it ships with. It is free and open-source, runs on Linux, Mac OS X, and Windows, and can output for screens, print, 3D packages and CNC printing.

The language simplifies a lot of complex concepts and eases the entry of designers, artists and non-programmers to the world of programming.

Over the years it was used to produce a number of projects ranging from data visualization, to physical computing , games, 3D, sound, live perfomance, and more.

Due to its vibrant community, Processing not only enjoys a contribution of over 100 libraries, but is also present on major mobile platforms such as Android and iOS.

There are online communities for sharing Processing content, like OpenProcessing.

Some websites even allow users to learn and use Processing directly in the browser, like the Flash-driven SketchPatch and the JavaScript-driven HasCanvas,Sketchpad and p5.js(pure JS).

There are also Processing ports to the following languages:

• JavaScript using ProcessingJS or p5js
• ActionScript
• Python (see NodeBox, Field, pyProcessing or the new official Python Mode)
• Scala
• Clojure
• Ruby

The Android mode allows to run Processing sketches as Android applications with little or no changes in the code by automating tasks from project setup to .apk file export. Android Processing sketches also have access to the underlying Android sensors and devices.

Advanced users are not constrained to the Processing IDE; they can set up Processing projects in Eclipse; use proclipsing or alternatively use Sublime Text to build and run sketch via the processing-sublime package.

Versions#

Installation and Setup

The easiest way to use Processing is by downloading the Processing editor from the Processing download page.

That comes as a zip file. Unzip that file anywhere, and you’ll have a directory that contains an executable (on Windows, that’s processing.exe).

Running that executable opens up the Processing editor:

The Processing editor (also called the Processing Development Environment, or PDE) contains many tools that do a lot of work for you. It allows you to write Processing code, which it automatically converts to Java and then compiles and runs for you.

The PDE contains many features, but for now just write your Processing code inside the white section of the editor, and then press the play button to run your code. See the Hello World section below for some example code.

You can also write Processing code using other basic code editors like Atom or Sublime Text, or with a more advanced IDE like eclipse.

Hello World

The easiest way to write Processing code is to simply call a series of functions. Press the run button in the Processing editor, and Processing will run your code. Here’s an example:

size(200, 200);
background(0, 0, 255);
fill(0, 255, 0);
ellipse(100, 100, 100, 100);

This code creates a 200x200 window, draws a blue background, changes the fill color to green, and then draws a circle in the middle of the screen.

However, most Processing sketches will use the predefined setup() and draw() functions.

• The setup() function is called automatically by Processing, once at the very beginning of the sketch. This function is used for doing the initial setup, such as size, and loading of resources such as image and sound files.

• The draw() function is called automatically by Processing 60 times per second. This function is used for drawing and getting user input.

  void setup() {
    size(200, 200);
  }
  
  void draw(){
    background(0);
    ellipse(mouseX, mouseY, 25, 25);
  }

This code creates a 200x200 window and then draws a circle at the current mouse position.