Generative artist, sharing my journey in visual experiments.
Public
Edited
Dec 14, 2022
12 forks
Importers
580 stars
svg`<svg width="100%" height="300" style="background: black">
<circle cx="50%" cy="50%" r="100" fill="white" />
</svg>`
svg`<svg width="100%" height="300" style="background: black">
${(() => {
const circles = []
for(let i = 0; i <= 10; i ++) {
circles.push(`<circle
cx="${25 + i * 5}%"
cy="50%"
r="100"
fill="hsl(${i * 36}, 100%, 50%)"
opacity=".6"
/>`)
}
return circles.join('')
})()}
</svg>`
await visibility(), // cell starts running when entering the viewport @observablehq/awaiting-visibility
svg`<svg width="100%" height="300" style="background: black">
${(() => {
const circles = []
for(let i = 0; i <= 10; i ++) {
circles.push(`<circle
cx="${25 + i * 5}%"
cy="${50 + Math.sin(i/10 * Math.PI * 2 + now/500) * 15}%"
r="${55 + Math.cos(i/10 * Math.PI * 2 + now/1200) * 45}"
fill="hsl(${i * 36}, 100%, 50%)"
opacity=".7"
/>`)
}
return circles.join('')
})()}
</svg>`
await visibility(), p5(sketch => {
sketch.setup = () => {
sketch.createCanvas(width, 300)
}
sketch.draw = () => {
sketch.background(0)
sketch.noStroke()
sketch.drawingContext.globalAlpha = .6
const n = 20
for(let i = 0; i <= n; i++) {
sketch.fill(`hsl(${i/n * 360 | 0}, 100%, 50%)`)
const x = sketch.width/4 + i/n * sketch.width/2
const y = 150 + Math.sin(i/n * Math.PI * 2 + sketch.millis()/500) * 45
const r = 55 + Math.cos(i/n * Math.PI * 2 + sketch.millis()/1200) * 45
sketch.circle(x, y, r * 2)
}
}
})
await visibility(), bnb({
w: width,
h: 300,
numFrames: 120,
fps: 30,
record: true,
video: 'mp4',
draw: (sketch, time) => {
sketch.background(0)
sketch.noStroke()
sketch.drawingContext.globalAlpha = .6
const n = 20
for(let i = 0; i <= n; i++) {
sketch.fill(`hsl(${i/n * 360 | 0}, 100%, 50%)`)
const x = sketch.width/4 + i/n * sketch.width/2 + Math.sin(i/10 + time * sketch.TAU) * 50
const y = 150 + Math.sin(i/n * Math.PI * 2 + time * sketch.TAU * 2) * 45
const r = 55 + Math.cos(i/n * Math.PI * 2 + time * sketch.TAU) * 45
sketch.circle(x, y, r * 2)
}
}
})
await visibility(), raymarch({
antiAliasing: 2,
sceneSDF: `
${iqSDF.sdSphere()}
${iqSDF.sdBox()}
${iqSDF.opSmoothUnion()}
${iqSDF.opSymXYZ()}
${glslSnippets.rotate3D()}
vec2 sceneSDF(vec3 p) {
float d = sdBox(p, vec3(.6));
p *= rotate3D(u_time, vec3(1, 0, -1));
d = opSmoothUnion(d, sdSphere(opSymXYZ(p) - vec3(1.), .5), 1.1);
return vec2(d, u_time * 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.
