Generative artist, sharing my journey in visual experiments.
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'
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.