Braylon's Strobe

function setup() {
  createCanvas(windowWidth, windowHeight);
  // Tip: Use windowWidth/windowHeight for responsive canvas
}

function draw() {
  // Background flashing effect
  // This will toggle the background between light gray (220) and black (0)
  // every 15 frames (about 0.25 seconds at 60fps), creating a flashing effect.
  if (frameCount % 30 < 15) {
    background(220); // Light gray
  } else {
    background(0); // Black
  }

  // Flashing rectangles
  // We'll draw a few rectangles around the canvas that also change color.
  noStroke(); // No border for the rectangles

  // Rectangle 1 & 2: Flash between white and red every 10 frames
  if (frameCount % 20 < 10) {
    fill(255); // White
  } else {
    fill(255, 0, 0); // Red
  }
  rect(50, 50, 100, 100); // Top-left
  rect(width - 150, height - 150, 100, 100); // Bottom-right

  // Rectangle 3 & 4: Flash between white and blue every 15 frames
  if (frameCount % 30 < 15) {
    fill(255); // White
  } else {
    fill(0, 0, 255); // Blue
  }
  rect(width - 150, 50, 100, 100); // Top-right
  rect(50, height - 150, 100, 100); // Bottom-left

  // Rectangle 5 & 6: Flash between white and green every 20 frames
  if (frameCount % 40 < 20) {
    fill(255); // White
  } else {
    fill(0, 255, 0); // Green
  }
  rect(width / 2 - 50, height / 4, 100, 100); // Mid-top
  rect(width / 2 - 50, height * 3 / 4 - 100, 100, 100); // Mid-bottom


  // Add your name, Braylon!
  // Set text color to toggle with the background for better visibility.
  if (frameCount % 30 < 15) {
    fill(0); // Black text when background is light gray
  } else {
    fill(255); // White text when background is black
  }
  textSize(48); // Set the text size
  textAlign(CENTER, CENTER); // Align text horizontally and vertically in the center
  text("Braylon", width / 2, height / 2); // Display "Braylon" in the middle of the canvas
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  // Called when preview panel is resized
}