​

function preload() {

  font = loadFont("GothamBold.ttf");

}

​

function setup() {

  createCanvas(1080 , 1080, WEBGL);

  // buffer1

  buffer1 = createGraphics(300, 100);

  buffer1.background(20);

  buffer1.fill(255);

  buffer1.noStroke();

  buffer1.textFont(font);

  buffer1.textSize(100);

  buffer1.text("MASH", -4, 86);

​

  // buffer2

  buffer2 = createGraphics(240, 20);

  buffer2.background(20);

  buffer2.fill(255);

  buffer2.noStroke();

  buffer2.textFont(font);

  buffer2.textSize(80);

  buffer2.text("MASH", -2.5, 68);

​

  // buffer3

  buffer3 = createGraphics(240, 20);

  buffer3.background(20);

  buffer3.fill(255);

  buffer3.noStroke();

  buffer3.textFont(font);

  buffer3.textSize(80);

  buffer3.text("MASH", -2.5, 48);

  // buffer4

  buffer4 = createGraphics(240, 20);

  buffer4.background(20);

  buffer4.fill(255);

  buffer4.noStroke();

  buffer4.textFont(font);

  buffer4.textSize(80);

  buffer4.text("MASH", -2.5, 28);

  // buffer5

  buffer5 = createGraphics(240, 20);

  buffer5.background(20);

  buffer5.fill(255);

  buffer5.noStroke();

  buffer5.textFont(font);

  buffer5.textSize(80);

  buffer5.text("MASH", -2.5, 8);

}

​

​

function draw() {

  background(20);

  noStroke();

  // stroke(255,0,0);

  // rotate(-0.2);

  translate(0, tan(frameCount*0.01/2));

​

// top  

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

    push();

    texture(buffer1);

    translate(0, i * 100 - 313);

    box(350, 100, 350);

    pop();

  }

​

  push();

    fill(20);

    translate(0, -60);

    box(350, 4, 350);

pop();  

  // push();

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

  //   push();

  //   texture(buffer2);

  //   translate(0, i * 25 - 50);

  //   // rotateY((i * tan(frameCount * 0.01)) / 10);

  //   box(350, 25, 350);

  //   pop();

  // }

  // pop();

​

push();

    texture(buffer2);

    translate(0, -50);

    rotateY((tan(frameCount * 0.01)) / 10);

    box(350, 25, 350);

pop();

push();

    texture(buffer3);

    translate(0, -25);

    rotateY((tan(frameCount * 0.01)) / 20);

    box(350, 25, 350);

pop();

push();

    texture(buffer4);

    translate(0, 0);

    rotateY((tan(frameCount * 0.01)) / 30);

    box(350, 25, 350);

pop();

push();

    texture(buffer5);

    translate(0, 25);

    rotateY((tan(frameCount * 0.01)) / 40);

    box(350, 25, 350);

pop();

//  bottom

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

    push();

    texture(buffer1);

    translate(0, i * 100 + 87);

    box(350, 100, 350);

    pop();

  }

}

​