Raph Collage

/*

A sketch for @sableRaph's #WCCChallenge theme of "dada."

Collage is a big thing in dadaism, so I tried doing a

3D collage, but I was too lazy to import more than one

model to collage together, so everything's made of snippets

of a 3D scan of Raphaël.

*/

​

let fullRaph

let raphTex

let raphCuts = []

let drawPieces

let printShader

let font

let bgColor

p5.disableFriendlyErrors = true

​

function preload() {

  fullRaph = loadModel('raph.obj', true, () => {})

  raphTex = loadImage('raph.jpg')

  // Roboto Slab 900

  font = loadFont('https://fonts.gstatic.com/s/robotoslab/v13/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjoDIOWaG5iddG-1A.ttf')

}

​

function setup() {

  createCanvas(600, 600, WEBGL)

  pixelDensity(2)

  setAttributes({ alpha: true })

  drawingContext.enable(drawingContext.BLEND)

  printShader = createShader(...printShaderSource())

  bgColor = color('#ebeae1')

  background(bgColor)

}

​

function makeCollage() {

  for (const piece of raphCuts) {

    freeGeometry(piece)

  }

  const fullRaphPiece = geomToPiece(fullRaph)

  const targetPieces = round(random(6, 12))

  const raphPieces = []

  while (raphPieces.length < targetPieces) {

    raphPieces.push(...randomChunk(fullRaphPiece, round(random(1, 3))))

  }

  raphCuts = raphPieces.map(pieceToGeom)

  const placedPieces = []

  const toPlace = [...raphCuts]

  while (toPlace.length > 0) {

    const piece = toPlace.shift()

    const angleY = random(-0.2, 0.2)

    const dAY = random(-1, 1) * 0.004

    if (placedPieces.length === 0) {

      placedPieces.push({

        piece,

        at: createVector(),

        s: random(0.8, 1.7),

        angle: random(TWO_PI),

        angleY,

        dAY,

      })

    } else {

      const parent = random(placedPieces)

      const s = random(0.2, 1.2)

      const at = parent.at.copy().add(

        p5.Vector.fromAngle(

          random(TWO_PI),

          100 * (parent.s + s),

        )

      )

      placedPieces.push({ piece, at, s, angle: random(TWO_PI), angleY, dAY })

    }

  }

  const minLoc = createVector()

  const maxLoc = createVector()

  for (const { at, s } of placedPieces) {

    for (const axis of ['x', 'y']) {

      minLoc[axis] = min(minLoc[axis], at[axis] - 100 * s)

      maxLoc[axis] = max(maxLoc[axis], at[axis] + 100 * s)

    }

  }

  const avgLoc = minLoc.copy().add(maxLoc).div(2)

  for (const { at } of placedPieces) {

    at.sub(avgLoc)

  }

  const numTexts = round(random(1, 4))

  const texts = []

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

    const parent = random(placedPieces)

    const s = random(0.2, 3)

    const at = parent.at.copy().add(

      p5.Vector.fromAngle(

        random(TWO_PI),

        20 * (parent.s + s),

      )

    )

    const rz = random(-1, 1) * 0.5

    const ry = random(-1, 1) * 0.2

    const dRY = random(-1, 1) * 0.0005

    const word = random('Raphaël de Courville Processing Community Lead Fellow'.split(' '))

    texts.push({ s, at, word, rz, ry, dRY })

  }

  drawPieces = (t) => {

    placedPieces.forEach(({ piece, at, s, angle, angleY, dAY }, i) => {

      const staggeredT = map(t, 0.02*i, 0.7 + 0.02*i, 0, 1, true)

      push()

      translate(at.x, at.y)

      scale(staggeredT)

      scale(s, -s, s) // Flip y because I exported the model upside down :')

      rotateY(angleY + dAY * frameCount)

      rotateZ(angle)

      noStroke()

      shader(printShader)

      printShader.setUniform('tex', raphTex)

      printShader.setUniform('inkColor', [0,0,0])

      printShader.setUniform('bgColor', [red(bgColor), green(bgColor), blue(bgColor)].map(v => v/255))

      printShader.setUniform('ms', frameCount / 60 * 1000)

      printShader.setUniform('density', pixelDensity())

      model(piece)

      pop()

    })

    drawingContext.disable(drawingContext.DEPTH_TEST)

    texts.forEach(({ s, at, word, rz, ry, dRY }, i) => {

      push()

      fill('#c94c22')

      noStroke()

      textSize(30 * s)

      textFont(font)

      translate(

        at.x + 15 * s + sin(frameCount * 0.1 + i),

        at.y + 15 * s + cos(5 + frameCount * 0.07 + i)

      )

      scale(t)

      rotateY(ry + dRY * frameCount)

      rotateZ(rz)

      textAlign(CENTER, CENTER)

      text(word, 0, 0)

      pop()

    })

    drawingContext.enable(drawingContext.DEPTH_TEST)

  }

}

​

let prevScene = -1

function draw() {

  background(bgColor)

  orbitControl()

  const sceneLength = 7 * 60

  const scene = floor(frameCount / sceneLength)

  const progress = (frameCount % sceneLength) / sceneLength

  if (scene !== prevScene) {

    makeCollage()

    prevScene = scene

  }

  const t =

    Ease.easeOutCubic(map(progress, 0, 0.1, 0, 1, true)) *

    (1 - Ease.easeInCubic(map(progress, 0.88, 0.98, 0, 1, true)))

  drawPieces(t)

}