Genuary 16: Fun House

let people

let fbo

let mirrorShader

const mirrorWidth = 300

const mirrorHeight = 550

​

function setup() {

  createCanvas(600, 600, WEBGL)

  mirrorShader = createShader(...mirrorShaderSource())

  fbo = createFramebuffer({ width: mirrorWidth, height: mirrorHeight })

  const graphic = createGraphics(600, 600)

  people = [...svgs.querySelectorAll('svg')].map((svg) => {

    graphic.clear()

    graphic.noFill()

    graphic.stroke(0)

    graphic.strokeWeight(2)

    for (const path of svg.querySelectorAll('path')) {

      const bezierPath = bezierFromElement(path)

      const samples = ceil(bezierPath.getTotalLength())

      graphic.beginShape()

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

        const pt = bezierPath.getPointAtLength(i/(samples-1) * bezierPath.getTotalLength())

        graphic.vertex(pt.x, pt.y)

      }

      graphic.endShape()

    }

    return graphic.get()

  })

  graphic.remove()

  const weirdGuy = people.pop()

  const unmirrorGraphic = createGraphics(600, 600, WEBGL)

  unmirrorGraphic.setAttributes({ alpha: true })

  const unmirrorShader = unmirrorGraphic.createShader(...inverseMirrorShaderSource())

  unmirrorGraphic.noStroke()

  unmirrorGraphic.background(255)

  unmirrorGraphic.shader(unmirrorShader)

  unmirrorShader.setUniform('img', weirdGuy)

  unmirrorGraphic.plane(width, height)

  people.push(unmirrorGraphic.get())

  unmirrorGraphic.remove()

}

​

function draw() {

  const framesPerPerson = 5000

  const numPeople = 4

  const t = millis() % (framesPerPerson * numPeople)

  // const t = 2.65 * framesPerPerson

  const person = constrain(floor(t / framesPerPerson), 0, people.length-1)

  const personLength = person === people.length-1 ? 2 : 1

  const personProgress = map(t, person*framesPerPerson, (person+personLength)*framesPerPerson, 0, 1, true)

  const progressIn = map(personProgress, 0, 0.3, 1, 0, true)

  const progressOut = map(personProgress, 0.7, 1, 0, 1, true)

  const cameraProgress =

    Ease.easeInOutCubic(map(t, 2.8*framesPerPerson, 3*framesPerPerson, 0, 1, true)) *

    Ease.easeInOutCubic(map(t, 3.8*framesPerPerson, 4*framesPerPerson, 1, 0, true))

  const drawPerson = () => {

    push()

    imageMode(CENTER)

    translate(progressIn * -width, -40*abs(sin(progressIn*TWO_PI*3)))

    translate(progressOut * width, -40*abs(sin(progressOut*TWO_PI*3)))

    image(people[person], 0, 0)

    pop()

  }

  fbo.draw(() => {

    clear()

    background(255)

    drawPerson()

  })

  background(255)

  push()

  scale(lerp(1, 0.8, cameraProgress))

  rotateY(cameraProgress * PI * 0.8)

  rotateX(cameraProgress * PI*0.2)

  translate(50 * cameraProgress, 250 * cameraProgress, 370 * cameraProgress)

  // translate(50 * cameraProgress, 150 * cameraProgress, 200 * cameraProgress)

  push()

  noStroke()

  translate(0, 0, -650)

  scale(1.65)

  push()

  fill(150)

  stroke(0)

  strokeWeight(5)

  translate(0, 0, -7)

  box(mirrorWidth+40, mirrorHeight+40, 5)

  pop()

  shader(mirrorShader)

  mirrorShader.setUniform('img', fbo.color)

  plane(mirrorWidth, -mirrorHeight)

  pop()

  push()

  translate(-100, 300, 250)

  drawPerson()

  pop()

  pop()

}