let f = 0;

let nbFrames = 180;

let record = 0;

​

P5Capture.setDefaultOptions({

  format: "gif",

  framerate: 60,

  width: 400,

  disableUi: 1 - record,

});

​

​

function setup() {

  createCanvas(400, 400, WEBGL);

  background(20);

}

​

function draw() {

  f++;

  background(0);

  t = (f / nbFrames) % 1;

  let nbCols = palette.length;

​

  for (let i = 0; i < nbCols; i++) {

    let lightPosx = cos((TAU / nbCols) * i - t * TAU);

    let lightPosy = sin((TAU / nbCols) * i - t * TAU);

    //rotation autour de l'axe Z

    directionalLight(color(palette[i]), lightPosx, 0, lightPosy);

  }

  shininess(1);

  ambientLight(150);

  ambientMaterial(100);

  specularColor(150);

  specularMaterial(150);

  nb = 7;

  cpt = 0;

  for (let i = 0; i < TAU; i += TAU / nb) {

    fill(0);

    x = sin(i ) * 100;

    y = cos(i ) * 100;

    z = 0;

​

    push();

    translate(x, y, 0);

    noStroke();

    rotateX(atan2(x, y, z) + t * TAU);

    rotateY(t*TAU)

    rotateX(i)

    rotateY(i)

    box(50);

​

    pop();

    cpt++;

  }

    if (frameCount == nbFrames && record == 1) {

    const capture = P5Capture.getInstance();

    capture.start({

      duration: nbFrames,

    });

  }

​

}

​