Generative artist, sharing my journey in visual experiments.
Genuary 2023 #1: Perfect LoopHomage to De StijlGenerative Loop templateHexgridsNoisy Blob Point CloudXOR HexgridRecursive Grid, Clipping and NoiseAnimating Planet-Fbnb utility exampleAnimated stripes gifs from scalar fieldsSquare noiseGrowing Spaces, the animated versionEndless tunnelUntitledAnimated Blobby CirclesHypnoloopAnimated Paper WavesAbstract Mecha, animated versionThis is only platonicRubick's cube, but easier :)XORBouncing BoxesStraight lines in a polar worldBNB x ShadersA wild Torus appearedSpinning CubesWavy HexagonCurvy LinesHello bnbMulti-scale Truchet patternsUntitledFurry Ballnoisy grid
Dancing Alien
seed = Date.now()
bnb({
w: 800,
h: 800,
numFrames: 120,
play: true,
record: true,
fps: 24,
shutterAngle: .8,
samplesPerFrame: 12,
chromaticAberration: .5,
// preview: 20,
// video: true,
globals: {
noiseRadius: .3,
nSteps: 37*2,
stepLength: 5,
noiseScale: 850,
nStarts: 1500,
startRadius: 540*.35*1.2,
},
setup: (s, g) => {
s.background(0)
},
draw: (s, t, g) => {
s.noStroke()
s.fill(0, 50)
s.rect(0, 0, s.width, s.height)
const angle = t * s.TAU
const cosT = s.cos(angle) * g.noiseRadius
const sinT = s.sin(angle) * g.noiseRadius
s.noFill()
s.stroke(255, 20)
for(let j = 0; j < g.nStarts; j ++) {
const anglej = s.TAU / g.nStarts * j
const v = s.createVector(s.width/2 + s.cos(anglej) * g.startRadius, s.height/2 + s.sin(anglej) * g.startRadius)
s.beginShape()
s.vertex(v.x, v.y)
for(let i = 0; i < g.nSteps; i++) {
const anglei = simplex.noise4D(v.x/g.noiseScale, v.y/g.noiseScale, cosT, sinT + s.sin(anglej)/1000) * s.TAU * 2
const vi = s.createVector(g.stepLength, 0).rotate(anglei)
v.add(vi)
s.vertex(v.x, v.y)
}
s.endShape()
}
}
})
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.
