An introduction to creative coding using Processing

Within this workshop, we cover the basics of the creative coding toolkit Processing. We will learn how to set up a Processing application (or sketch) from scratch, investigate the application's structure and way of functioning as well as gaining first experiences in reading the documentation. Finally, we will create our first application using some basic drawing and interaction features provided through the Processing library.

In order to create a Processing application, we need some basic knowledge about the Processing programming language (which is based on Java). No need to be scared! We will cover some essentials about the Processing programming language at the beginning of the workshop, following a practical approach by performing live coding demonstrations. This should set everyone up to get going with Processing.

The source code, covering all relevant and required material to complete this workshop, are available online via GitHub: [ Source code ] [ Processing programming language introduction ]

Workshop Content In Detail

Introduction to Processing

  1. Introduction of the Processing base frame, including Processing's setup() and draw() cycle.
  2. Drawing of a simple (static) ball.
  3. Ball movement along the x-axis.
  4. Implementation of a bouncing effect, so the ball stays within the application window.
  5. Drawing some application feedback, such as FPS, the mouse's position as well as the currently pressed key, directly to the application's window.
  6. Refactoring of the ball instance's code into a separate dedicated class.
  7. More keyboard input: Increasing/decreasing the ball's radius.
  8. Implementation of the feature to let the ball follow the mouse's position, once the mouse clicked the ball.
  9. Introduction of the random() function in order to randomize the initial position of the ball as well as randomly changing the color of the ball once it was clicked.

Introduction to the Processing programming language

  1. Processing function base frame
  2. Statements
  3. Arithmetic operations
  4. More functions and local vs global variables/scope
  5. Arrays
  6. Loops and iteration
  7. Branching source code using conditional statements
  8. Relational and logical operations

Prerequisites

  • None:
 We start from scratch with the basics, step-by-step.
  • Nice to have: Familiar with JavaScript, understanding of the concept of object-oriented programming (OOP), understanding of the concept of the Document Object Model (DOM) in HTML5, basic understandong of the World Wide Web (WWW, 'web'),
 as well as being creative and having a vast imagination of what you want to do.

Helpful Online Resources

last update: April 2017