Weather System

/**

- Clouds are particles moving along Bezier paths

- The blur, fog, god rays, and rainbow are applied in the

  postprocessing shader

*/

​

const particleSystems = []

const trees = []

const numParticles = 200

let fbo

let postprocessShader

​

function setup() {

  createCanvas(600, 600, WEBGL)

  fbo = createFramebuffer()

  postprocessShader = createShader(vert, frag)

  particleSystems.push(

    new ParticleSystem({

      guidingCurve: createGuidingCurve(0),

      numParticles: 300,

    }),

    new ParticleSystem({

      guidingCurve: createGuidingCurve(PI * 0.9),

      numParticles: 300,

      scale: 1.5,

    }),

  )

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

    trees.push(new Tree())

  }

}

​

function draw() {

  background(0)

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

  const near = eyeZ/10

  const far = eyeZ*10

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

  const targetDepth = 1200

  const blurIntensity = 0.015

  const fogColor = color('#50607a')

  const ambientColor = color('#60646e')

  const skyColor = color('#f5d2a4')

  const sideSkyColor = color('#282d2e')

  const treeColor = color('#282e33')

  const lightColor = color('#b8b47d')

  const t = millis()

  fbo.draw(() => {

    clear()

    push()

    ambientLight(ambientColor)

    pointLight(skyColor, 0, -2 * height, -800)

    pointLight(sideSkyColor, width, -100, -200)

​

    noStroke()

    fill('#b1bee0')

​

    translate(0, 0, -100)

    push()

    pointLight(lightColor, -width*0.1, -400, -600)

    for (const system of particleSystems) {

      system.draw(t)

    }

    pop()

    push()

    lightFalloff(1, 0, 1)

    pointLight(lightColor, -width*0.1, 0, -600)

    fill(treeColor)

    translate(0, height*0.8, -600)

    rotateX(PI / 2)

    plane(width * 16, width * 16)

    pop()

    push()

    lightFalloff(0.1, 0.001, 0)

    pointLight(lightColor, -width*0.1, 0, -600)

    fill(treeColor)

    for (const tree of trees) {

      tree.draw(t)

    }

    pop()

    pop()

  })

  clear()

​

  push()

​

  noStroke()

  rectMode(CENTER)

  shader(postprocessShader)

  _renderer.getTexture(fbo.depth).setInterpolation(

    _renderer.GL.NEAREST,

    _renderer.GL.NEAREST

  )

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

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

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

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

  postprocessShader.setUniform('uIntensity', blurIntensity)

  postprocessShader.setUniform('uNumSamples', 15)

  postprocessShader.setUniform('uTargetZ', targetDepth)

  postprocessShader.setUniform('uNear', near)

  postprocessShader.setUniform('uFar', far)

  postprocessShader.setUniform('uFogColor', [red(fogColor)/255, green(fogColor)/255, blue(fogColor)/255])

  postprocessShader.setUniform('uFogScale', 0.0005)

  postprocessShader.setUniform('uTime', t)

  rect(0, 0, width, -height)

  pop()

}