assignment 3: a cube party

concept:

Because the last generative artwork piece I made was very 2D, this time I wanted to focus on making something that would give the illusion of being in 3D. I was very inspired by the examples and exercises that we saw/did in our last class, specifically the exercise with the randomized balls and the flock that we saw that moved according to the cursor. My assignment idea is a combination of that, where I wanted to make a group of rotating cubes follow a cursor and also scale according to it.

However, I unintentionally increased the difficulty of this project for myself. I came across this when googling examples for how to make cubes in p5.js, and following the code, I set the mode to WEBGL not realizing it would change a lot of the way I needed to approach things in my code. In addition, the mathematics of making the cubes was also a bit difficult for me to grasp initially (the last time I had to think about velocity and vectors this deeply was back when I was doing A-Level Physics, so saying I was quite rusty is a bit of an understatement).

Though the outcome is a bit different than what I hoped to get initially, I still believe I captured the essence of what I wanted.

code highlights and improvements

while the most complicated part of my code is the movement, I’m actually prouder of the scaling of the cubes because I personally feel it is much more intuitive and noticeable.

//get the scaling factor based on the cursor and where the cube is currently
const scaleFactor = map(dist(mouseX, mouseY, this.position.x, this.position.y), 0, width, 0.5, 2.0);
const scaledSize = this.size * scaleFactor;

I also like the subtle disco ball touch I added, because I think it helps convey the energy/vibe of the piece.

function discoBall(cursorPosition){
  let flashing = frameCount % 60
  push();
  strokeWeight(0.2)
  stroke(255)
  if (flashing < 20) {
    fill("#d2d0d2");
  }else if (flashing < 40){
    fill(color(255, 250, 199))
  }else {
    fill(color(0, 57, 163));
  }
  translate(cursorPosition);
  sphere(15, 10, 10);
  pop();
}

For future improvements, I’d like to fix the movement so that it follow the cursor more precisely, or at least that the movement of the cubes according to the cursor is much more intuitive. The mathematics in it is a bit messy, and i was constantly adding new aspects to fix problems that were arising in the movement (for example, I added the separate method after all the cubes began to be in exactly one point, but then had to add cohere after I saw that they were super far apart) and the end result is something else entirely. While I am happy with how it looks, I want to approach movement in my piece in a more organized manner.