Object-Oriented Programming

For this week’s sketch in p5.js I chose to use object-oriented programming to create an interactive sketch of a “Rain Room” (2020)” in the Atrium at MoMA. The sketch is inspired by Random International’s original immersive installation at MoMA from 2012, Rain Room, in which visitors could experience controlling the rain within a field of falling water that paused whenever a human body was detected. In my sketch, I chose to invert this relationship and have the raindrops follow the cursor of the mouse, creating a waterfall effect wherever it moves throughout the Atrium.

Link to Sketch + Code in p5.js Web Editor

https://editor.p5js.org/ami-mehta/sketches/kyFFN7IwI

Reference Images & Inspiration

 The Donald B. and Catherine C. Marron Atrium I MoMA

Random International. Rain Room (2012) I MoMA

Process

I began this project by conceptualizing and sketching what I wanted to draw and then breaking this down into components that I could code or “the smallest functional units” possible. I had the idea to create multiple raindrops by using a class to make a template for the rain. The various functions or methods would include showering and showing (displaying) on the screen.

If I could figure out how to do this, I decided that I would add other details to the background, including media (images) and architectural elements that reflected the Atrium through custom shapes and colors. I also stumbled upon Daniel Shiffman’s Purple Rain in Processing Coding Challenge Video, and thought I had some good examples to learn from.

// Steps for Creating a Rain Class

// Rain Class
// See the rest of the code in sketch.js
// Create a class for the rain
class Rain {
// Construct the parameters or fields
constructor() {
this.x = random(width);
this.y = random(-800, -100);
this.size = 10;
this.speed = random(10, 30);
}
// Add a shower function to make it rain
shower() {
// Add raindrop motion
this.y = this.y + this.speed;
// Reset raindrop height and x-position when it falls off the bottom of the screen
if (this.y > height) {
this.y = random(-800, -100);
// Update x-position to follow mouseX for a smaller waterfall effect
if (mouseX >= 50 && mouseX <= width - 50) {
this.x = random(mouseX - 50, mouseX + 50);
// If the mouse is not hovering on the screen then make it rain again
} else {
this.x = random(width);
}
}
}
// Add a show function to display raindrops
show() {
stroke(161, 184, 202);
strokeWeight(1);
line(this.x, this.y, this.x, this.y + this.size);
}
}

While examples are helpful, they can also be confusing because they do not always do what they want you to do! I had help from David Currie to simplify parts my code (e.g. I had tried to add in “gravity” but randomizing the speed could achieve a similar effect.

Instead of complex interactions, I could create a simple waterfall effect that followed the user’s mouse, and reset this using a loop to keep updating the rain.

Dave suggested I store the template as a separate file (“rain.js”) and the steps for making it rain as another (“sketch.js”). I learned how to work with scripts (for “index.html”) and sketch files by doing this.

// Steps for Making It Rain

I created an index and array for the raindrops. The variable let rainDrops allows for modularity (300 raindrops).

// "Rain Room" (2020)
// See the template for the "Rain Class" in the file rain.js
// Declare variables for modular drops and images
let rainDrops = 300;
let rainDrop = [];
let splashBomb;
let lilies;
// Load the images onto the canvas
function setup() {
createCanvas(800, 800);
splashBomb = loadImage('assets/splashBomb.png');
lilies = loadImage('assets/lilies.png');
// Multiply raindrop instances using loop, index, and array
for (let i = 0; i < rainDrops; i++) {
rainDrop[i] = new Rain();
}
}

Adding Media

In this section, I added images (.png files) to the sketch and figured out how to upload, save, and utilize assets.

Michel Majerus. splash bombs I (2002) I MoMA

// Calling On Functions

Since the assignment asked us to “put one or more functions in the object” I decided to use different functions to compose the background. The functions allowed me to work on each section individually and incorporate it into the code in a more legible and organized fashion:

// Add functions to update raindrops falling against the background
function updateRainDrops() {
for (let i = 0; i < rainDrops; i++) {
// Draw functions from Rain Class
rainDrop[i].show();
rainDrop[i].shower();
}
}
// Add different functions to compose the background
function atrium() {
noStroke();
background(236, 243, 235); // Cabbage White
stroke(255);
line(420, 520, 420, 313);
stroke(255);
line(325, 305, 325, 0);
image(splashBomb, 55, 385, 160, 90); // Use image of splashBomb
image(lilies, 570, 385, 200, 100); // Use image of lilies
}
// Ground
function ground() {
fill(68, 78, 86);
noStroke();
beginShape();
vertex(420, 520);
vertex(800, 555);
vertex(800, 800);
vertex(0, 800);
vertex(0, 560);
endShape();
}
// Windows
function windows() {
beginShape(QUADS);
noStroke();
fill(235, 214, 190);
quad(700, -10, 700, 230, 625, 235, 625, -10);
quad(185, 5, 185, 145, 295, 160, 295, 20);
quad(185, 200, 185, 270, 285, 280, 285, 212);
endShape();
}
// Door
function door() {
noStroke();
fill(235, 214, 190);
quad(445, 360, 485, 358, 485, 526.4, 445, 522.4);
}
// Columns
function columns() {
noStroke();
fill(255);
quad(380, 308, 380, 545, 325, 550, 325, 305);
quad(325, 305, 325, 550, 300, 540, 300, 315);
quad(325, 305, 800, 275, 800, 290, 380, 315);
quad(325, 305, 0, 280, 0, 295, 300, 315);
// Bench
noStroke();
fill(0);
quad(85, 575, 215, 560, 240, 575, 105, 590);
strokeWeight(1);
stroke(0);
line(86, 575, 86, 590);
line(238, 574, 238, 588);
line(105, 590, 105, 602);
line(210, 575, 210, 585);
}

RGB Values

I also converted the Atrium’s wall paint color schemes to RGB values:

I still have a long way to go, but grasping the basics of object-oriented programming is an inflection point on my coding learning curve!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s