Wizard Pondering Orb (in Text)

let font

let blurRenderer

const characterModels = {}

​

function charModel(char) {

  if (!characterModels[char]) {

    characterModels[char] = font.extrudeText(char, 0, 0, 20, 180)

  }

  return characterModels[char]

}

​

function preload() {

  // Coromant Garamond Regular

  font = loadFont('https://fonts.gstatic.com/s/cormorantgaramond/v9/co3bmX5slCNuHLi8bLeY9MK7whWMhyjornFLsS6V7w.ttf')

}

​

function setup() {

  createCanvas(600, 600, WEBGL)

  blurRenderer = createGaussianBlurRenderer()

  blurRenderer.setDof(100)

  blurRenderer.setSamples(20)

  blurRenderer.setIntensity(0.1)

}

​

function draw() {

  const t = millis()

  const flicker = map(noise(t * 0.01), 0, 1, 0.2, 1)

​

  blurRenderer.draw(() => {

    push()

    clear()

    background(0)

    noStroke()

    ambientLight(82, 69, 84)

    ambientMaterial(255)

    specularMaterial(250)

    pointLight(112*flicker, 210*flicker, 255*flicker, 0, 150, 150);

    let z1, z2

    translate(

      sin(t * 0.001) * 20,

      map(sin(t * 0.0008), -1, 1, -50, -20),

      map(sin(t * 0.00015), -1, 1, 0, 100)

    )

    rotateX(map(sin(t * 0.0004), -1, 1, 0, PI*0.1))

​

    // Eyes

    for (const side of [-1, 1]) {

      const wiggleX = 2*noise(100 + side * 50 + t*0.05)

      push()

      translate(side * 40 + wiggleX, -85)

      scale(0.15)

      model(charModel('o'))

      pop()

    }

​

    // Eyebags

    for (const side of [-1, 1]) {

      push()

      translate(side * 50, -70, 10)

      scale(0.25)

      rotateZ(PI/2)

      model(charModel(')'))

      pop()

    }

​

    // Cheekbones

    for (const side of [-1, 1]) {

      push()

      scale(side, 1)

      translate(80, -50, 10)

      scale(0.15)

      scale(-1, 1)

      model(charModel('c'))

      pop()

    }

​

    // Nose

    push()

    translate(0, -65)

    rotateX(PI * 0.2)

    rotateZ(PI)

    scale(0.5)

    model(charModel('?'))

    z2 = getFocalZ()

    pop()

​

    // Lips

    push()

    translate(0, 10)

    scale(0.4)

    model(charModel('_'))

    pop()

​

    // Brows

    push()

    translate(0, -140 + 10*sin(t*0.001))

    rotateZ(PI/2)

    scale(0.8)

    model(charModel('}'))

    pop()

​

    // Mustache

    for (const side of [-1, 1]) {

      push()

      scale(side, 1)

      translate(50, -10)

      scale(0.4)

      rotateZ(PI * 0.1)

      model(charModel('~'))

      pop()

    }

​

    // Beard

    const numBeardPieces = 25

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

      const f = i / (numBeardPieces - 1)

      const angle = map(f, 0, 1, -PI*0.45, PI*0.45)

      const off = noise(f * 100, 0) * 100 + 60

      const orientation = noise(f * 100, 300) * PI * 0.2

      const wiggleX = noise(f * 100 + t*0.0005, 400)

      const wiggleY = noise(f * 100 + t*0.0005, 600)

      push()

      rotateX(PI * 0.2)

      rotateZ(angle)

      translate(0, off)

      translate(wiggleX*20, wiggleY*20)

      scale(0.4)

      rotateZ(PI/2)

      rotateZ(orientation)

      model(charModel('~'))

      pop()

    }

​

    // Hood

    for (const side of [-1, 1]) {

      push()

      scale(side, 1)

      translate(100, -120)

      rotateZ(PI*-0.2)

      model(charModel(')'))

      pop()

    }

​

    // Cloak

    const numCloakSwoops = 6

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

      const f = i / (numBeardPieces - 1)

      const angle = map(floor(noise(f * 2000, 1200) * 4), 0, 3, -PI*0.2, PI*0.2)

      const yOff = map(f, 0, 1, 150, 500)

      const s = map(noise(f * 200, 1400), 0, 1, 0.5, 0.8)

      push()

      translate(0, 8*sin((t - 200 + f * 500)*0.001))

      rotateX(PI * 0.1)

      rotateZ(angle)

      translate(0, yOff, 0)

      rotateZ(PI / 2)

      scale(s)

      model(charModel(')'))

      pop()

    }

    for (const side of [-1, 1]) {

      push()

      scale(side, 1)

      translate(0, 8*sin(t*0.001))

      translate(200, 180)

      scale(0.95)

      rotateZ(PI*0.45)

      model(charModel('('))

      pop()

    }

​

    // Shoulders

    for (const side of [-1, 1]) {

      push()

      scale(side, 1)

      translate(240, 120)

      translate(0, 5*sin((t + 800)*0.001))

      rotateZ(-PI*0.15)

      scale(-1, 1)

      model(charModel('r'))

      pop()

    }

​

    // Hands

    for (const side of [-1, 1]) {

      const wiggleX = 2*noise(100 + side * 50 + t*0.05, 1000)

      push()

      translate(wiggleX, 0)

      scale(side, 1)

      translate(180, 230)

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

        push()

        translate(f * 15, 0)

        scale(map(f, 0, 4, 0.35, 0.3))

        rotateX(PI*0.15)

        rotateY(map(f, 0, 4, -PI/2, -PI*0.4))

        model(charModel(']'))

        pop()

      }

      push()

      translate(-15, 15, -15)

      rotateX(-PI*0.5)

      scale(0.3)

      scale(-1, 1)

      model(charModel('7'))

      pop()

      pop()

    }

