let Xdensity;

let frequency;

let amplitude;

let size;

let Yspeed;

let Ypos;

let abstand;

let speed;

let letterPositions;

​

function setup() {

  createCanvas(600,600);

  input = createInput("THE BROWN FOX JUMPS");

  Xdensity = 6;

  frequency = 0.2;

  amplitude = 100;

  size = 50;

  Yspeed = 0.05;

  abstand = 100;

  letterPositions = []; 

}

​

function draw() {

  background(250);

​

  const val = input.value();

  let xOffset = 0;

​

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

    const charWidth = textWidth(val[i]);

​

    const xPosition = i * Xdensity + xOffset;

    let letterPos = letterPositions[i];

    if (!letterPos) { 

      letterPos = createVector(xPosition, 0);

      letterPositions[i] = letterPos;

    }

​

    letterPos.y += Yspeed * sin(i * frequency) * amplitude;

​

    textSize(size);

    fill(0);

    text(val[i], letterPos.x, letterPos.y);

​

    xOffset += charWidth;

​

    if (letterPos.y >= height) {

      letterPos.y = 0;

    }

  }

}

​