Assignment 2 – Khalifa Alshamsi

For this assignment, I am not sure I drew my inspiration from the right place; I ended up being inspired by the Club Penguin dance floor. For some reason, while playing around with different-sized squares in p5js, that was all I remembered when I aligned them.

For reference:

The sketch:

While it isn’t the same proportions as the Club Penguin dance floor, It was because I wanted it to be more visually appealing with the size. After all, this is supposed to be an art piece…

let numTiles = 10; // Number of tiles across and down
let tileWidth;
let tileHeight;
let colors = [];

function setup() {
  createCanvas(600, 600);
  tileWidth = width / numTiles;
  tileHeight = height / numTiles;

  // Initialize colors array with bright colors
  for (let y = 0; y < numTiles; y++) {
    colors[y] = []; // Create a nested array for each row
    for (let x = 0; x < numTiles; x++) {
      colors[y][x] = color(random(255), random(255), random(255), 255);
    }
  }

  frameRate(10);
}

function draw() {
  for (let y = 0; y < numTiles; y++) {
    for (let x = 0; x < numTiles; x++) {
      // Randomly change the color of each tile to mimic the dance floor lighting effect
      if (random() < 0.1) { // 10% chance to change color each frame
        colors[y][x] = color(random(255), random(255), random(255), 255);
      }
      
      fill(colors[y][x]);
      rect(x * tileWidth, y * tileHeight, tileWidth, tileHeight);
    }
  }
}

I would say the effect function confused me so often when it came to understanding it because I didn’t want the colors to change so frequently. Still, also the issue that came up was the sketches I had taken down in class did not fully explain how things worked when it came to the randomness part and how quickly it would change, so hopefully, in the upcoming classes, I will get better at note taking so that when it comes to coding, I get to understand it better when I go back and take a look at it.