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 CirclesHypnoloopDancing AlienAnimated 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 Ball
noisy grid
p = getRandomPalette()
palette = shuffle(p)
seed = Date.now()
noiseSeed = Date.now()
bnb({
w: 540, h: 540,
numFrames: 120,
fps: 20,
record: true,
webgl: true,
// video: 'mp4',
preload: (s, g) => {
// g.img = s.loadImage('https://i.imgur.com/96WfzWJ.jpg')
g.img = s.loadImage(`https://source.unsplash.com/featured?skyline,buildings,${Date.now()}`)
console.log(g.img.width)
g.rects = []
const cosT = s.cos(0) * 10
const sinT = s.sin(0) * 10
const prng = new PRNG(seed)
const divide = (x, y, w, h, step) => {
if (step > 0 && prng.rand(3 + step) > .5) {
let n = simplex.noise4D(x / 150, y / 150, cosT / (step ** 2), sinT / (step ** 2)) * .5 + .5
step--
if (prng.rand() < .5) {
divide(x, y, w * n, h, step)
divide(x + w * n, y, w * (1 - n), h, step)
} else {
divide(x, y, w, h * n, step)
divide(x, y + h * n, w, h * (1 - n), step)
}
}
else {
g.rects.push({
x: x,
y: y,
w: w,
h: h
})
}
}
divide(0, 0, g.w, g.h, 12)
},
draw: (s, t, g) => {
s.translate(-g.w/2, -g.h/2)
//t = ease(t)
const cosT = s.cos(t * TAU) * 10
const sinT = s.sin(t * TAU) * 10
const prng = new PRNG(seed)
s.noStroke()
s.drawingContext.shadowColor = s.color(0, 0, 0, 45);
s.drawingContext.shadowBlur = 25;
let index = 0
const divide = (x, y, w, h, step) => {
s.drawingContext.shadowOffsetX = step * 2;
s.drawingContext.shadowOffsetY = step * 2;
if (step > 0 && prng.rand(3 + step) > .5) {
let n = simplex.noise4D(x / 150, y / 150, cosT / (step ** 2), sinT / (step ** 2)) * .5 + .5
step--
if (prng.rand() < .5) {
divide(x, y, w * n, h, step)
divide(x + w * n, y, w * (1 - n), h, step)
} else {
divide(x, y, w, h * n, step)
divide(x, y + h * n, w, h * (1 - n), step)
}
}
else {
const r = g.rects[index]
//s.fill(palette[prng.rand(palette.length-1)])
s.texture(g.img)
s.beginShape()
s.vertex(x, y, r.x/g.w * g.img.width, r.y/g.h * g.img.height)
s.vertex(x+w, y, r.x/g.w * g.img.width + r.w/g.w * g.img.width, r.y/g.h * g.img.height)
s.vertex(x+w, y+h, r.x/g.w * g.img.width + r.w/g.w * g.img.width, r.y/g.h * g.img.height + r.h/g.h * g.img.height)
s.vertex(x, y+h, r.x/g.w * g.img.width, r.y/g.h * g.img.height + r.h/g.h * g.img.height)
s.endShape(s.CLOSE)
index ++
}
}
divide(0, 0, g.w, g.h, 12)
}
})
shaderPass = () => `
precision mediump float;
#define AA 3
#define PI 3.141592653589793
uniform vec2 u_resolution;
uniform vec3 u_background;
uniform sampler2D u_texture;
uniform float u_time;
// from https://github.com/doxas/twigl
mat2 rotate2D(float r){
return mat2(cos(r), sin(r), -sin(r), cos(r));
}
float map(float n, float start1, float stop1, float start2, float stop2) {
return (n - start1) / (stop1 - start1) * (stop2 - start2) + start2;
}
void main() {
vec3 tot = vec3(0.);
#if AA>1
for( int m=0; m<AA; m++ )
for( int n=0; n<AA; n++ ) {
// pixel coordinates
vec2 o = vec2(float(m),float(n)) / float(AA) - 0.5;
vec2 uv = (-u_resolution.xy + 2.0*(gl_FragCoord.xy+o))/u_resolution.y;
#else
vec2 uv = (-u_resolution.xy + 2.0*gl_FragCoord.xy)/u_resolution.y;
#endif
uv *= rotate2D(-PI / 2.);
uv *= .75;
float r = length(uv);
vec3 col = texture2D(u_texture, vec2(r, map(atan(uv.y, uv.x), -PI, PI, 0., 1.))).rgb;
tot += col;
#if AA>1
}
tot /= float(AA*AA);
#endif
gl_FragColor = vec4(tot, 1.);
}`
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.
