Generative artist, sharing my journey in visual experiments.
p = getRandomPalette()
palette = shuffle(p)
bnb({
w, h,
webgl: true,
numFrames: 60,
loops: 3,
fps: 25,
record: true,
// video: 'mp4',
shutterAngle: 0.4,
samplesPerFrame: 16,
preload: (s, g) => {
g.pg = s.createGraphics(540, 540)
},
setup: (s, g) => {
g.palette = getRandomPalette()
s.sh = s.createShader(vertexShader(), fragmentShader())
s.shader(s.sh)
s.sh.setUniform('u_resolution', [w, h])
},
draw: (s, t, g) => {
if(g.frame === 0) {
g.palette = getRandomPalette()
s.sh.setUniform('u_background', hexToRgb(g.palette[0]).map(d => d / 255))
const arr = []
divideRect(0, 0, w, h, 10, arr, 1)
g.rects = arr.map(r => new Rect(r.x, r.y, r.w, r.h, g))
}
g.pg.background(g.palette[0])
g.rects.forEach(r => r.display(g.pg, t))
s.sh.setUniform('u_time', t)
s.sh.setUniform('u_texture', g.pg)
s.background(g.palette[0])
s.noStroke()
s.beginShape()
s.vertex(-1, -1)
s.vertex(1, -1)
s.vertex(1, 1)
s.vertex(-1, 1)
s.endShape(s.CLOSE)
}
})
class Rect {
constructor(x, y, w, h, g) {
this.x = x
this.y = y
this.w = w
this.h = h
this.c = g.palette[randInt(g.palette.length)]
this.offset = random(.1)
// this.offset = map(x + y, 0, 1080, .1, 0)
}
display(s, t) {
const tt = s.abs(t + this.offset) % 1
const h = easing.easeBounceOut(linearstep(tt, .1, .5)) * this.h
const x = ease(linearstep(tt, .6, .75), 2) * this.w
const sw = ease(linearstepUpDown(tt, .1, .4, .6, .75), 2) * 1.5
s.strokeWeight(sw)
s.stroke(22)
s.fill(this.c)
s.rect(this.x + x, this.y, this.w - x, h)
}
}
plot(x => ease(linearstepUpDown(x, 0.2, 0.5, 0.65, 0.85), 2), {zoom:[-0.01, 1.01], play: false})
easing
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.
