​

// Add more palettes here following the structure:

// { bg: [r,g,b], rect1: [r,g,b], rect2: [r,g,b], textOnRect1: [r,g,b], textOnRect2: [r,g,b] }

const palettes = [

  { bg: [0, 102, 71], rect1: [255, 105, 180], rect2: [0, 0, 0], textOnRect1: [0, 0, 0], textOnRect2: [255, 255, 255] }, // Original-ish Green/Pink/Black

  { bg: [60, 90, 180], rect1: [255, 210, 80], rect2: [40, 40, 40], textOnRect1: [0, 0, 0], textOnRect2: [255, 255, 255] }, // Blue/Yellow/Dark Gray

  { bg: [200, 80, 80], rect1: [100, 200, 200], rect2: [50, 50, 90], textOnRect1: [0, 0, 0], textOnRect2: [255, 255, 255] }, // Red/Cyan/Dark Blue

  { bg: [40, 40, 40], rect1: [255, 255, 255], rect2: [255, 100, 100], textOnRect1: [0, 0, 0], textOnRect2: [0, 0, 0] },    // Dark Gray/White/Red

  { bg: [240, 240, 230], rect1: [0, 0, 0], rect2: [0, 150, 150], textOnRect1: [255, 255, 255], textOnRect2: [255, 255, 255] }, // Light Gray/Black/Teal

];

​

const line1 = "2ND ROUND";

const line2 = "FESTIVAL PASS";

const line3 = "GET YOURS NOW!";

​

let currentPalette;

​

// --- p5.js Sketch ---

​

function setup() {

  createCanvas(600, 400); // Adjust canvas size if needed

  textFont('Arial Black'); // A common bold, blocky sans-serif. Change if you have a specific font.

  textAlign(CENTER, CENTER);

  noStroke();

  generateDesign(); // Generate the first version on load

​

  // Add an instruction text element outside the main design generation

  let instruction = createP('Click on the canvas to generate a new version.');

  instruction.style('font-family', 'sans-serif');

  instruction.style('color', '#555');

  instruction.style('text-align', 'center');

  instruction.parent(document.body); // Add it below the canvas

}

​

// We only need to draw when generating a new design

function draw() {

  noLoop(); // Prevent draw() from looping continuously

}

​

// Generate a new design when the mouse is pressed within the canvas

function mousePressed() {

   if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {

      generateDesign();

      loop(); // Tell p5 to redraw the canvas once with the new design

      noLoop(); // Stop looping again immediately after redraw

   }

}

​

// --- Core Design Generation Logic ---

function generateDesign() {

  // 1. Select a random palette

  currentPalette = random(palettes);

​

  // 2. Get colors from the selected palette

  let bgColor = color(currentPalette.bg);

  let rect1Color = color(currentPalette.rect1);

  let rect2Color = color(currentPalette.rect2);

  let textColor1 = color(currentPalette.textOnRect1); // Text color for the first rectangle

  let textColor2 = color(currentPalette.textOnRect2); // Text color for the second rectangle

​

  // 3. Draw Background

  background(bgColor);

​

  // 4. Settings & Dynamic Variations

  let baseTextSize = width / 16 + random(0); // Base size with slight variation

  let lineSpacing = baseTextSize * 1.15;       // Relative spacing between lines

  let textStyleSetting = BOLD;                // Ensure text is bold

​

  // Center calculations with slight vertical jitter

  let centerX = width / 2;

  let midY = height / 2 + random(0);

​

  // Calculate text positions relative to the center

  // Adjusted Y positions for better alignment based on visual center

  let posY1 = midY - lineSpacing * 0.6;

  let posY2 = midY + lineSpacing * 0.2; // Slightly lower than the middle of the two

  let posY3 = midY + lineSpacing * 1.2;

​

  // Apply text styling

  textStyle(textStyleSetting);

​

  // 5. Calculate Rectangle Dimensions (based on text width + padding)

  textSize(baseTextSize); // Set text size *before* measuring text width

​

  // Rectangle 1 (Behind Line 1 & 2)

  let textWidth1 = textWidth(line1);

  let textWidth2 = textWidth(line2);

  // Width based on the wider text line plus random padding

  let rect1Width = max(textWidth1, textWidth2) * random(1.08, 1.25);

  // Height dynamically covers the space between the text lines plus padding

  let rect1Height = (posY2 - posY1) + baseTextSize * 1.1 + random(-4, 4);

  let rect1Y = posY1 - baseTextSize * 0.7; // Positioned slightly above the first text line

​

  // Rectangle 2 (Behind Line 3)

  let textWidth3 = textWidth(line3);

  // Width based on the third line plus random padding

  let rect2Width = textWidth3 * random(1.08, 1.25);

   // Height based on text size plus padding

  let rect2Height = baseTextSize * 1.15 + random(-3, 3);

  let rect2Y = posY3 - baseTextSize * 0.65; // Positioned slightly above the third text line

​

​

  // 6. Draw Rectangles

  fill(rect1Color);

  rect(centerX - rect1Width / 2, rect1Y, rect1Width, rect1Height);

​

  fill(rect2Color);

  rect(centerX - rect2Width / 2, rect2Y, rect2Width, rect2Height);

​

  // 7. Draw Text (On Top)

  textSize(baseTextSize); // Ensure text size is correct

​

  // Text Lines 1 & 2 (using textColor1)

  fill(textColor1);

  text(line1, centerX, posY1);

  text(line2, centerX, posY2);

​

  // Text Line 3 (using textColor2)

  fill(textColor2);

  text(line3, centerX, posY3);

}