Ransom Note Generator - OpenProcessing

mySketch
paperShader
fonts
xxxxxxxxxx
 
let fonts
let msgText
let paperShader
​
function preload() {
  const allFontURLs = []
  for (const key in fontData) {
    allFontURLs.push(...Object.values(fontData[key].files))
  }
  randomSeed(0)
  const randomFonts = []
  for (let i = 0; i < 5; i++) {
    const idx = floor(random(allFontURLs.length))
    randomFonts.push(allFontURLs[idx])
    allFontURLs.splice(idx, 1)
  }
  fonts = randomFonts.map((url) => loadFont(url))
}
​
function setup() {
  createCanvas(600, 600, WEBGL)
  paperShader = createShader(...makePaperShader())
  noLoop()
  msgText = createInput('If you want to see your sketch again...')
  msgText.style('position', 'absolute')
  msgText.style('top', '10px')
  msgText.style('left', 'calc(50% - 150px)')
  msgText.style('width', '300px')
  msgText.style('fontSize', '20px')
  msgText.input(() => redraw())
}
​
function draw() {
  background(200)
  fill(0)
  push()
  translate(-width/2, -height/2)
  textAlign(CENTER, CENTER)
  textSize(50)
  const margin = 20
  const space = 30
  let x = margin
  let y = margin
  for (let word of msgText.value().split(/\s+/g)) {
    const letters = word.split('')
    const wordFonts = letters.map(() => random(fonts))
    const bounds = letters.map((letter, i) => {
      const b = wordFonts[i].textBounds(letter)
      b.w *= 2
      b.w = max(space, b.w)
      b.h = max(b.h, 25)
      return b
    })
    const totalWidth = bounds.reduce((acc, next) => acc + next.w, 0)
    if (x + totalWidth + space > width - 2 * margin) {
      x = margin
      y += textLeading() * 1.5
    }
    for (let [i, letter] of letters.entries()) {
      push()
      const font = wordFonts[i]
      textFont(font)
      
      if (random() < 0.3) {
        if (random() < 0.5) {
          letter = letter.toLowerCase()
        } else {
          letter = letter.toUpperCase()
        }
      }
      const b = bounds[i]
      translate(x + b.w/2, y + b.h/2)
      rotate(random(-1, 1) * PI * 0.1)
      
      const sx = 0.9
      const sy = 2
      const squarePoints = [
        createVector(-b.w/2*sx, -b.h/2*sy),
        createVector(b.w/2*sx, -b.h/2*sy),
        createVector(-b.w/2*sx, b.h/2*sy),
        createVector(b.w/2*sx, b.h/2*sy),
      ].map((v) => v.add(createVector(random(10), random(10))))
      
      const drawSquare = () => {
        beginShape(QUAD_STRIP)
        for (const v of squarePoints) {
          vertex(...v.array())
        }
        endShape(CLOSE)
      }
      
      push()
      noStroke()
      fill(0, 50)
      translate(2, 2)
      drawSquare()
      pop()
      
      let bgColor, fgColor
      if (random() < 0.7) {
        bgColor = random([
          [1,1,1],
          [1,1,0.8],
          [0.9,0.9,0.9]
        ])
        fgColor = random([
          '#000',
          '#000',
          '#000',
          '#591414',
          '#1c19c2',
        ])
      } else {
        bgColor = random([
          [0,0,0],
          [0.9,0.1,0.1],
          [0.2,0.2,0.7],
          [0.1,0.9,0.1],
          [0.7,0.2,0.1],
          [0.2,0.9,0.3],
          [0.9,0.5,0.3],
        ])
        fgColor = '#FFF'
      }
      
      noStroke()
      push()
      shader(paperShader)
      paperShader.setUniform('uColor', bgColor)
      drawSquare()
      pop()
      
      fill(fgColor)
      text(letter, 0, 0)
      x += b.w
      pop()
    }
    x += space
  }
  pop()
}