var typeSize = 24

​

// GRID

var gridRows = 7

var gridCols = 22

var gridTracking = 0

var gridLineSpace = 0

​

// WAVE

var waveSpeed = 2

var waveXOffset = 3

var waveYOffset = 3

​

// AMPLITUDE

var xWave = 0

var xWaveOffset = 0 // or Math.PI

var yWave = 0

var yWaveOffset = 0 // or Math.PI

var zWave = 0

var zWaveOffset = 0 // or Math.PI

​

// CAMERA

var camZoom = 1

var camRotationX = 15

var camRotationY = 0

var camRotationZ = 0

​

// INPUT

var input = "EVERYTHING IS STRANGE. THINGS ARE HUGE AND VERY SMALL. THE STALKS OF FLOWERS ARE THICK AS OAK TREES. LEAVES ARE HIGH AS THE DOMES OF VAST CATHEDRALS. WE ARE GIANTS, LYING HERE, WHO CAN MAKE FORESTS QUIVER."

var inputLength = input.length

​

// FONT

var font

​

var xWaver = 0, yWaver = 0, zWaver = 0

​

function preload() {

  font = loadFont("fonts/IBMPlexMono-Regular.otf")

}

​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL)

  smooth()

​

  textFont(font)

  textSize(typeSize)

  textAlign(CENTER, CENTER)  

}

​

function draw() {

  background(255)

  var xSpace = typeSize + gridTracking

  var ySpace = typeSize + gridLineSpace

  // CAMERA

  translate(0, 0, camZoom)

  rotateX(radians(camRotationX))

  rotateY(radians(camRotationY))

  rotateZ(radians(camRotationZ))

​

    if(inputLength >= gridCols) {

    translate(-gridCols * xSpace/2, -floor(inputLength/gridCols) * ySpace/2)

  } else {

    translate(-inpuLength * xSpace/2, -floor(inputLength/gridCols) * ySpace/2);

  }

​

  for (var i = 0; i < inputLength; i++) {

    if(zWave != 0) {

      zWaver = sinEngine(zWaveOffset, waveXOffset, i % gridCols, waveYOffset, floor(i/gridCols), waveSpeed, 1) * zWave

    }

​

    if(xWave != 0) {

      xWaver = map(sinEngine(xWaveOffset, waveXOffset, i % gridCols, waveYOffset, floor(i/gridCols), waveSpeed, 1), -1, 1, 0, xWave)

    }

​

    if(yWave != 0) {

      yWaver = sinEngine(yWaveOffset, waveXOffset, i % gridCols, waveYOffset, floor(i/gridCols), waveSpeed, 1) * yWave

    }

​

    push()

    translate((i % gridCols) * xSpace + xWaver, floor(i / gridCols) * ySpace + yWaver, zWaver)

    // FRONT TEXT

    fill(0)

    text(input[i], 0, 0)

    // BACK TEXT

    fill(235)

        translate(0, 0, -1)

    text(input[i], 0, 0)

​

    pop()

  }  

}

​

function sinEngine(Offset, xLength, xCounter, yLength, yCounter, Speed, slopeN) {

  var sinus = sin((frameCount*Speed/100 + xCounter/xLength + yCounter/yLength + Offset))

  var sign = (sinus >= 0 ? 1: -1)

  var sinerSquare = sign * (1-pow(1-abs(sinus),slopeN))

  return sinerSquare

}

​

function cosEngine(Offset, xLength, xCounter, yLength, yCounter, Speed, slopeN) {

  var cosus = cos((frameCount*Speed/100 + xCounter/xLength + yCounter/yLength + Offset))

  var sign = (cosus >= 0 ? 1: -1)

  var coserSquare = sign * (1-pow(1-abs(cosus),slopeN))

  return coserSquare

}