Week 3 – Object Oriented Programming

Click on the piece with your mouse:

Link to sketch: https://editor.p5js.org/bobbybobbb/full/GKQffo525

When brainstorming ideas for this generative piece, I thought about pixel art and how you can generate complex images with simple shapes. You just need a lot of these simple shapes, and since we’re working with arrays this week, it’d be easy to store this data. I had this idea of a 100 pixel grid and how combining lines and diagonals can make shapes like flowers. It can be simple and have one color, so you essentially only need to store one thing: whether or not a specific pixel is colored. I created an object for the flowers where a boolean is stored in a 10 x 10 2d array. To display the flower, I just have to go through the array and fill in pixels that are true with a color and not filled in otherwise. The most difficult part about this process was creating a dynamic algorithm for generating each flower shape. I didn’t want to create individual shapes from scratch that were hard-coded in, so I used numbers like each pixel’s coordinate on the grid (the x and y value), an argument for the object that’s a randomly generated number each time, and the distance of the pixel from the center of the grid, to create equations and true or false statements to determine whether a pixel is colored or not. This part came with a lot of experimentation; I would generate 20 flowers on the screen to test out whether or not I like the way the numbers are being manipulated and the specific shapes of the flowers. Brainstorming how to manipulate the numbers and making sure there was a diverse range of shapes took the most amount of time.

Here’s some ways I generated the flower shapes: (this.shape is a random number passed into the object as an argument, i and j are the x and y coordinates of the pixel)

// distance of pixel to center of flower
let distFromCenter = dist(j,i,5,5);

// random pattern, weird alg after testing 
if ((distFromCenter - this.shape)==0) {
  this.pixArr[i][j] = true;
}
        
// another random pattern
if ((i * j + i + j + distFromCenter)%this.shape==0) {
  this.pixArr[i][j] = true;
}

// diagonal pattern
if (diag) {
  // diagonal
  if ((i+j==10) || (i==j)) {
    this.pixArr[i][j] = true;
  }
}

Every time the user clicks their mouse, a random flower (different shape, size, color) is generated. Each flower also has a green stem (its size is determined by the flower size). I didn’t want the flowers to exist in a vacuum so I created cloud objects as well that move across the screen and a blue background to seem like a sky. The clouds also have randomly generated speeds and positions within a given range. The flowers’ positions are also limited to the lower half of the screen because it wouldn’t make sense for them to be in the sky. There’s a “clear” button at the bottom of the screen to clear the flowers as well.

Randomness for the flowers’ parameters:

var xCoor = random(-20,400);
var yCoor = random(200,400);
var pixelSize = random(2,10);
var col = color(random(255), random(255), random(255));
var shape = floor(random(5));

For future improvements, I want to develop more algorithms that’ll give me more complex flower shapes, because right now, you can tell these flowers have a limited range of shapes.

Brainstorming: