Genuary 31: Negative Space

let voronoi

let bbox

let fbo

let blurShader

function setup() {

  createCanvas(600, 600, WEBGL)

  pixelDensity(2)

  voronoi = new Voronoi()

  bbox = {

    xl: -width/2,

    xr: width/2,

    yt: -height/2,

    yb: height/2,

  }

  fbo = new Framebuffer(window)

  blurShader = createShader(vert, frag)

  frameRate(1/3)

}

​

function mousePressed() {

  saveCanvas('trees.png')

}

​

function draw() {

  const sites = []

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

    let x = 0

    let y = 0

    while (Math.hypot(x, y) < 100) {

      x = random(-1,1)*width/2

      y = random(-1,1)*height/2

    }

    sites.push({ x, y })

  }

  const diagram = voronoi.compute(sites, bbox)

  const contours = diagram.cells.map((cell) => {

    return cell.halfedges.map((he) => he.getStartpoint()).map((v) => createVector(v.x, v.y))

  }).map((contour) => inset(contour, 8))

  const trees = contours.map((contour) => {

    const trunkLoc = normalize(contour.map(() => 1))

    const branches = []

    const addBranches = (source, depth) => {

      const numChildren = depth === 0 ? 15 : random([1, 2, 2, 2, 3, 3, 3])

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

        const direction = source.map(

          (s) => 0.17*((s-0.5) + random(-1,1)*0.3)//*pow((1+depth),0.5)

        )

        const nextLoc = normalize(source.map((s,i) => s + direction[i]))

        if (locDist(nextLoc, source) < 0.01) continue

        branches.push({

          from: getPoint(contour, source),

          to: getPoint(contour, nextLoc),

          depth,

        })

        if (depth < 6) {

          addBranches(nextLoc, depth+1)

        }

      }

    }

    addBranches(trunkLoc, 0)

    return {

      trunk: getPoint(contour, trunkLoc),

      branches,

      contour,

    }

  })

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

  const near = eyeZ/10

  const far = eyeZ*10

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

  const targetDepth = 550

  const blurIntensity = 0.01

  fbo.draw(() => {

    clear()

    push()

    background(255)

    for (const tree of trees) {

      push()

      for (const { from, to, depth } of tree.branches) {

        const angle = atan2(to.y-from.y, to.x-from.x)

        push()

        noStroke()

        fill(0)

        translate((from.x+to.x)/2, (from.y+to.y)/2, 0)

        rotateZ(angle+PI/2)

        cylinder((3 - 0.5*depth)*0.5, Math.hypot(to.x-from.x, to.y-from.y), 5, 5)

        pop()

      }

      pop()

      push()

      const h = 800

      translate(tree.trunk.x, tree.trunk.y, h*0.4)

      rotateX(PI/2)

      noStroke()

      fill(0)

      const thickness = bboxArea(tree.contour) * 0.0003

      cone(2*thickness, -h)

      pop()

    }

    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()

}

​

function bboxArea(contour) {

  const minX = Math.min(...contour.map((v) => v.x))

  const maxX = Math.max(...contour.map((v) => v.x))

  const minY = Math.min(...contour.map((v) => v.y))

  const maxY = Math.max(...contour.map((v) => v.y))

  return (maxX - minX) * (maxY - minY)

}

​

function inset(contour, dist) {

  const center = contour.reduce((acc, next) => acc.copy().add(next)).mult(1/contour.length)

  return contour.map((c) => c.copy().add(center.copy().sub(c).normalize().mult(dist)))

}

​

function normalize(weights) {

  const clamped = weights.map((w) => constrain(w, 0, 0.9))

  const sum = max(0.01,clamped.reduce((acc, next) => acc+next))

  return clamped.map((w) => w/sum)

}

function getPoint(contour, weights) {

  return weights

    .map((w,i) => contour[i].copy().mult(w))

    .reduce((acc, next) => acc.add(next))

}

function locDist(a, b) {

  return Math.hypot(...a.map((v,i) => v-b[i]))

}