p5 Libraries poster

let font

let bodyFont

let models = {}

let blurRenderer

​

function preload() {

  // Martian Mono 700

  font = loadFont('https://fonts.gstatic.com/s/martianmono/v3/2V08KIcADoYhV6w87xrTKjs4CYElh_VS9YA4TlTnQzaVMIE6j15dYY2NvM6WD75kdpF2.ttf')

  // Martian Mono 200

  bodyFont = loadFont('https://fonts.gstatic.com/s/martianmono/v3/2V08KIcADoYhV6w87xrTKjs4CYElh_VS9YA4TlTnQzaVMIE6j15dYY3qu86WD75kdpF2.ttf')

}

​

function charModel(c) {

  if (!models[c]) {

    const charModel = font.extrudeText(c, 0, 0, 120, 280)

    models[c] = charModel

  }

  return models[c]

}

​

function setup() {

  createCanvas(600, 600, WEBGL)

  // pixelDensity(2)

  setAttributes({ antialias: true })

  GaussianBlurRenderer.frag = GaussianBlurRenderer.frag.replace(

    'vec4 sample = texture2D(uImg, vVertTexCoord + offset);',

    'vec4 sample = mix(texture2D(uImg, vVertTexCoord + offset), vec4(235.,75.,149.,255.)/255., 1. - exp(-0.02 * max(0., z - uTargetZ)));'

  ).replace(

    'vec4 color = texture2D(uImg, vVertTexCoord);',

    'vec4 color = mix(texture2D(uImg, vVertTexCoord), vec4(235.,75.,149.,255.)/255., 1. - exp(-0.02 * max(0., origZ - uTargetZ)));'

  )

  blurRenderer = createGaussianBlurRenderer()

  blurRenderer.setIntensity(0.3)

  blurRenderer.setSamples(20)

  blurRenderer.setDof(20)

}

​

function draw() {

  clear()

  blurRenderer.draw(() => {

    background('#EB4B95')

    noStroke()

    fill(0)

    specularMaterial(255)

    shininess(500)

    directionalLight(100, 100, 100, 0, 1, -0.3)

    directionalLight(150, 150, 150, 0.7, 0, 1)

    directionalLight(150, 150, 150, -0.7, 0, 1)

​

    directionalLight(255, 255, 255, 0, 0, 1)

​

    // pointLight(255 * pow(noise(t*0.001, 100), 2) * 0.8, 0, 0, 0, 200, 800)

    const d = 50

    const t = millis()

    noiseDetail(2)

    push()

    rotateX(map(noise(t * 0.0002, 0), 0, 1, -1, 1) * PI * 0.025)

    rotateY(map(noise(t * 0.0002, 1000), 0, 1, -1, 1) * PI * 0.025)

    // translate(

    //  30 * map(noise(t * 0.0002, 0), 0, 1, -1, 1),

    //  30 * map(noise(t * 0.0002, 1000), 0, 1, -1, 1),

    //  30 * map(noise(t * 0.0002, 2000), 0, 1, -1, 1),

    // )

    push()

    translate(0, 0, -d)

    blurRenderer.focusHere()

    pop()

​

    const lines = [

      'p5*js',

      'libraries',

      //'ries!'

    ].map(txt => txt.split(''))

    for (const [i, line] of lines.entries()) {

      const y = i === 0 ? -height/12 : height/5//map(i, 0, lines.length-1, -height/4, height/4)

      for (const [j, letter] of line.entries()) {

        const x = map(j, 0, line.length-1, -width/3, width/3)

        push()

        translate(x * (i === 1 ? 1.15 : 1), y, -d)

        scale(0.55 * (i === 1 ? 0.5 : 1))

        if (letter === '*') scale (0.8)

        rotateX(map(noise(x, y, t*0.0005),0,1,-1,1) * PI * 0.25)

        rotateY(map(noise(x, y, 1000 + t*0.0005),0,1,-1,1) * PI * 0.25)

        translate(0, 0, -d)

        // sphere(20)

        model(charModel(letter))

        pop()

      }

    }

    pop()

  })

  const margin = 20

  textFont(bodyFont)

  fill(0)

  noStroke()

  textSize(14)

  push()

  translate(-width/2 + margin, -height/2 + margin)

  textAlign(LEFT, TOP)

  text('LIBRARIES OPEN CALL', 0, 0)

  pop()

  push()

  translate(width/2 - margin, -height/2 + margin)

  textAlign(RIGHT, TOP)

  text('ADD YOURS TO THE LIST!', 0, 0)

  pop()

  push()

  translate(0, height/2 - margin)

  textAlign(CENTER, BOTTOM)

  text('SUBMIT BY APRIL 8', 0, -20)

  text('github.com/processing/p5.js-libraries', 0, 0)

  pop()

}