const cards = [];

const SUITS = ['♠', '♥', '♣', '♦'];

const VALUES = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];

​

function setup() {

  createCanvas(400, 400);

  cardSize = createVector(50, 70);

​

  // Generate four stacks of cards

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

    for (let j = 0; j < VALUES.length; j++) {

      let x = i * (cardSize.x + 20);

      let y = 5 * j;

      cards.push(new Card(SUITS[i], VALUES[j], x, y));

    }

  }

}

​

function draw() {

  // background(220);

​

  for (const c of cards) {

    c.checkEdges();

    c.update();

    c.draw();

  }

}

​

class Card {

  constructor(suit, val, x, y) {

    this.suit = suit;

    this.color = suit === '♥' || suit === '♦' ? color('red') : color('black');

    this.val = val;

    this.pos = createVector(x, y);

    this.v = createVector(random(-2, 2), random(-2, 2)); // Random initial velocity

  }

​

  update() {

    this.pos.add(this.v);

  }

​

  checkEdges() {

    // Bounce off the bottom and top

    if (this.pos.y + cardSize.y > height || this.pos.y < 0) {

      this.v.y *= -1;

    }

    // Bounce off the sides

    if (this.pos.x + cardSize.x > width || this.pos.x < 0) {

      this.v.x *= -1;

    }

  }

​

  draw() {

    push();

    rect(this.pos.x, this.pos.y, cardSize.x, cardSize.y);

    fill(this.color);

    textSize(12);

    text(this.suit, this.pos.x + 5, this.pos.y + 20);

    text(this.val, this.pos.x + 5, this.pos.y + 35);

    pop();

  }

}

​