let sooMinSize = 5; // starting fontsize

let fontSizeMin = 5; // min font size

let fontSizeMax = 72; // max font size

let sinSpeed = 0.1;

​

function preload() {

  font = loadFont("GT Maru Mega Mini.otf");

}

​

function setup() {

  // Calculate the initial canvas size based on the window size

  const canvasWidth = windowWidth;

  const canvasHeight = windowHeight;

​

  // Create the canvas with the calculated dimensions

  createCanvas(canvasWidth, canvasHeight);

​

  // Call windowResized to set up the initial size and responsiveness

  windowResized();

  textFont(font, sooMinSize); // Set the font and size

  colorMode(HSB, 360, 100, 100);

  textAlign(CENTER, CENTER);

}

​

function draw() {

  background(mouseY * 0.5, mouseX * 0.5, 255, 0.5); // This colors bg

  let textFill = map(mouseY, 0, height, 0, 255); // This maps textfill

  fill(textFill, mouseX, 153); // This colors text

  text("MAKE IT POP!", mouseX, mouseY);

  let sin1 = sin(frameCount * sinSpeed);

  sooMinSize = map(sin1, -1, 1, fontSizeMin, fontSizeMax);

  textSize(sooMinSize);

  noCursor();

}

​

function mousePressed() {

  let fs = fullscreen();

  fullscreen(!fs);

}

​

​

function windowResized() {

// Update the canvas size when the window is resized

  const canvasWidth = windowWidth;

  const canvasHeight = windowHeight;

  resizeCanvas(canvasWidth, canvasHeight);

​

  // Your other code to reposition or resize elements based on the new canvas size

}

​