Assignment 3: Following the Crowd – Introduction to Interactive Media

For this week’s assignment, we were tasked with creating a piece of generative artwork. Fortunately, I was hit with inspiration pretty soon after leaving class. This week was candidate weekend for new potential students, and I got to watch them crowd up around volunteers. This inspired me to create this artwork, which has a grid of blocks, with an interactive feature of all the blocks pointing towards the mouse.

We were asked to use Object-Oriented Programming for this assignment, so I started by first programming first block to see whether I could actually get the triangle to follow the mouse around or not. In my previous assignment, I had learnt how to use the rotate() and translate() functions, but this time, I needed to have it rotate according to angle of my mouse. This proved to be the most challenging part of this task. I struggled with calculating the angle (research eventually led me to the atan2() function), and then actually having the triangle rotate about its center. I did end having to hardcode some values into the function, but its functionality felt satisfying to achieve.

A different part of the code that I am especially proud of is the random rotation of the blocks towards the bottom half of the artwork. I used the map() function we had discussed in class to adjust for the intensity of the rotation depending on the row the blocks were in. I think it turned out quite organic-looking!

//rotating the rows at the bottom half

if (this.row >= rows - 4) {

//making the level of rotation more intense as the grid goes on using map() function

let intensity = map(this.row, rows - 4, rows - 1, 5, 25); //increasign rotation for lower rows

//converting to radians for the rotate() function

this.fixedRotation = radians(random(-intensity, intensity));

} else {

this.fixedRotation = 0; //no rotation for the top rows

}

//rotating the rows at the bottom half if (this.row >= rows - 4) { //making the level of rotation more intense as the grid goes on using map() function let intensity = map(this.row, rows - 4, rows - 1, 5, 25); //increasign rotation for lower rows //converting to radians for the rotate() function this.fixedRotation = radians(random(-intensity, intensity)); } else { this.fixedRotation = 0; //no rotation for the top rows }

//rotating the rows at the bottom half
    if (this.row >= rows - 4) {
      //making the level of rotation more intense as the grid goes on using map() function
      let intensity = map(this.row, rows - 4, rows - 1, 5, 25); //increasign rotation for lower rows
      //converting to radians for the rotate() function
      this.fixedRotation = radians(random(-intensity, intensity));
    } else {
      this.fixedRotation = 0; //no rotation for the top rows
    }

Overall, I am quite glad with the end result of my piece. Though in the future, I would like play a bit more with the colors. Currently, it is black and white, as I couldn’t quite get a colored gradient without it looking odd. I want to also figure out how to fix the center of rotation without hardcoding it. Regardless, I am still very happy with the interactive feature of the piece.

Leave a Reply Cancel reply