html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;  
}

body {
  display: flex;
  justify-content: center;
  align-items: center;

}

let p5Canvas, ctx;
let leons = [];
const word = 'yfisuahuab';

function setup() {
  p5Canvas = createCanvas(300, 300);
  ctx = p5Canvas.canvas.getContext("2d");
  
  let totalWidth = 0;
  for ( let i = 0; i < word.length; i++ ) {
    leon = new LeonSans({
      text: word.substr(i, 1),
      color: ['#FFFFFF'],
      size: 150,
      weight: 500,
    });    
    if (i > 0) {
      leon.position(
        leons[i - 1].rect.x + leons[i - 1].rect.w,
        (height - leon.rect.h) / 2,
      );
    } else {
      leon.position(
        0,
        (height - leon.rect.h) / 2,
      );
    }
    leons.push(leon);
    totalWidth += leon.rect.w;
  }
  
  leons.forEach(leon => {
    leon.position(leon.rect.x - totalWidth, leon.rect.y);
  })
}

function draw() {
  clear();   
  background('#FF0000');
  
  leons.forEach((leon) => {
    let toX = leon.rect.x + 1.5;
    let toY = leon.rect.y;
    let toWeight = leon.weight;
    let toColor = leon.color;
    if (toX > width) {
      toY = random(0, height - leon.rect.h/2);
      toX = -leon.rect.w;
      toColor = color(random(255)).toString(['#rrggbb'])
    }
    leon.color = [ toColor ];
    leon.position(toX, toY);
    leon.weight = noise(frameCount/80 + leon.rect.y) * 900;
    leon.draw(ctx);
  })
}