//https://editor.p5js.org/LizPina/sketches/9LF5GRL7

​

let circles = [];

​

let img;

function preload() {

  img = loadImage('fond.png');

}

​

function setup() {

  createCanvas(844, 390);//844 × 390

   smooth();

}

​

function draw() {

  background(255);

  image(img, 0, 0);

    //update every circle each time draw loops

  for (var i = 0; i < circles.length; i++) {

    circles[i].ellipse();

​

    if (circles[i].lifespan <= 0) {

      circles.splice(i, 1);

    }

  }

}

​

​

function mousePressed() {

  circles.push(new Circle(mouseX, mouseY));

}

​

function Circle(x, y) {

  this.x = x;

  this.y = y;

  this.size = random(45,150);

​

  this.r = random(135,218);

  this.g = random(107,212);

  this.b = random(103,220);

  this.lifespan = width;

​

  this.ellipse = function() {

    noStroke();

    fill(this.r, this.g, this.b, this.lifespan/2);

    ellipse(this.x, this.y, this.size, this.size);

  }

​

}