Processing: Designer as Code

Welcome to the Introduction to Processing workshop! This session is designed to immerse you in the Processing language and its creative software environment, providing you with the foundational skills needed to enhance your practice as designers.

Why?

Understanding the basics of programming is not about turning you into a software developer—it’s about empowering you to create your own tools and processes. Learning to code opens up a world of possibilities that can push the boundaries of your design practice. With these skills, you can explore iterative design processes, develop interactive works, and build custom tools that capture your unique creative vision.

What?

For this workshop, I expect you to have a fundamental understanding of programming concepts. You should be familiar with what a variable is, how to write a loop, and how to create a function. If these ideas are new to you, I recommend exploring the Eloquent JavaScript book, which offers an excellent introduction to the basics of programming. However, if you’re not yet comfortable with these concepts, don’t worry—I will cover the essentials in our first session, ensuring that everyone is ready to dive into the creative potential of Processing.

How?

Installation

1. Download the Processing IDE from the Processing website.
2. Install the Processing IDE on your computer.
3. Open the Processing IDE and explore the interface.

Basics

• Sketch: A sketch is a Processing program. It's a collection of code that tells the computer what to do.
• Setup: The setup() function is called once when the program starts. It's used to define initial environment properties such as screen size and background color.
• Draw: The draw() function is called continuously until the program stops. It's used to draw the contents of the sketch.
• Size: The size() function is used to define the size of the sketch.
• Background: The background() function is used to set the background color of the sketch.
• Fill: The fill() function is used to set the fill color of shapes.
• Stroke: The stroke() function is used to set the stroke color of shapes.
• Shape: The shape() function is used to draw shapes such as rectangles, ellipses, and lines.
• Coordinate System: The coordinate system in Processing starts at the top-left corner of the screen with the x-axis increasing to the right and the y-axis increasing downwards.
• Comments: Comments are used to explain code and are ignored by the computer. They are written using // for single-line comments and /* */ for multi-line comments.
• Variables: Variables are used to store data. They are declared using the var keyword followed by the variable name and value.
• Functions: Functions are blocks of code that perform a specific task. They are defined using the function keyword followed by the function name and parameters.
• Loops: Loops are used to repeat a block of code multiple times. The for loop is commonly used in Processing.
• Conditionals: Conditionals are used to make decisions in code. The if statement is commonly used in Processing.
• Random: The random() function is used to generate random numbers.
• Mouse: The mouseX and mouseY variables are used to get the current position of the mouse.

app_01

For our first sketch, we’ll create a simple program that draws a circle on the screen. In this sketch, we use the setup() function to initialize our canvas and the noLoop() function to ensure that the drawing is rendered just once. The key functions involved are size() (to define the sketch dimensions), background() (to set the canvas color), fill() (to choose the fill color for our shape), and ellipse() (to draw the circle).

void setup() {
  size(400, 400);
  background(255);
  fill(0);
  ellipse(width / 2, height / 2, 200, 200);
  noLoop();
}

app_02

In this sketch, we explore the use of loops by drawing horizontal lines across the canvas. Initially, we start with a straightforward approach by manually drawing each line. Notice how each line() call sets the position of a horizontal line with a fixed vertical spacing.

void setup() {
  size(400, 400);
  background(255);
  fill(0);
  // 8 Lines
  line(0, 0, width, 0);
  line(0, 50, width, 50);
  line(0, 100, width, 100);
  line(0, 150, width, 150);
  line(0, 200, width, 200);
  line(0, 250, width, 250);
  line(0, 300, width, 300);
  line(0, 350, width, 350);
}

We can simplify this process using a for loop. By incrementing the y-coordinate by 50 on each iteration, we reduce repetitive code and make it easier to adjust parameters later.

void setup() {
  size(400, 400);
  background(255);
  fill(0);
  int offset = 50;
  int num_of_lines = 10;
  for (int i = 1; i < num_of_lines; i = i + 1) {
    int y = i * offset;
    line(0, y, width, y);
  }
}

To make the sketch even more interesting, we can vary the stroke weight and change the color of each line dynamically. In this example, the stroke weight increases with each iteration, and each line is assigned a random color.

void setup() {
  size(400, 400);
  background(255);
  int offset = 40;
  int num_of_lines = 10;
  for (int i = 1; i < num_of_lines; i ++) {
    strokeWeight(i * 2);
    int y = i * offset;
    stroke(random(255), random(255), random(255));
    line(0, y, width, y);
  }
}

Now, I have a couple of questions for you:

• How would you modify the code to draw vertical lines instead of horizontal ones?
• Can you adapt the code to create a grid of ellipses?

Here’s an example that draws a grid of ellipses using nested loops. Try experimenting with this code by modifying parameters like offset, rows, cols, and the ellipse dimensions.

