Stacked Layers
← All Butter documentationPair 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()
}
}
