Stacked Layers

← All Butter documentation

Pair this with the Flip Horizontal effect to add motion!

let img
let layers
let spread
async function setup() {
  img = await loadImageOrVideo('')
  layers = createSlider(1, 100, 50, 1)
  spread = createSlider(50, 500, 200, 1)
  createCanvas(windowWidth, windowHeight, WEBGL)
}
function draw() {
  clear()
  orbitControl()
  imageMode(CENTER)

  for (let i = 0; i < layers.value(); i++) {
    const t = 1 - i/layers.value()
    push()
    translate(0, 0, (t - 0.5) * spread.value())
    tint(255, 255 * (5 / (5 + layers.value())))
    drawTransparent(() => {
      image(
        img,
        0, 0, width/2, height/2,
        0, 0, img.width, img.height,
        COVER
      )
    })
    pop()
  }
}