Processing Basics

a series of basic processing code examples

Program DRAW

  1. Design a Drawing Application using User Stories
  2. Implement your Drawing Application in Processing
  3. You may work in pairs
  4. Save your program as yourLastName_draw and turn in your User Stories

Class notes

User Stories

Try to break up your project into specific user stories - you should have at least 2 (but more might be necessary). The idea is to think about your software design in terms of specific requirements and to create a user story about each one. These can simply be typed into a text document and included in your processing project folder.

here's the basic format:
1. statement in the form "As a [user role], I want to [goal], so I can [reason]."
2. brief discussion/explanation of the requirement (including a diagram/sketch if necessary)
3. confirmation - how will you know if the feature is working

for example
1. As a [user], I want to [press/release the mouse], so I can [start/stop drawing]
2. Discussion - the tool should only draw when the mouse button is pressed down, when the user releases the button, drawing should stop
3. Confirmation
1. success: user presses the mouse and drawing starts, user releases the mouse and drawing stops
2. failure: drawing continues if user is not pressing the mouse button

Sample Code

// set an image variable
PImage arrow;

// set a speed variable
float speed;

void setup() {
// set your display size(400,400);

// load the image
arrow = loadImage("arrow.png");


void draw() {
// draw with points
//point(mouseX, mouseY);

// calculate speed
speed = abs(mouseX-pmouseX);

// control the stroke weight strokeWeight(speed);

// draw with lines
//line(mouseX, mouseY,pmouseX,pmouseY);

// draw with an image

Sketch 04 : Imagine

// create an image variable
PImage img;

// load the image (it must be in your sketch's data folder
img = loadImage("someimage.jpg");

// tint (gray, alpha) or tint (val,val,val,alpha) tint(255,0,0,50);

// display the image image(name, x, y, width, height)

  1. 4.1 load an image
  2. 4.2 load 3 versions of an image with 3 different tints
  3. 4.3 using a "for" loop, load lots of images and change their location and tint
  4. Save your file as yourLastName_Imagine

Sketch 03 : Bounce

  1. 3.0 Move a shape from left to right across the screen.
  2. 3.1 Move a shape from left to right across the screen. When it moves off the right edge return it to the left;
  3. 3.2 Move a shape from left to right across the screen. When it hits the wall make it bounce back from right to left (forever)
  4. Save it as yourLastName_bounce

Sketch 02: 4 Types of Lines

note: - you may only use horizontal, vertical, or diagonal lines

Part 1:

  1. Draw (on paper) a regular pattern with 10 lines of 1 type.
  2. Write pseudo code to instruct someone else on how to create this pattern
  3. Replicate someone else's drawing with a Processing sketch
  4. Save it as yourLastName_oneLine

Part 2:
1. Replicate your sketch from Part 1 but use a for structure to automate your code.
2. Save it as yourLastName_oneLineFor

If time permits:)

Part 3:

  1. Draw (on paper) a regular pattern that includes your pattern from Part 1 and incorporates another pattern using the other 3 line types.
  2. Write pseudo code
  3. Replicate your pattern with a Processsing sketch
  4. Save it as yourLastName_fourLinesFor

Sketch 01 : Hello World

Sample file: Hello, World!

Copy and paste the code from the sample file into a new processing sketch. Manipulate the file to do the following things:

  1. Alter what the text says
  2. Change the background color and size of the sketch
  3. Display a numerical calculation (23*77 or 243/13, etc)
  4. Change the font & position of the text
  5. Display more text in a different font

Try to make an interesting composition given your limited set of tools.

Export and save your sketch in your student folder on the server with the folder name:

yourLastName_helloWorld (for me it would be schwartz_helloWorld)


A series of exercises for learning computer programming with Processing

A Basic into to Processing