Creative coder based in Paris
Published
Edited
Jan 5, 2022
4 stars
w = 700
h = 700
p = getRandomPalette()
palette = shuffle(p)
displayPalettes(palette)
bnb({
w,
h,
fps: 20,
numFrames: 100,
chromaticAberration: .4,
shutterAngle: 1.3,
samplesPerFrame: 8,
//record: true,
//video: true,
shaderPass: [
shaders.radial(12, 0.7)
],
setup: (s, g) => {
g.circlesNumber = 1000;
g.offsetX = array(g.circlesNumber).map(d => random(0, w))
g.offsetY = array(g.circlesNumber).map(d => random(0, h))
g.colors = array(g.circlesNumber).map(d => randInt(1, palette.length))
g.offset = array(g.circlesNumber).map(d => random(-200, 200))
g.margin = array(g.circlesNumber).map(d => random(-100, 200))
g.radius = array(g.circlesNumber).map(d => random(1, 40))
},
draw: (s, t, g) => {
s.background(palette[0]);
s.noStroke();
s.blendMode(s.ADD);
for (let i = 1; i < g.circlesNumber; i++) {
t = (t + g.offset[i]) % 1;
const tt = easing.easeCubicIn(t);
const margin = g.margin[i]
const radius = g.radius[i]
s.push()
//s.translate(g.offsetX[i], g.offsetY[i]);
let col = s.lerpColor(s.color(palette[g.colors[i]]), s.color(palette[0]), tt);
s.fill(col);
s.translate(w/2, h/2);
//s.rotate(s.sin(i)*tt*0.01);
s.translate(-w/2, -h/2);
//let x1 = s.map(t, 0, 1, margin, w - margin)
//let x2 = s.map(t, 0, 1, margin - w, margin)
s.ellipse(g.offsetX[i], g.offsetY[i] * t, radius, radius*t)
//s.circle(w/2 + g.offsetX[i], h/2 + g.offsetY[i] * t, radius)
let y3 = s.map(tt, 0, 1, margin, h - margin)
let y4 = s.map(tt, 0, 1, h - margin, margin)
//s.circle(w - margin, y3, radius)
//s.circle(margin, y4, radius)
s.pop()
}
}
})
import {bnb} from '@makio135/bnb'
import {random, randInt, array, shuffle, linearstep, linearstepUpDown} from '@makio135/utilities'
import {getRandomPalette, displayPalettes, scales, ramp} from '@makio135/give-me-colors'
easing = require('d3-ease')
import {shaders} from '@makio135/shaderpass'
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.
