var images = [];
function preload() {
  for (let i = 1; i < 5; i++) {
    images.push(new Forma(loadImage(`forme/${i}.png`)));
  }
}
function setup() {
  const myCanvas = createCanvas(window.innerWidth, window.innerHeight);
  myCanvas.parent("canvas");
}

function draw() {
  blendMode(BLEND);
  background(255);
  blendMode(MULTIPLY);
  images.forEach((d) => d.draw());
}

class Forma {
  constructor(img) {
    this.img = img;
    this.x = random(0, window.innerWidth);
    this.y = random(0, window.innerHeight);
    this.dx = random(-1, 1) * 0.5;
    this.dy = random(-1, 1) * 0.5;
  }

  draw() {
    this.x += this.dx;
    this.y += this.dy;
    if (this.x > window.innerWidth + 400) {
      this.dx = -this.dx;
    }
    if (this.x < -400) {
      this.dx = -this.dx;
    }

    if (this.y > window.innerHeight + 400) {
      this.dy = -this.dy;
    }
    if (this.y < -400) {
      this.dy = -this.dy;
    }

    image(this.img, this.x, this.y);
  }
}