​

    // Orb

    push()

    specularMaterial(112, 210, 255)

    emissiveMaterial(...[112, 210, 255].map(v => v * 0.8))

    pointLight(255, 255, 255, 0, 0, 150)

    pointLight(100, 100, 100, -100, 0, 50)

    shininess(200)

    translate(0, 150, 150)

    z1 = getFocalZ()

    sphere(50)

    pop()

​

    // bg

    //const letters = '!@$^%*&ƒ†˚©ßåµ≤≥ø∫≈ª•¶§¢∞£'.split('')

    const letters = 'abcdefghijklmnopqrstuvwxyz'

    const numLetters = letters.length

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

      push()

      const angleSpeed = map(noise(i * 200, 2500), 0, 1, 1, 1.5)

      const startAngle = (i + noise(i * 200, 2000)) * TWO_PI

      const angle = startAngle + angleSpeed * t * 0.002

      const rSpeed = map(noise(i * 200, 2800), 0, 1, 1, 2.5)

      const startR = TWO_PI * noise(i * 200, 3200)

      const r = map(sin(startR + rSpeed * t * 0.0015), -1, 1, 600, 1100)

      const z = -map(noise(i * 200, 3000), 0, 1, 800, 1200)

      translate(

        0,

        -200,

        z

      )

      rotateX(PI*0.1)

      rotateZ(angle)

      translate(0, r, 0)

      scale(0.8)

      model(charModel(letters[i]))

      pop()

    }

    const focalMix = map(sin(t * 0.0006), -1, 1, 0, 1)

    blurRenderer.focus = lerp(z1, z2, focalMix)

​

    pop()

  })

  push()

  translate(

    sin(t * 0.001) * 20,

    map(sin(t * 0.0008), -1, 1, -50, -20),

    map(sin(t * 0.00015), -1, 1, 0, 100)

  )

  rotateX(map(sin(t * 0.0004), -1, 1, 0, PI*0.1))

  translate(0, 150, 150)

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

  blendMode(ADD)

  beginShape(TRIANGLE_FAN)

  fill(255, 255 * flicker)

  vertex(0, 0, 0)

  const numVerts = 30

  fill(255, 0)

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

    const f = i / numVerts

    vertex(

      200 * cos(f * TWO_PI),

      200 * sin(f * TWO_PI),

      0

    )

  }

  endShape()

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

  pop()

}

​

function getFocalZ() {

  const matrix = new DOMMatrix(_renderer.uMVMatrix.mat4)

  const center = new DOMPoint(0, 0, 0)

  const world = center.matrixTransform(matrix)

  return -world.z

}