p-1

// Declare variables

let rows = 5;

let cols = 4;

let gridSize;

let squareColors = [

  [0, 191, 255],

  [0, 238, 238],

  [255, 69, 0],

  [255, 48, 48],

  [255, 165, 0]

];

let userSelectedCircleColors = [

  [132, 112, 255],

  [0, 255, 0],

  [255, 228, 19],

  [255, 20, 147],

  [0, 250, 154]

];

let textFillColor; // Variable to store text fill color

let useStroke = false; // Variable to control whether to use stroke for text

​

let titanFont; //font used

​

// Preload function to load the Titan font before setup

function preload() {

  titanFont = loadFont('TitanOne-Regular.ttf'); 

}

​

// Setup function to initialize the canvas and draw the initial colored grid

function setup() {

  createCanvas(600, 700);

  gridSize = width / cols;

  textFillColor = color(random(255), random(255), random(255)); // Initialize textFillColor with a random color

  background(255);

  drawColoredGrid(rows, cols, gridSize, squareColors, userSelectedCircleColors);

}

​

// Function to draw the colored grid

function drawColoredGrid(rows, cols, gridSize, squareColors, circleColors) {

  noStroke();

​

  // Nested loops to iterate over rows and columns

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

    for (let j = 0; j < cols; j++) {

      let squareX = j * gridSize;

      let squareY = i * gridSize;

​

      // Generate random colors for squares and circles

      let randomSquareColor = random(squareColors);

      let availableCircleColors = circleColors.filter(color => !squareColors[i].every((c, index) => c === color[index]));

      let randomCircleColor = random(availableCircleColors);

​

      // Draw colored squares

      fill(randomSquareColor);

      rect(squareX, squareY, gridSize, gridSize);

​

      // Draw colored circles

      fill(randomCircleColor);

      let circleSize = min(gridSize, gridSize);

      let circleX = squareX + gridSize / 2;

      let circleY = squareY + gridSize / 2;

      ellipse(circleX, circleY, circleSize, circleSize);

    }

  }

​

  // Set the Titan font and draw text with optional stroke

  textFont(titanFont);

  fill(textFillColor);

  if (useStroke) {

    stroke(0);

    strokeWeight(2);

  } else {

    noStroke();

  }

​

  // Draw various text elements

  textSize(50);

  textAlign(CENTER, TOP);

  text('SUMMER ', width / 1.6, height / 3);

​

  textSize(40);

  text('FESTIVAL', width / 1.3, height / 2.3);

​

  textSize(20);

  text('16 JULY ', width / 7.1, height / 23);

  text('2023', width / 7.1, height / 14);

​

  textSize(20);

  text('5 AM', width / 7.1, height / 10.5);

​

  textSize(25);

  text('BARCELONA', width / 6.3, height / 8);

​

  textSize(23);

  textAlign(LEFT, BOTTOM);

  text(' BEST MUSIC FESTIVAL İN THE TOWN ', width / 18.9, height - height / 15);

​

  textSize(20);

  text('POP-ROCK-RAP', width / 19, height - height / 9);

}

​

​

function keyPressed() {

  if (key === 'm') {

    // Press 'm' to redraw the colored grid

    background(255);

    fill(0);

    textSize(50);

    textAlign(CENTER, TOP);

    drawColoredGrid(rows, cols, gridSize, squareColors, userSelectedCircleColors);

  } else if (key === 's') {

    // Press 's' to save the canvas as an image

    saveCanvas('coloredGrid', 'jpg');

  } else if (key === 'a') {

    // Press 'a' to toggle stroke and change text color

    textFillColor = color(random(255), random(255), random(255));

    useStroke = !useStroke; // Toggle the useStroke variable

    background(255);

    fill(textFillColor);

    drawColoredGrid(rows, cols, gridSize, squareColors, userSelectedCircleColors);

  }

}

​