everything on this page is running, not rendered

Three ways to find a path.One of them is smart.

The same grid, the same start and goal, three search algorithms racing side by side. Watch how much of it each one has to search before finding the answer — then draw your own walls and make it harder.

speed

BFS0explored…cost

Uninformed, ignores weights — fewest cells, not cheapest.

Dijkstra0explored…cost

Weighted and optimal, but expands in every direction.

A*0explored…cost

Same optimal path, guided by a Manhattan heuristic.

Paint on any grid to edit all three. They share one terrain.

01 / systems

Our own infrastructure, checked live.

Both services are probed from the server rendering this page. The numbers below were measured seconds ago — including the ones that make us look bad.

connecting…

Probed server-side every 20s from the edge region serving this page. Percentiles are over your session, not ours.

02 / graphics

A fragment shader you can break.

Domain-warped fractal noise, evaluated per pixel per frame on the GPU. Edit the GLSL and it recompiles — mistakes included, with the driver's real error message.

compiled0 fps

fragment.glsl60 lines

#version 300 es
precision highp float;

uniform vec2  u_resolution;
uniform float u_time;
uniform vec2  u_mouse;

out vec4 outColor;

// Cheap value noise, smoothed.
float hash(vec2 p) {
  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
}

float noise(vec2 p) {
  vec2 i = floor(p);
  vec2 f = fract(p);
  vec2 u = f * f * (3.0 - 2.0 * f);
  return mix(mix(hash(i), hash(i + vec2(1, 0)), u.x),
             mix(hash(i + vec2(0, 1)), hash(i + vec2(1, 1)), u.x), u.y);
}

// Fractal brownian motion — noise stacked at halving amplitudes.
float fbm(vec2 p) {
  float total = 0.0;
  float amp = 0.5;
  for (int i = 0; i < 5; i++) {
    total += noise(p) * amp;
    p *= 2.02;
    amp *= 0.5;
  }
  return total;
}

void main() {
  vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution) / u_resolution.y;
  float t = u_time * 0.06;

  // Warp the domain with more noise, then sample again.
  vec2 q = vec2(fbm(uv * 2.2 + t), fbm(uv * 2.2 + vec2(4.3, 1.7) - t));
  vec2 r = vec2(fbm(uv * 2.4 + 3.0 * q + vec2(1.7, 9.2)),
                fbm(uv * 2.4 + 3.0 * q + vec2(8.3, 2.8)));
  float f = fbm(uv * 2.0 + 3.5 * r);

  vec3 deep   = vec3(0.031, 0.043, 0.063);
  vec3 cyan   = vec3(0.369, 0.918, 0.831);
  vec3 violet = vec3(0.894, 0.365, 1.000);

  vec3 col = mix(deep, violet, clamp(f * f * 2.4, 0.0, 1.0));
  col = mix(col, cyan, clamp(length(r) * 0.85, 0.0, 1.0));

  // Lift the area around the pointer.
  vec2 m = (u_mouse - 0.5 * u_resolution) / u_resolution.y;
  col += 0.10 * cyan * smoothstep(0.55, 0.0, length(uv - m));

  // Vignette.
  col *= 1.0 - 0.55 * length(uv * vec2(0.75, 1.0));

  outColor = vec4(col, 1.0);
}

We teach this, badly at first, until it clicks.

The workshop is where the above starts — hands-on sessions on frontend and backend, with a terminal and a live editor you can poke at right now.

~$cd workshop↵