// Global variables to store the canvas and arrays of shapes and colors

let canvas;

let shapes = [];

let colors = [];

let numColors = 7; // Number of colors to generate

​

function setup() {

  createCanvas(600, 600);

  canvas = createGraphics(800, 600); // Create off-screen graphics buffer

  canvas.background(255); // Set background color of off-screen canvas

​

  // Draw background and shapes, generate colors, and apply colors to the off-screen canvas

  drawBackground();

  drawShapes();

  generateColors();

  tintColors();

}

​

// Function to draw the background of the off-screen canvas

function drawBackground() {

  canvas.noStroke(); 

  canvas.fill(255); 

  canvas.rect(0, 0, 600, 600); // Draw white rectangle covering the canvas

}

​

// Function to randomly generate and draw shapes onto the off-screen canvas

function drawShapes() {

  let numShapes = 50; // Number of shapes to draw

  let maxSize = 400; // Maximum size of shapes

​

  // Loop to create and draw random shapes

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

    let x = random(canvas.width); 

    let y = random(canvas.height); 

    let size = random(50, maxSize); // Random size for the shape

​

    // Generate random fill and stroke colors for the shape

    let fillColor = color(random(255), random(255), random(255));

    let strokeColor = color(random(255), random(255), random(255));

​

    // Creates an object to represent the shape and adds it to the shapes array

    let shape = {

      x: x,

      y: y,

      size: size,

      fillColor: fillColor,

      strokeColor: strokeColor,

      shapeType: int(random(3)) // Randomly choose shape type (0: ellipse, 1: rectangle, 2: polygon)

    };

​

    shapes.push(shape); // Add the shape object to the shapes array

  }

​

  // Loop through shapes array and draw each shape onto the off-screen canvas

  for (let shape of shapes) {

    canvas.fill(shape.fillColor); 

    canvas.stroke(shape.strokeColor);

    canvas.strokeWeight(2); 

​

    // Draw different types of shapes based on their shapeType property

    if (shape.shapeType === 0) {

      canvas.ellipse(shape.x, shape.y, shape.size, shape.size); // Draw ellipse

    } else if (shape.shapeType === 1) {

      canvas.rect(shape.x - shape.size / 2, shape.y - shape.size / 2, shape.size, shape.size); // Draws rectangle

    } else {

      // Draws polygon with random number of vertices

      let numVertices = int(random(3, 8)); // Random number of vertices between 3 and 7

      let angle = TWO_PI / numVertices; // Angle between vertices

      let halfSize = shape.size / 2; // Half the size of the shape

      canvas.beginShape(); // Begin drawing a custom shape

      for (let a = 0; a < TWO_PI; a += angle) {

        let sx = shape.x + cos(a) * halfSize; // Calculate x-coordinate of vertex

        let sy = shape.y + sin(a) * halfSize; // Calculate y-coordinate of vertex

        canvas.vertex(sx, sy); // Add vertex to the shape

      }

      canvas.endShape(CLOSE); // End drawing the custom shape

    }

  }

}

​

// Function to generate random colors and store them in the colors array

function generateColors() {

  colors = []; // Clear the colors array

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

    colors.push(color(random(255), random(255), random(255))); // Generate random color and add it to the colors array

  }

}

​

// Function to apply tinted colors to the off-screen canvas

function tintColors() {

  let colorIndex = 0; // Initialize color index

  // Loop through the canvas in a grid pattern

  for (let y = 0; y < canvas.height; y += 50) {

    for (let x = 0; x < canvas.width; x += 50) {

      let c = colors[colorIndex % colors.length]; // Get the color from the colors array

      canvas.tint(c); // Apply tint with the color

      canvas.image(canvas, x, y); // Draw the off-screen canvas onto itself with the applied tint

      colorIndex++; // Increment color index

    }

  }

}

​

// Function called when mouse is clicked

function mouseClicked() {

  generateColors(); // Regenerate colors

  canvas.clear(); // Clear off-screen canvas

  drawShapes(); // Redraw shapes on off-screen canvas

  tintColors(); // Apply tinted colors

}

​

// Function called when mouse is moved

function mouseMoved() {

  generateColors(); // Regenerate colors

  canvas.clear(); // Clear off-screen canvas

  drawShapes(); // Redraw shapes on off-screen canvas

  tintColors(); // Apply tinted colors

}

​

// Main draw function to display the off-screen canvas onto the main canvas

function draw() {

  image(canvas, 0, 0); // Display off-screen canvas on the main canvas

}