Concept:

While trying to find an idea and looking back at my dance floor from last week I knew it was missing the life that I wanted to give it in order to be as 80s as possible so i choose to add some movement to it using rotating tiles to give it life but also to stimulate the sensation of dancing till we are tired since I imagined this was a common thing in the crazy 80s additionally.

Move the mouse across to see it come to life!

Highlight of the code

// Display the tile at its position, with a specific effect based on its position relative to the circle
display(insideCircle) {
  push();
  translate(this.x + 10, this.y + 10);
  rotate(this.angle);
  if (insideCircle) {
    fill(this.col);
  } else {
    fill(150, 150, 220, 150);
  }
  rect(-10, -10, 20, 20);
  pop();
}

// Rotate the tiles outside the circle
rotate() {
  this.angle += 0.02;

My favorite part of the project was seeing my idea quite literally come to life as the tiles started rotating, it was beautiful and magical in my opinion because i had never use the translate function and as a first time I think it cam out pretty good and exactly how i wanted it to be when i first re-started this piece. Through the rotating tiles I wanted to give the dance floor life but also wanted to through a subtle reference to the funky shapes and neon colors that were trendy at the time hence the choice of color and tile shape and choice to use rotation because I knew that once they are together they will make those funky shapes I was trying to get. Once again I used OpenProcessing (refer to last post to see the details about how to use this goldmine) but also the youtube video “Rotating Tiles and Animation in Tiles” by steve’s makerspace to be able to understand how to do it.

In details, display(insideCircle) draws a tile on the canvas, with its appearance varying based on its position relative to a circle. With the use of push and pop, all of the transformations and styles are localized. It shifts the drawing’s origin to the tile’s center with translate, and then rotates it and sets the tile’s color to be specific randomized color to the tile using an if else, if it’s inside the circle then it will be color, else it will be semi-transparent blue. The tile is drawn centered on the new origin with and the rotate function gradually increases the tile’s rotation angle, creating a spinning effect for tiles outside the circle.

Future changes:

In the future, I would love to be able to add a song and synch the tiles movement to it to make it more rave like and more alive but overall i’m really really happy that i continued to work on it and now has more life than I thought I could give it.