let font;

​

function preload() {

  font = loadFont("KronaOne.ttf");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL);

  // draw buffer (once). We do the 

  // animation/movement when we draw the texture

  // onto the mesh later in drawRibbon()

  buffer = createGraphics(1000,100);

  buffer.background(0);

  buffer.fill(255,0,0);

  buffer.noStroke();

  buffer.textFont(font);

  buffer.textSize(50)

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

    buffer.text("GENERATIVE TYPE", 4 + (i*700),70)

  }

  // draw a 2 pixels line at the beginning

  // and end of the buffer to avoid flickering

  // later when we use the buffer as texture

  buffer.fill(0);

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

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

  textureMode(NORMAL)

}

​

function draw() {

  background(0);

  drawRibbon();

  push();

  translate(0,-300);

  drawRibbon();

  pop();

  push();

  translate(0,300);

  drawRibbon();

  pop();

  push();

  translate(0,600);

  drawRibbon();

  pop();

  push();

  translate(0,900);

  drawRibbon();

  pop();

}

function drawRibbon() {

  let w = 1000; // width of ribbon-mesh (x-axis)

  let h = 200;  // height of ribbon-mesh (y-axis)

  let tw = 100; // tiles per width

  let th = 10;  // tiles per height 

  let a = 4000;  // amplitude per z-Axis (for the curve)

  let r = 0.1;  // curve frequency

  let sx = 0.2; // speed of movement along x-axis

  let sy = 0;   // speed of movement along y-axis 

  let cw = w/tw;

  let ch = h/th;

  let nu = 1.0/tw;

  let nv = 1.0/th;

  push()

  scale(1.5);

  //rotateX(map(mouseX,0,width,0,TWO_PI));

  rotateY(frameCount*0.003);

  rotateZ(frameCount*0.003);

  translate(-(tw*cw)/2,-(th*ch)/2)

  texture(buffer);

  beginShape(TRIANGLES)

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

    for(let j=0;j<th;j++) {

      let mu = (frameCount*sx + i)%tw;

      let mv = (frameCount*sy + j)%th;

      let zi0 = sin(i*0.1)*0.05;

      let zi1 = sin((i+1)*0.1)*0.05;

      let x0 = i * cw;

      let y0 = j * ch;

      let z0 = zi0 * a;

      let u0 = mu*nu;

      let v0 = mv*nv;

      let x1 = (i+1) * cw;

      let y1 = j * ch;

      let z1 = zi1 * a;

      let u1 = (mu+1)*nu;

      let v1 = mv*nv;

      let x2 = (i+1) * cw;

      let y2 = (j+1) * ch;

      let z2 = zi1 * a;

      let u2 = (mu+1)*nu;

      let v2 = (mv+1)*nv;

      let x3 = (i) * cw;

      let y3 = (j+1) * ch;

      let z3 = zi0 * a;

      let u3 = mu*nu;

      let v3 = (mv+1)*nv;

      vertex(x0,y0,z0,u0,v0)

      vertex(x1,y1,z1,u1,v1)

      vertex(x3,y3,z3,u3,v3)

      vertex(x3,y3,z3,u3,v3)

      vertex(x2,y2,z2,u2,v2)

      vertex(x1,y1,z1,u1,v1)

    }

  }

  endShape(CLOSE);

  pop();

}