processing

Processing Basics

processing

a series of basic processing code examples

basic processing code and setup() routine - draw some shapes
using the draw() routine - make a ball bounce

Program DRAW

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

Class notes

example and code for: bouncing growing line
code for: bouncing bowie
example and code: simple drawing tool
code for: drawing bowie

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
image(arrow,mouseX,mouseY,speed,speed);
}

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)
image(img,0,0);

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

Sketch 03 : Bounce

3.0 Move a shape from left to right across the screen.
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.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)
Save it as yourLastName_bounce

Sketch 02: 4 Types of Lines

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

Part 1:

Draw (on paper) a regular pattern with 10 lines of 1 type.
Write pseudo code to instruct someone else on how to create this pattern
Replicate someone else's drawing with a Processing sketch
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:

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