A fully integrated graphics development environment based on Java.

language-overview

Processing is not so much a language as it is a drawing and graphics library. In fact Processing supports multiple different languages (Java, javascript, python). But for the most part when people are talking about 'processing' what they really mean is the processing library that's built on top of Java that includes it's own IDE (integrated development environment), and so that is what this post refers to.

Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology. There are tens of thousands of students, artists, designers, researchers, and hobbyists who use Processing for learning and prototyping.

-From https://processing.org/ homepage

Language Properties

  • Typing : Statically Typed, Strongly typed
  • Paradigms: Multiparadigm;
  • Imperative
  • Concurrent
  • Object oriented
  • Functional
  • etc.
  • Semi-colon based line endings (need to put a ';' after every statement)
  • Created: 2001

Useful Starter Resources

Hello Processing

Processing tutorials list

processing examples list

Processing Books list

Processing reference docs

Because processing is built on top of java most java resources will also be useful for processing.

Comments/Documentation

The commenting system in Processing is pretty standard, below are examples of single and multiline comments.

// This is a single line comment

/**
This
is
a
multiline
comment
*/

Docstrings, or document comments as they are called in java (and by extension processing) are formatted as multiline comments Before a function/class definition, and even feature metadata.

Here is an example:

/**
* A class that represents a ball
* @author Canadian Coding
* @param xpos The x position of the ball
* @param ypos The y position of the ball
* @param velocity The velocity of the ball
*/
class Ball{
    int xPos, yPos, velocity; //
    Ball(int xPos, int yPos, int velocity){
        self.xPos = xPos;
    }
}

Variables & Typing

Since processing is based on Java it is a statically typed and strongly typed language; This means that you must declare variables types (int, string etc.) when you initialize variables, and that variable types cannot be changed implicitly.

There are two syntactically distinct ways to create variables in processing:

  1. Instantiate a variable, then assign a value:
String greeting;
greeting = "Hello";
  1. Instantiate a with a value:
String greeting = "Hello";

Functions

Functions in processing (as they do in java) require an explicit statement of each parameter type, as well as the return type (if there is one).

Note if you are familiar with java that the syntax for public/private functions is optional and will default to public if not specified

Generally the format is as follows:

/** Docstring goes here*/
returnType functionName(parameterType parameterName){
    ...         // Some code here
    return foo  // Return something of the correct returnType
}

For example:

/** A function that takes in a square's length/height and returns it's perimeter
* @param x The length/height of the square
* @return The perimeter of a square with length x
*/
int squarePerimeter(int x){
    int perimeter = x * 4; // Multiply x value by 4
    return perimeter;
}

Running Processing Code

Processing code is saved in .pde files inside a directory of the same name, these files can be run from the IDE by opening them up and clicking the play Icon in the IDE.

I have created a demo that draws 3 snowmen. The demo illustrates the use of:

  1. Variables
  2. Functions
  3. For loops
  4. The setup and draw methods

To run the demo code in this repository simply change directories into the /processingDemo folder and open the processingDemo.pde file inside the processing IDE and hit the play icon in the top left.

Files

/processingDemo/processingDemo.pde
/** A demo of the processing language. @author Canadian Coding @since Processing V3.5.3 @date 14-10-19 This file is meant to do a few things: 1. Demonstrate void and setup 2. Show variables, for loops and functions 3. Draw 3 snowman. To run this file hit the play icon in the top left*/ /**A function that runs once, intended to 'set up' your project (hence the name) @see https://processing.org/reference/setup_.html */ void setup(){ size(400,400); // Sets up a 500,500 canvas; SEE https://processing.org/reference/size_.html println("Do you wanna build a snowman?\nCome on let's go and play!"); // Prints a string to the console; SEE https://processing.org/reference/println_.html noLoop(); // only draw stuff once; SEE https://processing.org/reference/noLoop_.html background(50); // Set background colour; SEE https://processing.org/reference/background_.html // Simplified manual version of drawing 3 snowmen // drawSnowman(80, 100); // drawSnowman(320, 100); // drawSnowman(200, 200); // The for loop version of drawing 3 snowmen int snowmanY; // Variable to keep track of the snowmen's y position for(int counter=0;counter<=2;counter++){ // Draw 3 snowmen while offsetting the x position by 120 each time int snowmanX = 80; // The x position of where to draw each snowman in the loop if ((counter % 2) == 0){ // Set snowmanY based on if the counter is even or odd snowmanY = 100; // If counter is even set snowmanY to 100 } else { snowmanY = 200; // If counter is odd set snowmanY to 200 } drawSnowman(snowmanX+=(counter*120),snowmanY); // Draw the current iterations snowman } } /**Not used in this example, but it's a function that runs over and over again (like a main loop). Useful for animations. @see https://processing.org/reference/draw_.html*/ void draw(){} /** Draws a full snowman (carrot nose included) @param xPos The x position of where you would like to draw the snowman @param yPos The y position of where you would like to draw the snowman*/ void drawSnowman(int xPos, int yPos) { drawHead(xPos, yPos); // Draws the snowman's head fill(255); // Fill snowman peices white ellipse(xPos, yPos+60, 70, 70); // Draw second body peice (offset by 60 pixels down) ellipse(xPos, yPos+140, 90, 90); // Draw bottom body peice (offset by 140 pixels down) } /**Draws the head of the snowman; An ellipse with two eyes (black circles) and a carrot nose (orange triangle) @param xPos The x position of where you would like to draw the snowman head @param yPos The y position of where you would like to draw the snowman head*/ void drawHead(int xPos, int yPos){ fill(255); // Fill snowman head white ellipse(xPos, yPos, 50, 50); // Draw head peice fill(0); // Fill eyes black rect(xPos-13, yPos-15, 5, 5); // Draw left eye rect(xPos+7, yPos-15, 5, 5); // Draw right eye fill(255, 127, 80); // Fill Carrot orange triangle(xPos-5, yPos, xPos+5, yPos, xPos, yPos+15); // Draw Carrot }