bnb({
w, h,
numFrames: 600,
fps: 60,
setup: (s, g) => {
g.record = true;
g.divisionCount = 15
const prng = seededRandom(404)
g.grid = [];
divideRect(w*0.25, h*0.25, w * 0.5, h * 0.5, g.divisionCount, g.grid, 0.98, prng);
g.fillColors = array(g.grid.length).map(d => randInt(1, palette.length))
g.offsetX = array(g.grid.length).map(d => s.sin(d) * 800)
g.offsetY = array(g.grid.length).map(d => s.cos(d) * 2000)
g.offset = array(g.grid.length).map((d, i) => random())
g.finalRots = array(g.grid.length).map((d, i) => random(0, s.PI*2))
s.background(palette[0])
},
draw: (s, t, g) => {
let t0 = linearstep(t, 0.1, 0.5);
let t1 = t = linearstep(t, 0.51, 1);
let t0_eased = easing.easeCubicInOut(t0);
let t1_eased = easing.easeCubicIn(t1);
s.blendMode(s.SOFT_LIGHT);
s.pop()
let rot = s.PI*-0.05 * t0_eased;
s.translate(w/2, h/2);
s.translate(-w/2, -h/2);
for (let i = 0; i < g.grid.length; ++i) {
const item = g.grid[i];
const dist = s.dist(item.x, item.y, w/2, h/2);
let tt = t0 - t1_eased;
const speedMultiplier = s.map(dist*2, 0, w*0.9, 2.1, 0.015);
s.noStroke();
const ratio = easing.easePolyOut(tt) * speedMultiplier * speedMultiplier;
const easedRatio = easing.easeCircleInOut(ratio);
const col = s.lerpColor(s.color(palette[1]), s.color(palette[g.fillColors[i]]), ratio)
const offsetX = g.offsetX[i] * ratio
const offsetY = g.offsetY[i] * ratio
const rot = 0
const xx = item.x +offsetX + item.w/2 * 0;
const yy = item.y + offsetY + item.h/2 * 0;
s.fill(col);
s.rect(xx, yy, (item.w + 1), (item.h + 1));
}
s.pop()
if (g.record) {
s.save("myproject-frame-" + s.frameCount + ".jpg")
if (s.frameCount === 600){
console.log('loop is done');
s.noLoop();
}
}
}
})