let time;

​

function setup() {

  // Create a 600x600 canvas in WebGL mode

  createCanvas(600, 600, WEBGL);

  // Set the angle mode to degrees

  angleMode(DEGREES);

  // Initialize the time variable to 0

  time = 0;

}

​

function draw() {

  // Set the background color to dark gray

  background(30);

  // Rotate the entire scene around the X-axis by 60 degrees for perspective

  rotateX(60);

  // Set drawing properties for hexagons

  noFill();

  stroke(255);

​

  // Loop to create and animate 50 hexagons

  for (let i = 0; i < 50; i++) {

    // Calculate RGB color values based on time and i

    let r = map(sin(time), -1, 1, 100, 200);

    let g = map(i, 0, 50, 100, 200);

    let b = map(cos(time), -1, 1, 200, 100);

    // Set the stroke color using calculated RGB values

    stroke(r, g, b);

    // Rotate the hexagon in XY-plane based on time

    rotate(time / 30);

​

    // Begin defining the shape of the hexagon

    beginShape();

    // Loop to create the vertices of the hexagon

    for (let degree = 0; degree < 360; degree += 60) {

      // Calculate the position of each vertex

      let radius = i * 5;

      let x = radius * cos(degree);

      let y = radius * sin(degree);

      let z = sin(time * 2 + i * 9) * 50;

      // Define a vertex at the calculated position

      vertex(x, y, z);

    }

    // End the definition of the hexagon shape and close it

    endShape(CLOSE);

  }

  // Increment time to create continuous animation

  time += 1;

}

​