let xMove, yMove;

let scaler = 1;

let targetX, targetY;

let currentX, currentY;

let easing = 0.05;

​

// Text variables

let words = ["I", "love", "making", "things"];

let currentWordIndex = 0;

let displayedWords = [];

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  background(0);

  rectMode(CORNER);

  noiseSeed(Date.now());

  // Create noise loops for radius variation

  xNoise = new NoiseLoop(2, 50, 400);

  yNoise = new NoiseLoop(3, 50, 400);

  // Initialize random movement positions

  xMove = random(1000);

  yMove = random(1000);

  // Initialize position

  targetX = width/2;

  targetY = height/2;

  currentX = width/2;

  currentY = height/2;

  // Text settings

  textAlign(CENTER);

  textSize(24);

}

​

function mousePressed() {

  if (currentWordIndex < words.length) {

    // Add new word with position slightly above current shape

    displayedWords.push({

      text: words[currentWordIndex],

      x: currentX,

      y: currentY - 100,  // Position above shape

      opacity: 255        // Start fully visible

    });

    currentWordIndex = (currentWordIndex + 1) % words.length;

  }

}

​

function draw() {

  // Create semi-transparent overlay for fade effect

  fill(0, 1);

  noStroke();

  rect(0, 0, width, height);

  if (scaler > 0) {

    // Update target to mouse position with easing

    targetX = mouseX;

    targetY = mouseY;

    let dx = targetX - currentX;

    let dy = targetY - currentY;

    currentX += dx * easing;

    currentY += dy * easing;

    // Draw shape

    fill(0, 100);

    stroke(255);

    push();

    // Add organic movement

    xMove += 0.001;

    yMove += 0.001;

    let xmover = map(noise(xMove), 0, 1, -width/3, width/3);

    let ymover = map(noise(yMove), 0, 1, -height/3, height/3);

    translate(currentX + xmover, currentY + ymover);

    scale(scaler);

    // Draw the shape using two independent noise loops

    beginShape();

    for (let angle = 0; angle <= TWO_PI; angle += TWO_PI/100) {

      // Get radius from noise

      let xRadius = xNoise.value(angle);

      let yRadius = yNoise.value(angle);

      let x = cos(angle) * xRadius;

      let y = sin(angle) * yRadius;

      curveVertex(x, y);

    }

    endShape(CLOSE);

    pop();

    // Draw all words

    for (let i = displayedWords.length - 1; i >= 0; i--) {

      let word = displayedWords[i];

      // Draw word

      noStroke();

      fill(255, word.opacity);

      text(word.text, word.x, word.y);

      // Fade out effect

      word.opacity -= 0.5;

      // Remove completely faded words

      if (word.opacity <= 0) {

        displayedWords.splice(i, 1);

      }

    }

    scaler -= 0.0004;

  }

}

​

class NoiseLoop {

  constructor(diameter, min, max) {

    this.diameter = diameter;

    this.min = min;

    this.max = max;

    this.xOffset = random(1000);

    this.yOffset = random(1000);

    this.zOffset = random(1000);

  }

  value(angle) {

    let xOff = map(cos(angle), -1, 1, 0, this.diameter) + this.xOffset;

    let yOff = map(sin(angle), -1, 1, 0, this.diameter) + this.yOffset;

    // Use 3D noise for more organic movement

    let n = noise(xOff * 0.5, yOff * 0.5, frameCount * 0.005 + this.zOffset);

    return map(n, 0, 1, this.min, this.max);

  }

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

  background(0);

}