Creative coder based in Paris
Published
Edited
Jun 30, 2022
1 star
w = 1080
h = 1920
p = getRandomPalette()
//palette = shuffle(p)
palette = ['#fcfcfc', '#000000', '#00ff00', '#0000ff', '#ff0000']
displayPalettes(palette)
bnb({
w, h,
numFrames: 600,
fps: 60,
//record: true,
//video: true,
//webgl: true,
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) => {
//s.background(palette[0])
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.rectMode(s.CENTER);
s.blendMode(s.SOFT_LIGHT);
//if(t1 > 0) {
//s.background(palette[0])
//s.blendMode(s.SCREEN);
//s.blendMode(s.SOFT_LIGHT);
//} else {
//s.blendMode(s.BLEND);
//}
s.pop()
let rot = s.PI*-0.05 * t0_eased;
s.translate(w/2, h/2);
//s.rotate(rot);
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);
//let tt = (t + item.x/h*0.9) % 1;
//const offsetX = 0
//const offsetY = 0
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//s.lerp(0, g.finalRots[i], tt);//-t;
const xx = item.x +offsetX + item.w/2 * 0;
const yy = item.y + offsetY + item.h/2 * 0;
s.fill(col);
//s.push()
//s.translate(xx + item.w/2, yy + item.h/2);
//s.rotate(rot);
s.rect(xx, yy, (item.w + 1), (item.h + 1));
//s.rotate(-rot);
//s.translate(-xx - item.w/2, -yy - item.h/2);
//s.pop()
}
s.pop()
if (g.record) {
s.save("myproject-frame-" + s.frameCount + ".jpg")
//check to see if the loop is done and stop the draw loop!
if (s.frameCount === 600){
console.log('loop is done');
s.noLoop();
}
}
}
})
import {bnb} from '@makio135/bnb'
import {random, randInt, array, shuffle, linearstep, linearstepUpDown, divideRect} from '@makio135/utilities'
import {getRandomPalette, displayPalettes, scales, ramp} from '@makio135/give-me-colors'
easing = require('d3-ease')
import {shaders} from '@makio135/shaderpass'
PRNG = require('https://bundle.run/prng@0.0.1')
seededRandom = (seed) => {
const prng = new PRNG(seed)
return (a, b) => {
const n = 100000
if(b) return prng.rand(a * n, b * n) / n
if(a) return prng.rand(a * n) / n
return prng.rand(n) / n
}
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
