Generative artist, sharing my journey in visual experiments.
N = params.N || 300
prngSeed = params.prngSeed || Date.now()
simplexSeed = params.simplexSeed || Date.now()
p = params.p || getRandomPalette()
palette = params.palette || shuffle(p)
await visibility(), bnb({
w, h,
w: w * 2, h: h * 2,
// webgl: true,
numFrames: 180,
fps: 20,
record: true,
// video: 'mp4',
// shaderPass: shaders.triGrid(),
shaderPass: [shaders.grey(), shaders.negative(), shaders.dither(8)],
shutterAngle: .1,
//samplesPerFrame: 4,
//chromaticAberration: .6,
preload: (s, g) => {
const prng = new PRNG(prngSeed)
class Rect {
constructor({x, y, w, h, n}) {
this.n = n
this.x = x
this.y = y
this.w = w
this.h = h
this.color = palette[prng.rand(1, palette.length-1)]
}
display(s, t) {
const scale = 10000
let sinT = s.sin(t * TAU) * .4
let cosT = s.cos(t * TAU) * .4
const n = simplex.noise4D((this.x + this.w / 2)/scale + sinT, (this.y + this.h / 2)/scale + cosT, -cosT*sinT, sinT*sinT)
s.noStroke()
s.fill(this.color)
s.push()
s.translate(this.x, this.y)
// s.drawingContext.beginPath()
s.drawingContext.rect(0, 0, this.w, this.h)
s.drawingContext.clip()
s.translate(this.w / 2, this.h / 2)
s.rotate(TAU * modularDist(n + 1, 2))
s.beginShape()
s.vertex(-this.w / 4, -this.h * 2)
s.vertex(this.w / 4, -this.h * 2)
s.vertex(this.w / 4, this.h * 2)
s.vertex(-this.w / 4, this.h * 2)
s.endShape(s.CLOSE)
s.pop()
}
}
const rects = []
array(3).forEach(i => divideRect4(0, 0, g.w, g.h, 4 + i, rects, 70, () => prng.rand(100)))
g.rects = rects.map(r => new Rect(r)).sort((a, b) => b.n - a.n)
},
draw: (s, t, g) => {
s.background(palette[0])
// s.drawingContext.globalCompositeOperation = 'soft-light'
s.drawingContext.globalAlpha = .8
g.rects.forEach(r => r.display(s, t))
}
})
shaders
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.
