​

let buffer1;

let buffer2;

let font;

​

function preload (){

  font = loadFont("DelaGothicOne-Regular.ttf");

}

​

function setup() {

  createCanvas(1920, 1080, WEBGL);

// buffer 1  

  buffer1 = createGraphics(1000,100);

  buffer1.background(0,0,0,0);

  buffer1.fill(90,0,255);

  buffer1.noStroke();

  buffer1.textFont(font);

  buffer1.textSize(60)

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

    buffer1.text("WAVE", 4 + (i*250), 70)

}

  buffer1.fill(0);

  buffer1.rect(0,0,2,buffer1.height);

  buffer1.rect(buffer1.width-2,0,2,buffer1.height);

​

// buffer 2  

  buffer2 = createGraphics(1000,100);

  buffer2.background(0,0,0,0);

  buffer2.fill(255,0,24);

  buffer2.noStroke();

  buffer2.textFont(font);

  buffer2.textSize(60)

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

    buffer2.text("WAVE", 4 + (i*250), 70)

}

  buffer2.fill(0);

  buffer2.rect(0,0,2,buffer2.height);

  buffer2.rect(buffer2.width-2,0,2,buffer2.height);

  textureMode(NORMAL)

}

​

function draw() {

  background(36,36,36);

  rotateZ(57);

  noStroke();

  translate(0,-20,300);

  push();

  translate(410, sin(frameCount/25)*100);

  rotateY(frameCount * 0.01);

  cylinder(200, 100);

  pop();

  push();

  translate(0,sin(frameCount/25)*150);

  rotateY(frameCount * 0.01);

  cylinder(200, 100);

  pop();

​

  push();

  translate (-410, sin(frameCount/25)*100);

  rotateY(frameCount * 0.01);

  cylinder(200, 100);

  pop();

  texture(buffer1);

​

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

// layer 2

  push();

  translate(410, sin(frameCount/25)*100);

  translate(0,75);

  rotateY(frameCount * -0.01);

  cylinder(200, 2 + i*100);

  pop();

  push();

  translate(0,sin(frameCount/25)*150);

  translate(0,75);

  rotateY(frameCount * -0.01);

  cylinder(200, 2 + i*100);

  pop();

​

  push();

  translate (-410, sin(frameCount/25)*100);

  translate(0,75);

  rotateY(frameCount * -0.01);

  cylinder(200, 100);

  pop();

// layer 3

  push();

  translate(410, sin(frameCount/25)*100);

  translate(0,200);

  rotateY(frameCount * 0.01);

  cylinder(200, 2 + i*100);

  pop();

  push();

  translate(0,sin(frameCount/25)*150);

  translate(0,200);

  rotateY(frameCount * 0.01);

  cylinder(200, 2 + i*100);

  pop();

​

  push();

  translate (-410, sin(frameCount/25)*100);

  translate(0,200);

  rotateY(frameCount * 0.01);

  cylinder(200, 100);

  pop();

// layer 4

  push();

  translate(410, sin(frameCount/25)*100);

  translate(0,350);

  rotateY(frameCount * -0.01);

  cylinder(200, 2 + i*100);

  pop();

  push();

  translate(0,sin(frameCount/25)*150);

  translate(0,350);

  rotateY(frameCount * -0.01);

  cylinder(200, 2 + i*100);

  pop();

​

  push();

  translate (-410, sin(frameCount/25)*100);

  translate(0,350);

  rotateY(frameCount * -0.01);

  cylinder(200, 100);

  pop();

// layer 5

  push();

  translate(-410, sin(frameCount/25)*100);

  translate(0,550);

  rotateY(frameCount * 0.01);

  cylinder(200, 2 + i*100);

  pop();

  push();

  translate(410, sin(frameCount/25)*100);

  translate(0,550);

  rotateY(frameCount * 0.01);

  cylinder(200, 2 + i*100);

  pop();

  push();

  translate(0,sin(frameCount/25)*150);

  translate(0,550);

  rotateY(frameCount * 0.01);

  cylinder(200, 2 + i*100);

  pop();

} 

  texture(buffer2);

}