let x = 400;

let y = 400;

let z = 20;

let ang = 2.8;

let a = 2;

​

// const col = ["#7bdff2", "#b2f7ef", "#eff7f6", "#f7d6e0", "#f2b5d4"];

​

const col = [

  "#fbf8cc",

  "#fde4cf",

  "#ffcfd2",

  "#f1c0e8",

  "#cfbaf0",

  "#a3c4f3",

  "#90dbf4",

  "#8eecf5",

  "#98f5e1",

  "#b9fbc0",

];

​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL);

  stroke(255, 100);

}

​

function draw() {

  background('rgb(10,98,100)');

​

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

    // adding Alpha, in this case 42

    fill(`${col[i]}99`);

    strokeWeight(2)

    stroke(col[i]);

    if (col[i] === "#fbf8cc") {

      rotate(ang, [-1, -1, -1]);

      translate(0,0,130)

    } else {

      translate(0, 0, -40);

    }

    push();

    rotate(a, [0, 0, -1]);

    // left-rigth, up-down, front-back

    if (i === 0) {

      translate(0, 0, -10);

    } else {

      translate(0, 0, z / 2 + i);

    }

    box(x - i * 80 + sin(a)*width/2, y - i * 80 + sin(a)*width/2, z);

    a += 0.0005;

    pop();

  }

}

​