// https://discourse.processing.org/t/flying-text-animation-jitter/10296

​

let items = [];

let msec  = 500; //every 500ms. 

let count = 0;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  setInterval(add_item,msec);  // Add an item every 500ms. 

}

​

function draw() {

  background(220);

  for (let i = 0; i < items.length; i++) {     // Draw all items

    let item = items[i];

    if(item.size > 200) continue;

    let textWidth = item.graphic.width * item.size / 100;

    let textHeight = item.graphic.height * item.size / 100;

    // Render graphic. Subtract the width and height from left and top to keep everything centered    

    image(item.graphic, item.left - textWidth / 2, item.top - textHeight / 2, textWidth, textHeight);

    item.size += 0.2;

  }

  // Remove all invisible items to increse performance

  items = items.filter(function(item) { 

    return item.opacity > 0;

  })

}

​

function add_item() {

    let text = "Item " + count++;

    let g = createGraphics(200, 50);

    g.background(255, 0, 0, 200);

    g.textAlign(CENTER, CENTER);

    g.textSize(50);

    g.text(text, 0, 0, 200, 50);

    items.push({

      text: text,

      size: 10,

      opacity: 255,

      graphic: g,

      left: random(windowWidth),

      top: random(windowHeight)

    });

}