Genuary 20: Sea of Shapes - OpenProcessing

mySketch
blur
Framebuffer
xxxxxxxxxx
 
const shapes = []
let fbo
let blurShader
​
function setup() {
  createCanvas(600, 600, WEBGL)
  for (let i = 0; i < 40; i++) {
    shapes.push(genShape())
  }
  fbo = new Framebuffer(window)
  blurShader = createShader(vert, frag)
}
​
function genShape() {
  const scale = max(20, randomGaussian(60, 40))
  return {
    position: createVector(
      randomGaussian(100, width/5),
      -200,
      randomGaussian(0, width/5)
    ),
    verts: [0,1,2].map((i) => createVector(
      scale * cos(TWO_PI*i/3 + randomGaussian(0, 0.4)),
      0,
      scale * sin(TWO_PI*i/3 + randomGaussian(0, 0.4))
    )),
    floorOffset: createVector(
      randomGaussian(-100, 80),
      400,
      randomGaussian(-50, 80),
    ),
  }
}
​
function distort(position, time) {
  const noiseOffset = createVector(
    20*sin(0.01*position.x + time + 0.05*position.y),
    0,
    30*sin(20 + 0.02*position.x + time*0.8 + 0.07*position.y)
  )
  return position.copy().add(noiseOffset)
}
​
function draw() {
  const eyeZ = (height/2) / tan(PI/6)
  const near = eyeZ/10
  const far = eyeZ*10
  perspective(PI/3, width/height, near, far)
  
  const blurIntensity = 0.06
  const targetDepth = 180 //400
  
  fbo.draw(() => {
    clear()
    push()
    background('#0c2e6e')
    clear()
​
    drawingContext.disable(drawingContext.DEPTH_TEST)
    drawingContext.enable(drawingContext.BLEND)
    drawingContext.blendEquation(drawingContext.FUNC_ADD)
    drawingContext.blendFunc(drawingContext.SRC_ALPHA, drawingContext.DST_ALPHA)
​
    const time = millis()/1000
​
    noStroke()
    
    beginShape(TRIANGLE_STRIP)
    for (const [c, y] of [
      ['#56b5e8', -height/2],
      ['#0c2e6e', -height/8],
      ['#0c2e6e', height/2]
      // #0f6985
    ]) {
      fill(c)
      for (const x of [-width/2, width/2]) {
        vertex(x, y)
      }
    }
    endShape()
    
    translate(0, 0, -200)
    
    for (const { position, verts, floorOffset } of shapes) {
​
      push()
      const distortedVerts = verts
        .map((v) => distort(v.copy().add(position), time))
      const floorVerts = distortedVerts
        .map((v) => v.copy().sub(position).mult(4).add(position).add(floorOffset))
​
      // shape on top
      fill(254, 255, 217, 40)
      beginShape(TRIANGLES)
      for (const { x, y, z} of distortedVerts) {
        vertex(x, y, z)
      }
      endShape()
​
      // shape on bottom
      fill(254, 255, 217, 10)
      beginShape(TRIANGLES)
      for (const { x, y, z } of floorVerts) {
        vertex(x, y, z)
      }
      endShape()
​
      // rays connecting them
      beginShape(TRIANGLE_STRIP)
      for (let i = 0; i < 4; i++) {
        const idx = i % 3
        for (const [alpha, { x, y, z }] of [
          [3, distortedVerts[idx]],
          [3, floorVerts[idx]],
        ]) {
          fill(254, 255, 217, alpha)
          vertex(x, y, z)
        }
      }
      endShape()
​
      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()
}