let floatingLetters = [];

​

function setup() {

  createCanvas(400, 400);

  background(240);

  textAlign(CENTER, CENTER);

}

​

function keyPressed() {

  let validKeys = ['a', 's', 'd', 'f', 'A', 'S', 'D', 'F'];

  if (validKeys.includes(key)) {

    socket.emit("message", key.toUpperCase());

    console.log("Message sent: " + key.toUpperCase());

​

    // Create a floating letter object

    floatingLetters.push(new FloatingLetter(key.toUpperCase()));

  }

}

​

// Receive messages and add them as floating letters

socket.on("message", function (data) {

  console.log("We got message: " + data);

  floatingLetters.push(new FloatingLetter(data));

});

​

function draw() {

  background(240, 100); // Soft fade effect

  for (let i = floatingLetters.length - 1; i >= 0; i--) {

    floatingLetters[i].move();

    floatingLetters[i].display();

    // Remove letters that go off-screen

    if (floatingLetters[i].y < -20) {

      floatingLetters.splice(i, 1);

    }

  }

}

​

// Floating letter class

class FloatingLetter {

  constructor(letter) {

    this.letter = letter;

    this.x = random(width);

    this.y = height;

    this.speed = random(1, 3);

    this.size = random(20, 40);

    this.color = color(random(100, 255), random(100, 255), random(255));

  }

​

  move() {

    this.y -= this.speed; // Move upwards

    this.x += random(-1, 1); // Slight drift

  }

​

  display() {

    fill(this.color);

    textSize(this.size);

    text(this.letter, this.x, this.y);

  }

}

​