Generative artist, sharing my journey in visual experiments.
prngSeed = params.prngSeed || Date.now()
simplexSeed = params.simplexSeed || Date.now()
p = params.p || getRandomPalette()
palette = params.palette || shuffle(p)
// palette = ["#283149", "#404b69", "#f73859", "#dbedf3"]
// palette = shuffle(colorhunt[48])
render = bnb({
w, h,
// w: w * 2, h: h * 2,
numFrames: 60,
fps: 20,
record: true,
video: 'mp4',
// samplesPerFrame: 8,
// shutterAngle: .2,
preload: (s, g) => {
g.hexgrid = new HexGrid(50, 50, g.w, g.h, 30, 'pointy')
class Hex {
constructor(c) {
this.x = c.x
this.y = c.y
this.color = palette[prng.rand(1, palette.length - 1)]
this.offset = simplex.noise2D(this.x / 400, this.y / 400) * .5 + .5
}
display(s, t) {
t = (t + this.offset) % 1
s.push()
s.noStroke()
// s.stroke(this.color)
// s.strokeWeight(.5 - easings.easeCubicInOut(linearstep(t, .7, .8)) * .5)
s.fill(this.color)
// s.fill(255)
s.translate(this.x, this.y)
s.beginShape(s.QUAD_STRIP)
for(let i = 0; i <= 6; i ++) {
const v = PVector.lerp(PVector(), g.hexgrid.hexPoints[i % 6], easings.easeCubicInOut(linearstep(t, 0, .5)))
s.vertex(v.x, v.y)
const v2 = PVector.lerp(PVector(), g.hexgrid.hexPoints[i % 6], easings.easeCubicInOut(linearstep(t, .3, .8)))
s.vertex(v2.x, v2.y)
}
s.endShape()
s.pop()
}
}
g.hex = g.hexgrid.centers.map(c => new Hex(c))
},
draw: (s, t, g) => {
s.background(palette[0])
// s.background(33)
// s.drawingContext.globalCompositeOperation = 'xor'
// s.translate(s.random(-.6,.6), s.random(-.6,.6))
s.translate((g.w - g.hexgrid.w)/2 - g.hexgrid.x, (g.h - g.hexgrid.h)/2 - g.hexgrid.y)
s.scale(2)
s.push()
s.translate(-100, -100)
s.scale(4)
g.hex.forEach(h => h.display(s, t))
s.pop()
s.push()
s.scale(2)
g.hex.forEach(h => h.display(s, t))
s.pop()
g.hex.forEach(h => h.display(s, t))
}
})
quint = easings.easePolyInOut(5)
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.
