let img2;

function preload() {

    img = loadImage("cercle-main.JPG");

    img2 = loadImage("cercle-main2.jpg");

}

​

​

var fps = 30;

var capturer = new CCapture({ format: 'png', framerate: fps });

​

function setup() {

    createCanvas(715, 1008);

    frameRate(fps);

    capturer.start();

​

}

​

​

var startMillis;

​

function draw() {

    if (startMillis == null) {

    startMillis = millis();

  }

​

  // duration in milliseconds

  var duration = 10000;

​

  // compute how far we are through the animation as a value 

  // between 0 and 1.

  var elapsed = millis() - startMillis;

  var t = map(elapsed, 0, duration, 0, 1);

​

  // if we have passed t=1 then end the animation.

  if (t > 1) {

    noLoop();

    console.log('finished recording.');

    capturer.stop();

    capturer.save();

    return;

  }

​

    imageMode(CENTER);

    image(img, random(width), random(height),

        random(25,150), random(25,150));

     image(img2, random(width), random(height),

        random(25,150), random(25,150));

    console.log('capturing frame');

  capturer.capture(document.getElementById('defaultCanvas0'));

}