let lerpAmount = 0;

let angle = 0; // For text rotation

let font;

​

// Load the image.

function preload() {

  img = loadImage('/assets/llorar.png');

  fontRegular = loadFont('/assets/Helvetica Verbundene.ttf');

}

​

function setup() {

  createCanvas(448, 590);

  // Set initial background

  background(255, 185, 226);

  textSize(44);

  textAlign(CENTER, CENTER);

  textFont(fontRegular);

}

​

function draw() {

  // Define the starting color and the target gradient color

  let startColor = color(255, 185, 226); // Current background

  let endColor = color('#CCC8E6'); // New gradient target background

  // Create a blended color using lerpColor

  let blendedColor = lerpColor(startColor, endColor, lerpAmount);

  // Set the background with the blended color

  background(blendedColor);

  // Tint and draw the image

  tint(blendedColor); 

  image(img, 0, 0, width, height);

  // Increase the blending amount over time, reset it when it reaches 1

  lerpAmount += 0.01;

  if (lerpAmount > 1) {

    lerpAmount = 0; // Reset for looping effect

  }

​

  // Draw the animated text "dilo sin llorar" circling around the image

  fill(50);

  // Get the center of the canvas

  let centerX = width / 2;

  let centerY = height / 2;

  // Radius for the text path

  let radius = 190;

  // Loop through the phrase and place each character in a circular path

  let phrase = "🥀🥀🥀🥀🥀🥀🥀";

  for (let i = 0; i < phrase.length; i++) {

    let charAngle = angle + (TWO_PI / phrase.length) * i; // Calculate angle for each character

    let x = centerX + cos(charAngle) * radius; // Calculate x position

    let y = centerY + sin(charAngle) * radius; // Calculate y position

    push();

    translate(x, y);

    rotate(charAngle + HALF_PI); // Rotate text so it's always upright

    //stroke('rgb(247,247,157)')

    fill(0)

    text(phrase[i], 0, 0); // Draw each character

    pop();

  }

  // Update angle for animation (controls the speed of the circular motion)

  angle += 0.01;

}

​