Genuary 12: Packing

let bgColor

let balls

let cubeShader

let canvas

let rawReflections

let reflections

const boxR = 200

​

function preload() {

  rawReflections = loadImage('studio_small_08-min.jpg')

}

​

function setup() {

  canvas = createCanvas(600, 600, WEBGL)

  cubeShader = createShader(cubeVert, cubeFrag)

  const reflectionGraphic = createGraphics(600, 600*rawReflections.height/rawReflections.width)

  reflectionGraphic.background(0)

  reflectionGraphic.drawingContext.filter = 'blur(20px)'

  reflectionGraphic.image(rawReflections, 0, 0, reflectionGraphic.width, reflectionGraphic.height)

  reflections = reflectionGraphic.get()

  reflectionGraphic.remove()

  drawingContext.enable(drawingContext.BLEND)

  bgColor = color('#f58486')

  genBalls()

}

​

function draw() {

  background(bgColor)

  rotateX(millis() * 0.00017)

  rotateY(millis() * 0.0001)

  noStroke()

  ambientLight(180)

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

  pointLight(100, 100, 100, 0, -height, width/8)

  push()

  drawingContext.enable(drawingContext.CULL_FACE)

  drawingContext.cullFace(drawingContext.BACK)

  specularMaterial(200, 200, 200, 50)

  shininess(80)

  //box(2 * boxR + 20, 2 * boxR + 20, 2 * boxR + 20)

  sphere(boxR + 20)

  drawingContext.disable(drawingContext.CULL_FACE)

  pop()

  for (const { x, y, z, r, color, shine } of balls) {

    push()

    translate(x, y, z)

    specularMaterial(color)

    shininess(shine)

    sphere(r)

    pop()

  }

  push()

  drawingContext.enable(drawingContext.CULL_FACE)

  drawingContext.cullFace(drawingContext.FRONT)

  shader(cubeShader)

  cubeShader.setUniform('backContent', canvas)

  cubeShader.setUniform('pixelSize', [width * pixelDensity(), height * pixelDensity()])

  cubeShader.setUniform('reflections', reflections)

  //box(2 * boxR + 20, 2 * boxR + 20, 2 * boxR + 20)

  sphere(boxR + 20, 36, 36)

  drawingContext.disable(drawingContext.CULL_FACE)

  pop()

}