A series of exercises for learning computer programming with Processing
Using the following five items, write instructions for making a peanut butter and jelly sandwich:
save your instructions as a text file:
yourLastName_peanutButter.txt (mine would be schwartz_peanutButter)
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:
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)
Save your file as:
yourLastName_observationalAlgorithm
note: - you may only use horizontal, vertical, or diagonal lines
Part 1:
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:
// 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);
example and code for: bouncing growing line
code for: bouncing bowie
example and code: simple drawing tool
code for: drawing bowie
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
// 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);
}
Create a typing program to display a different image for each letter on the keyboard.
capture keyboard input
int x = 100;
int y = 100;
PFont font;
void setup() {
size(500,300);
smooth();
strokeWeight(4);
font = loadFont("Arial-Black-48.vlw");
textFont(font); }
void draw () {
background(204);
if (keyCode == UP) {
y--;
}
line (20,y,100,y);
text(key,28,75);
}
create simple mouse buttons
void setup() {
size(500,300);
noStroke(); }
void draw() {
background(204);
if ((mouseX <= width/2) && (mouseY <= height/2)) {
fill(0);
rect(0,0,width/2,height/2); // upper left
} else if ((mouseX <= width/2) && (mouseY > height/2)) {
fill(255,0,0);
rect(0,height/2,width/2,height/2); // upper right
} else if ((mouseX > width/2) && (mouseY < height/2)) {
fill(0,255,0);
rect(width/2,0,width/2,height/2); // lower left
} else {
fill(0,0,255);
rect(width/2,height/2,width/2,height/2); // lower left
}
}
capture mouse input
void setup () {
smooth();
size(300,300);
noStroke(); }
void draw() {
background(222);
float x = mouseX;
float y = mouseY;
float ix = width - mouseX;
float iy = width - mouseY;
if (mousePressed) {
cursor(CROSS); // ARROW, CROSS, HAND, MOVE, TEXT, WAIT
ellipse(ix,iy,20,20); }
}
Create a clock that communicates the passage of time through graphical quantity or imagery rather than numerical symbols.
basic clock:
int s,m,h;
String time;
PFont myfont;
int x = 65;
int y = 60;
void setup() {
size(300,100);
myfont = loadFont("Garamond-48.vlw"); textFont(myfont);
}
void draw() { background(0);
s = second();
m = minute();
h = hour();
time = h + ":" + m + ":" + s;
text(time,x,y);
}
line clock:
void setup() {
size(100,100); stroke(255);
}
void draw () {
background(0);
float s = map(second(),0,60,0,100);
float m = map(minute(),0,60,0,100);
float h = map(hour(),0,60,0,100);
line (s,0,s,33);
line (m,34,m,66);
line (h,67,h,100);
}