The second week of Rune Madsen’s Printing Code course explores shape and form. The homework assignment for the week: “Write a Processing sketch that outputs 2 shapes on a page. The first shape should be inspired by the word “wet.” The second shape should be inspired by the word “sharp”. Use only black and white. You have to use beginShape(), and all vertex points have to be created in a for loop. No manual plotting.”
It took me a little while to figure out what shape I wanted to draw for the word “wet.” Initially I wanted to do something organic and abstracted – lines in the shape of water reflections or ripples, but lines aren’t shapes in the end. The word “wet” brings to mind something fluid and amorphous, liquid and transparent but reflective, round and repetitive. Drawing a raindrop seemed like a nice, albeit stereotypical representation of the word “wet.”
First I plotted out a raindrop manually using curveVertex(). I then translated the hard code into variables and a for loop. Finally, I made my raindrop into an object in order to display multiple raindrops at once.
Lastly, I rewrote a sketch from Dan Shiffman’s Learning Processing (example 10.7) in order to create an animation of raindrops falling down the screen.
My Code:
Static Sketch:
Drop[] drops = new Drop[30];
int totalDrops = 0;
void setup() {
size(600,600);
smooth();
background(0);
for (int i = 0; i < drops.length; i++) {
drops[i] = new Drop();
}
}
void draw() {
background(0);
for (int i = 0; i < drops.length; i++) {
drops[i].display();
}
}
class Drop {
int startingPoint = int(random(0,width));
int widthRain = startingPoint + 50;
int yPoint = int(random(0,550));
int r = int(random(10, 50));
color c;
Drop() {
c = color(255,255,255,random(20,70));
}
void display() {
stroke(0,80);
strokeWeight(4);
fill(c);
for (int i = startingPoint; i<widthRain; i++) {
beginShape();
curveVertex(i,yPoint);
curveVertex(i,yPoint);
curveVertex(i+r,yPoint+(2*r));
curveVertex(i,yPoint+(3*r));
curveVertex(i-r,yPoint+(2*r));
curveVertex(i,yPoint);
curveVertex(i,yPoint);
}
endShape();
}
}
Animated Sketch:
// Learning Processing
// Daniel Shiffman
// http://www.learningprocessing.com
// Example 10-7: Drops one at a time
// An array of drops
Drop[] drops = new Drop[1000];
// New variable to keep track of total number of drops we want to use!
int totalDrops = 0;
void setup() {
size(800,800);
smooth();
background(0);
}
void draw() {
background(0);
// Initialize one drop
drops[totalDrops] = new Drop();
// Increment totalDrops
totalDrops++ ;
// If we hit the end of the array
if (totalDrops >= drops.length) {
totalDrops = 0; //Start over
}
// Move and display drops
for (int i = 0; i < totalDrops; i++ ) {
drops[i].move();
drops[i].display();
}
}
class Drop {
float speed; // Speed of raindrop
int startingPoint = int(random(0,width));
int widthRain = startingPoint + 50;
//int yPoint = int(random(startingPoint,-height*100));
int r = int(random(0,50));
int yPoint = -r*4;
color c;
Drop() {
speed = random(2,6); // Pick a random speed
c = color(50,100,150,random(50,70));
}
// Move the raindrop down
void move() {
// Increment by speed
yPoint += speed;
}
// Display the raindrop
void display() {
// Display the drop
stroke(0, 80);
strokeWeight(4);
fill(c, random(70,100));
for (int i = startingPoint; i<widthRain; i++) {
beginShape();
curveVertex(i,yPoint);
curveVertex(i,yPoint);
curveVertex(i+r,yPoint+(r*2));
curveVertex(i,yPoint+(r*3));
curveVertex(i-r,yPoint+(2*r));
curveVertex(i,yPoint);
curveVertex(i,yPoint);
}
endShape();
}
}
