let col;

let input, button;

​

​

function setup() {

  createCanvas(600, 600);

  background (0);

  textFont('Verdana')

  input = createInput();

  input.position(20,20);

}

​

function draw() {

  background(20, 20);

  translate(width/2, height/2);

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

    let ang = i/4.6 + frameCount/110;

    let r = i + noise(i) * 2 * map(mouseX, width/2, 0, 0, 300);

   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(map(mouseY, 0, height, 10, 30));

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

  }

}

​

​

function mousePressed() {

  colored = !colored;

}