User Tools

Site Tools


oct 21: Introduction to programming with Processing: Processing IDE, drawing with code

Chapters 1 and 2 from the Learning Processing book. Preview at Google Books

Processing IDE

History (DBN), why Processing, comparison to other programs.

Processing is a programming language, development environment, and online community that since 2001 has promoted software literacy within the visual arts. Initially created to serve as a software sketchbook and to teach fundamentals of computer programming within a visual context, Processing quickly developed into a tool for creating finished professional work as well.

from the Processing website

Drawing with code

  • cartesian coordinates vs screen coordinates.
  • english language vs code language
  • simple shapes (point, line, rectangle, ellipse)
  • colors (grayscale, RGB, alpha, others)
  • fill(), stroke(), smooth()

Writing code in Processing IDE

  • syntax
  • comment (single line, multilines)
  • default structures/functions: setup() and draw()

Example file made during the course

//  made this sketch on my first day of Processing
int circleSize = 10; // initialize my variable
void setup() {
  size(600, 400); // size of the window
  smooth(); // want some smooth lines
  background(255); // set the background
void draw() {
  // clear background
  // increment size
  circleSize = circleSize + 10;
  // check if too big, reset to initial size
  if(circleSize > 300) { 
    circleSize = 10;
  // draw green circle
  fill(0, 255, 0, 50);
  ellipse(100, 200, 300, 300);
  // draw red circle, follows mouse cursor
  fill(200, 0, 0);
  rect(mouseX, mouseY, circleSize, circleSize);


Homework for next session

Draw a visual representation of yourself only using code in Processing. Do a greyscale version first, then a second one with colors.

Upload your Processing file/folder below (before November 2 23h59), editing this wiki page:

Name, myProcessingFile


courses/2010.10.21.intro_prototyping.txt · Last modified: 2010/11/04 04:07 by