let pressed = false;

let col;

let input, button;

let storedText = [];

​

​

​

function setup() {

  createCanvas(600, 600);

  background (0);

  textFont('Verdana')

  input = createInput();

  input.position(20,20);

​

}

​

function draw() {

  background(20);

  translate(width/2, height/2);

  storedText = input.value().split(" ");

  if (!pressed) {

    textSizeVar = map(mouseY, 0, height, 10, 30);

    mappedMouseX = map(mouseX, width/2, 0, 0, 300)

  }

  for (i = 0; i < 400; i++) {

    let ang = i/4.6 + frameCount/110;

    let r = i + noise(i) * 2 * mappedMouseX;

    if (colored) {

      // Calculate a percentage for the color gradient

      let percent = map(i, 0, 400, 0, 1);

      // Interpolate between two colors using lerpColor

      if (percent < 0.5) {

        col = lerpColor(color('#FDF48A'), color('#FF5631'), map(percent, 0, 0.5, 0, 1));

      } else {

        col = lerpColor(color('#FF5631'), color('#634FFF'), map(percent, 0.5, 1, 0, 1));

      }

    } else {

      col = 255;

    }

    fill(col);

    textSize(textSizeVar);

      //text(input.value().charAt(i % input.value().length), cos(ang) * r, sin(ang) * r);

      let word = storedText[i];

      if (word) {

        for (let j = 0; j < word.length; j++) {

          let charIndex = j % word.length;

          text(word.charAt(charIndex), cos(ang) * r, sin(ang) * r);

          ang += 0.1; // Increment angle for each character to avoid overlapping

        }

      }

    }

}

​

​

function keyPressed() {

  if (keyCode === UP_ARROW){

    colored = !colored;

    pressed = !pressed;

  }

}