Genuary 8: Single Curve

let fbo

let blurShader

function setup() {

  createCanvas(600, 600, WEBGL)

  fbo = new Framebuffer(window)

  blurShader = createShader(vert, frag)

}

​

let shape

let rotX

let rotY

let bgColor

function regenerate() {

  if (shape) {

    _renderer._freeBuffers(shape.gid)

  }

  shape = bezierToPipeGeom(genBezier())

  rotX = random(-1,1) * 0.0002

  rotY = random(-1,1) * 0.0002

  bgColor = color(random([

    '#e62253',

    '#f7ad52',

    '#a63098',

    '#2d3bba',

  ]))

}

​

let lastShapeIdx = -1

function draw() {

  const millisPerShape = 5000

  const shapeIdx = floor(millis() / millisPerShape)

  if (!shape || shapeIdx !== lastShapeIdx) {

    regenerate()

    lastShapeIdx = shapeIdx

  }

  const eyeZ = (height/2) / tan(PI/6)

  const near = eyeZ/10

  const far = eyeZ*10

  perspective(PI/3, width/height, near, far)

  const targetDepth = 500 + 150 * sin(millis() * 0.001)

  const blurIntensity = 0.02

  fbo.draw(() => {

    clear()

    push()

    background(bgColor)

    noStroke()

    fill(255)

    ambientLight(color('#baddf5'))

    pointLight(255, 255, 255, width/2, -height/2, 200)

    rotateY(millis() * rotY)

    rotateX(millis() * rotX)

    model(shape)

    pop()

  })

  clear()

​

  push()

​

  noStroke()

  rectMode(CENTER)

  shader(blurShader)

  _renderer.getTexture(fbo.depth).setInterpolation(

    _renderer.GL.NEAREST,

    _renderer.GL.NEAREST

  )

  blurShader.setUniform('uImg', fbo.color)

  blurShader.setUniform('uDepth', fbo.depth)

  blurShader.setUniform('uSize', [width, height])

  // try replacing blurIntensity with 0 to see an unblurred version

  blurShader.setUniform('uIntensity', blurIntensity)

  blurShader.setUniform('uNumSamples', 25)

  blurShader.setUniform('uTargetZ', targetDepth)

  blurShader.setUniform('uNear', near)

  blurShader.setUniform('uFar', far)

  rect(0, 0, width, -height)

  pop()

}