Systems and interaction developer
SwissGL = fetch(
"https://raw.githubusercontent.com/google/swissgl/06e6c78441d2be2eb7427ec9f880b425cf7eb036/swissgl.js"
)
.then((d) => d.text())
.then((d) =>
eval(`(function() { ${d.replace(/(function SwissGL)/, "return $1")} })()`)
)
{
const canvas = DOM.canvas(600, 400);
const glsl = SwissGL(canvas);
function render(t) {
t /= 1000; // ms to sec
glsl({ t }, `UV,(sin(t*3.0)*sin(t*3.0)),1`);
// glsl({ t }, `UV,pow(cos(t*5.0),2.0),1`);
requestAnimationFrame(render);
}
render();
return canvas;
}
viewof repulsion = Inputs.range([0, 5], {value: 0.5, step: 0.01, label: "Repulsion"})
inertia = 0.8
{
const canvas = DOM.canvas(600, 600);
const glsl = SwissGL(canvas);
const worldExtent = 15;
function render(t) {
const K = 6; // number of particle types
const F = glsl(`
float(I.x==I.y) + 0.1*float(I.x==I.y+1)`,
{size:[K,K], format:'r16f'});
glsl({F}, `F(I/40).x*3.0`);
const points = glsl({size:[30,10], story:3, format:'rgba32f', tag:'points'});
for (let i=0; i<2; ++i) {
glsl({K, seed:123}, `
vec2 pos = (hash(ivec3(I, seed)).xy-0.5)*10.0;
float color = floor(UV.x*K);
out0 = vec4(pos, 0.0, color);`,
points);
}
function loop() {
const dt = 0.1;
glsl({F, worldExtent, repulsion, inertia, dt, // uniforms
// The current state of the system is implicitly
// available to the shader as 'Src' uniform if
// the target has history (is an array of textures).
// Here we explicitly pass the state one step at the past
past:points[1]}, `
// this function wraps positions and velocities to
// [-worldExtent/2, worldExtent/2] range
vec3 wrap(vec3 p) {
return (fract(p/worldExtent+0.5)-0.5)*worldExtent;
}
void fragment() {
// read the current particle state
out0 = Src(I);
vec3 force=vec3(0); // force accumulator
// iterate over particles
for (int y=0; y<ViewSize.y; ++y)
for (int x=0; x<ViewSize.x; ++x) {
// reading the state of another particle
vec4 data1 = Src(ivec2(x,y));
vec3 dpos = wrap(data1.xyz-out0.xyz);
// calculate distance
float r = length(dpos);
if (r>3.0) continue;
dpos /= r+1e-8;
// calculate repulsion and interaction forces
float rep = max(1.0-r, 0.0)*repulsion;
float f = F(ivec2(out0.w, data1.w)).x;
float inter = f*max(1.0-abs(r-2.0), 0.0);
force += dpos*(inter-rep);
}
// fetch the past state to compute velocity
vec3 vel = wrap(out0.xyz-past(I).xyz)*pow(inertia, dt);
// update particle position
out0.xyz = wrap(out0.xyz+vel+0.5*force*(dt*dt));
}
`, points); // using 'points' as the target
glsl({K, worldExtent, // uniforms
// reading the last state of 'points' texture
points: points[0],
// render a quad instance for every 'points' texel
Grid: points[0].size,
// preserve the scale of xy-axes by fitting
// [-1..1]x[-1..1] box into the view
Aspect:'fit',
// blend primitives using alpha transparency
Blend: 'd*(1-sa)+s*sa'}, `
// the code below is available in both
// vertex and fragment shaders
varying vec3 color;
//VERT start of vertex-only section
// vertex function is called
vec4 vertex() {
// get current particle data
vec4 d = points(ID);
// populate varyings to use in fragment shader
color = cos((d.w/K+vec3(0,0.33,0.66))*TAU)*0.5+0.5;
// emit normalized on-screen vertex position
// 'vec2 XY' is contains coordinates of the quad vertex in -1..1 range
return vec4(2.0*(d.xy+XY/8.0)/worldExtent, 0.0, 1.0);
}
//FRAG start of fragment-only section
void fragment() {
out0 = vec4(1.0);
// Compute the fragment transparency depending
// on the distance from the quad center.
// Interpolated XY is also available in the fragment shader.
float alpha = smoothstep(1.0, 0.6, length(XY));
// set the fragment color
out0 = vec4(color, alpha);
}`); // 'target' is omitted, so rendering to canvas
requestAnimationFrame(loop);
}
loop();
}
render();
return canvas;
}
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.