void setup() {
        size(400, 400);
        background(255);
        int offset = 40;
        int rows = 10;
        int cols = 10;
        for (int i = 1; i < rows; i ++) {
            for (int j = 1; j < cols; j ++) {
                strokeWeight(i * 2);
                int x = i * offset;
                int y = j * offset;
                ellipse(x, y, 20, 20);
            }
        }
}

app_03

Now lets continue developing further on the grid we just made, the grid as a designer you know has been a key foundational element in design. In this sketch, we will explore conditional statements to create a grid of ellipses that change color based on their position. We will use the if statement to check the position of each ellipse and assign a color based on its row and column.

void setup() {
  size(800, 800);
  background(255);
  noStroke();

  int offset = 40;
  int rows = width / offset;
  int cols = height / offset;

  float gridWidth = (rows - 1) * offset;
  float gridHeight = (cols - 1) * offset;

  float marginX = (width - gridWidth) / 2.0;
  float marginY = (height - gridHeight) / 2.0;

  translate(marginX, marginY);

  for (int i = 0; i < rows; i++) {
    for (int j = 0; j < cols; j++) {
      if (i % 2 == 0 && j % 2 == 0) {
        fill(255, 0, 0); // red
      } else {
        fill(0, 0, 255); // blue
      }
      ellipse(i * offset, j * offset, 20, 20);
    }
  }

  noLoop();
}

app_04

For this sketch we will try to create a spiral pattern using the cos() and sin() functions. These functions are used to calculate the x and y coordinates of a point on a circle based on an angle. By varying the angle and radius of each circle, we can create a spiral pattern. We will use the map() function to map the index of each circle to a color value, creating a gradient effect.

void setup() {
  size(800, 800);
  background(255);
  noStroke();
  translate(width/2, height/2);
  float angle = 0;
  float radius = 0;
  float angleIncrement = 0.2;
  float radiusIncrement = 0.8;
  int numCircles = 500;
  for (int i = 0; i < numCircles; i++) {
    float x = cos(angle) * radius;
    float y = sin(angle) * radius;
    fill(map(i, 0, numCircles, 0, 255), 100, 200);
    ellipse(x, y, 20, 20);
    angle += angleIncrement;
    radius += radiusIncrement;
  }
  noLoop();
}

app_05

In this sketch, we'll introduce a dynamic element that disrupts our structured grid. When the mouse is pressed, each circle will shift slightly in a random direction, breaking the uniformity of the layout. We'll use the mousePressed() function to apply an offset to each circle and redraw the sketch.

Circle[] circles;
int offset = 40;
int rows, cols;

void setup() {
  size(800, 800);
  noStroke();
  rows = width / offset;
  cols = height / offset;
  float gridWidth = (rows - 1) * offset;
  float gridHeight = (cols - 1) * offset;
  float marginX = (width - gridWidth) / 2.0;
  float marginY = (height - gridHeight) / 2.0;
  circles = new Circle[rows * cols];
  int index = 0;
  for (int i = 0; i < rows; i++) {
    for (int j = 0; j < cols; j++) {
      float cx = marginX + i * offset;
      float cy = marginY + j * offset;
      color c;
      if (i % 2 == 0 && j % 2 == 0) {
        c = color(255, 0, 0);
      } else {
        c = color(0, 0, 255);
      }
      circles[index++] = new Circle(cx, cy, 20, c);
    }
  }
  noLoop();
}

void draw() {
  background(255);
  for (Circle c : circles) {
    c.display();
  }
}

void mousePressed() {
  for (Circle c : circles) {
    float offX = random(-2, 2);
    float offY = random(-2, 2);
    c.applyOffset(offX, offY);
  }
  redraw();
}

class Circle {
  float origX, origY;
  float offsetX, offsetY;
  float dia;
  color col;
  Circle(float x, float y, float dia, color col) {
    this.origX = x;
    this.origY = y;
    this.dia = dia;
    this.col = col;
    this.offsetX = 0;
    this.offsetY = 0;
  }
  void display() {
    fill(col);
    ellipse(origX + offsetX, origY + offsetY, dia, dia);
  }
  void applyOffset(float dx, float dy) {
    offsetX += dx;
    offsetY += dy;
  }
}

In our previous examples, we focused on basic shapes. In the next section, I challenge you to replace these with more complex forms, images, or text. Experiment with rendering different elements and elevate the sketches we've created so far. Use this opportunity to tweak the code, explore new ideas, and push the boundaries of your creativity.

Resources

• Processing website
• Processing reference
• Eloquent JavaScript
• The Coding Train
• The Nature of Code
• Generative Design
• p5.js
• OpenFrameworks
• Cinder
• Patt Virasathien