3D Text

let inputElt

let font

let extruded

let distortion

let prev, next

let cam

​

function preload() {

  font = loadFont('https://fonts.gstatic.com/s/kanit/v7/nKKU-Go6G5tXcr4uPiWgX6BJNUJy.ttf')

}

​

function setup() {

  document.body.setAttribute(

    'style',

    'min-height: 100%; background-color: #eee; display: flex; flex-direction: column; align-items: center; justify-content: center'

  )

  createCanvas(600, 600, WEBGL)

  pixelDensity(2)

  setAttributes({ alpha: true })

  cam = createEasyCam()

  cam.auto_update = false

  // This is using the p5.Framebuffer library to do feedback with higher

  // quality colour blending by using floating point textures.

  //

  // More info for if you want to try it yourself:

  // https://github.com/davepagurek/p5.Framebuffer#floating-point-textures

  prev = createFramebuffer({ colorFormat: 'float' })

  next = createFramebuffer({ colorFormat: 'float' })

  inputElt = createInput('p5*js', 'text')

  inputElt.input(updateModel)

  distortion = createShader(...distortionShader())

  updateModel()

}

​

function updateModel() {

  if (extruded) {

    freeModel(extruded)

  }

  extruded = font.textToContours(inputElt.value(), 0, 0, 100, 150)

}

​

function draw() {

  [prev, next] = [next, prev]

  clear()

  next.draw(() => {

    clear()

    background(255)

    // Disable depth testing so that the image of the previous

    // frame doesn't cut off the text

    _renderer.GL.disable(_renderer.GL.DEPTH_TEST)

    push()

    noStroke()

    scale(1.005)

    texture(prev.color)

    plane(width, -height)

    pop()

    push()

    noStroke()

    fill(255, 0.5)

    rectMode(CENTER)

    rect(0, 0, width, height)

    pop()

    _renderer.GL.enable(_renderer.GL.DEPTH_TEST)

    push()

    cam.update()

    noStroke()

    shader(distortion)

    distortion.setUniform('time', millis())

​

    rotateZ(sin(millis() * 0.0006) * PI/5)

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

      push()

      translate(

        (noise(i * 1000, 0) - 0.5) * width * 1.5,

        (noise(i * 1000, 1000) - 0.5) * height * 1.5,

        (noise(i * 1000, 2000) - 0.25) * -2 * width,

      )

      const noiseOff = 1000 * noise(i * 1000, 3000)

​

      scale(2)

      rotateX(sin(millis() * 0.001 + noiseOff) * PI/8)

      rotateY(sin(millis() * 0.0007 + noiseOff) * PI/9)

      rotateZ(sin(millis() * 0.0003 + noiseOff) * PI/12)

      model(extruded)

      pop()

    }

    pop()

  })

  clear()

  push()

  noStroke()

  texture(next.color)

  plane(width, -height)

  pop()

}