Assignment 3- Interactive Grid

For this assignment, I wanted to create a geometric and interactive artwork using OOP and functions. I was inspired by this youtube video: https://www.youtube.com/watch?v=4lCD9B4Dlik

My idea was to have a grid of spinning dial controls. Each dial displays a different hue pulled from the colour spectrum and it gives the final piece an ombre effect. As you move your mouse across the grid, the dials swivel to follow along. It creates this really cool hypnotic effect!

I created a Dial class to represent each control. In the setup(), I iterate through a 2D array to place Dial instances in rows and columns. I calculated the number of rows and columns based on the canvas size to fully fill up the space.

Each Dial is coloured according to its position in the grid using HSB colour mode. This lets me pull nice saturated tones from around the colour wheel. I mapped the grid indices to hue, saturation and brightness values. This creates a smooth gradient of colours.

for (let i = 0; i < cols; i++) {
  for (let j = 0; j < rows; j++) {
    // Map the grid position to HSB color values
    let hue = map(i + j, 0, cols + rows, 0, 360);
    let saturation = map(i, 50, cols, 100, 100);
    let brightness = map(j, 50, rows, 100, 100);

    // Set the fill color based on mapped HSB values
    fill(hue, saturation, brightness);

    // Call the rotateDial method of the  Dial instance with the current mouse position
    dials[i][j].rotateDial(mouseX, mouseY);

In draw(), all that’s left is to animate the Dials. This simply involves calling each Dial’s rotateDial() method, passing in the mouse position. Some tweaking was needed to get the rotation speed and smoothness right.

While the core concept is simple – a grid of colourful spinning things – the end result is quite striking and mesmerising. As the mouse moves, these colourful triangles swirl around the grid in different patterns. The black background makes it stand out and I’m pleased with how well it turned out.
I’m considering ways to expand on the idea in the future, maybe adding interactivity to control the colour mapping or rotation speed. I’m open to suggestions for other fun tweaks!