Genuary 5: Isometric

let cube

let geom

let distort

​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL)

  cube = makeCube(40)

  geom = buildGeometry(() => {

    noStroke()

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

      push()

      fill(random(["#f4f3ed", "#efc807", "#ed5d53", "#e2dbb5", "#45291c", "#080b0f"]))

      const wOff = random(-1, 1)*width*0.1

      translate(-wOff/2, map(i, 0, 40, height * 0.2, -height * 0.2))

      scale(width * 0.25 + wOff, height*0.4/41, width * 0.5)

      model(cube)

      pop()

    }

  })

  distort = createWarp(({ glsl, millis, position }) => {

    const t = millis.div(1000)

    let pos = position.add(glsl.vec3(

      0,

      t.mult(0.5).add(position.x().add(position.z().mult(0.5)).mult(0.02)).sin().mult(10.15),

      0

    ))

    pos = pos.add(glsl.val(0), pos.z().mult(0.05).sin().mult(13), glsl.val(0))

    return pos.sub(position)

  }, { space: 'world' })

}

​

function draw() {

  background('#FBA4BC')

  ortho()

  orbitControl()

  push()

  ambientLight(200)

  directionalLight(255, 255, 255, -0.4, 0, 1)

  directionalLight(255, 255, 255, 0.4, 0, 1)

  directionalLight(255, 255, 255, 0, -0.4, 1)

  directionalLight(255, 255, 255, 0, 0.4, 1)

  pointLight(100, 100, 100, width*0.2, -height*1.2, width*1.2)

  specularMaterial(10)

  shininess(10)

  distort()

  rotateX(-PI/8)

  rotateY(millis() * 0.0001)

  model(geom)

  pop()

}