2b:null 2c:["$","title",null,{"children":"Wada Basins | Mike Bostock | Observable"}] 31:T52b,A basin is a set of starting conditions that eventually lead to the same outcome. For example, if a particle can eventually end up in one of three different states, we can color its starting position according to which state it reaches. Wada basins have a particularly interesting property: the boundary between the basins is shared by all of them. That means that arbitrarily close to a point on the boundary, there are points belonging to each of the different basins. In the real world, you can create something similar by placing four metal spheres in a tetrahedral arrangement, with a different colored light or surface on each side of the tetrahedron. Light entering the system is reflected between the spheres, potentially an enormous number of times. These repeated reflections create the complex basin-like patterns produced by the different outcomes. The shader above recreates this idea using GLSL. The tetrahedron is closed, and rays enter the space from the camera and are repeatedly reflected from its surfaces. Each surface is associated with a different color.

---32:Tadb,renderer = { const renderer = new THREE.WebGLRenderer({ antialias: false, preserveDrawingBuffer: true }); const canvas = renderer.domElement; canvas.style.imageRendering = "pixelated"; canvas.style.maxWidth = "100%"; canvas.style.borderRadius = "8px"; container.replaceChildren(canvas); renderer.canvas = canvas; const camera = new THREE.PerspectiveCamera(45, 1, 0.5, 64); camera.position.set(0, 0, 3); let needsRender = true; const controls = new THREE.OrbitControls(camera, canvas); controls.addEventListener("change", () => { needsRender = true; }); const scene = new THREE.Scene(); const vs = ` varying vec3 vP; varying vec3 vW; varying vec3 vN; varying mat4 vM; void main() { vP = position; vN = normal; vW = (modelMatrix*vec4(position,1)).xyz; vM = projectionMatrix*modelViewMatrix; gl_Position = projectionMatrix*modelViewMatrix*vec4(position,1); }`; const cube = new THREE.Mesh( new THREE.BoxGeometry(2, 2, 2), new THREE.ShaderMaterial({ vertexShader: vs, fragmentShader: "void main(){}", transparent: true, side: THREE.DoubleSide, uniforms: { iTime: { value: 0 }, iPerspective: { value: true } } }) ); renderer.cube = cube; scene.add(cube); let running = true; const loop = () => { if (!running) return; if (needsRender) { needsRender = false; renderer.render(scene, camera); } requestAnimationFrame(loop); }; loop(); renderer.update = () => { needsRender = true; }; const resize = (w, h, r = 1) => { renderer.setPixelRatio(r); renderer.setSize(w,h,false); const a = w / h; camera.aspect = a; camera.zoom = a <= 1 ? a : 1; camera.updateProjectionMatrix(); renderer.render(scene, camera); }; const resizeEvent = () => { const z = Math.min(container.getBoundingClientRect().width, 512 * 1.40625); const w = z; const h = z * 0.75; resize(w, h, devicePixelRatio); }; window.addEventListener("resize", resizeEvent); resizeEvent(); renderer.resize = resize; renderer.resizeEvent = resizeEvent; invalidation.then(() => { running = false; window.removeEventListener("resize", resizeEvent); controls.dispose(); scene.traverse((obj) => { if (obj.isMesh || obj.isSprite || obj.isLine) { if (obj.geometry) obj.geometry.dispose(); if (obj.material) { if (Array.isArray(obj.material)) { obj.material.forEach((m) => m.dispose()); } else { obj.material.dispose(); } } } }); renderer.dispose(); if (renderer.forceContextLoss) renderer.forceContextLoss(); }); return renderer; }33:Tbdf,viewof shader = { const shader = ` uniform float iTime; #define PI 3.14159265 #define EPS 0.001 #define MAX 16 // https://iquilezles.org/articles/intersectors/ vec2 sphere(vec3 o, vec3 d, vec3 c) { o -= c; float b = dot(o,d); float h = b*b-dot(o,o)+1.0; if (h<0.0) return vec2(-1); h = sqrt(h); return vec2(-b-h,-b+h); } float triangle(vec3 o, vec3 d, vec3 a, vec3 b, vec3 c) { vec3 n = cross(b-a,c-a); vec3 q = cross(o-a,d); float f = 1.0/dot(d,n); if (f>=0.0) return -1.0; float u = f*dot(-q,c-a); float v = f*dot( q,b-a); if (u<0.0||v<0.0||u+v>1.0) return -1.0; return f*dot(-n,o-a); } vec3 vertex(int i) { const float s = sqrt(0.5); return vec3( (i==0||i==3)?s:-s, (i==0||i==2)?s:-s, (i==0||i==1)?s:-s ); } void mainCube(out vec4 fragColor, vec3 ro, vec3 rd) { ro *= 4.0; vec3 col = vec3(0); vec3 tp = vec3(1); for (int i=0;i0.0&&h0.0&&tt3.0) { int f = int(id)-4; int i0 = (f==0||f==1||f==2)?0:1; int i1 = (f==0)?1:(f==1)?3:(f==2)?2:3; int i2 = (f==0)?2:(f==1)?1:(f==2)?3:2; vec3 n = normalize(cross( vertex(i1)-vertex(i0), vertex(i2)-vertex(i0) )); rd = reflect(rd,n); col += 0.125*tp* (f==0?${color0} :f==1?${color1} :f==2?${color2} :${color3}); } else { vec3 n = normalize(ro-vertex(int(id))); rd = reflect(rd,n); tp *= 0.9; } } fragColor = vec4(clamp(col,0.0,1.0),1); }`; const fs = ` varying vec3 vP; varying vec3 vW; varying vec3 vN; varying mat4 vM; uniform bool iPerspective; ${shader} void main() { vec3 ro = cameraPosition; vec3 rd; if (iPerspective) { rd = normalize(vW - ro); } else { ro = vW; rd = normalize(vec3(vM[0][2],vM[1][2],vM[2][2])); } mainCube(gl_FragColor, ro, rd); } `; const material = renderer.cube.material; if (material.fragmentShader !== fs) { material.fragmentShader = fs; material.needsUpdate = true; renderer.update(); } return glsl("shader", shader); }34:[{"id":"e971b12f44a82382624328e1b7da011a316d7b61a3026abddfe1552b0c81c3744e4c603ef650298e112ecad6ba04d78fcee64a2ecfa4507e11cb934f7cf6dba5","href":"https://static.observableusercontent.com/files/e971b12f44a82382624328e1b7da011a316d7b61a3026abddfe1552b0c81c3744e4c603ef650298e112ecad6ba04d78fcee64a2ecfa4507e11cb934f7cf6dba5","name":"e6525795de5669ee2d584879e421a2eca621d78d08dd3772e418c254348acc8948a6d906463d392d69aaa30a1a62c89de4dd04d9bf80fa76cf1a2a2d25b2bc15.png","type":"image/png","lastModified":1789658729409.573,"size":127659}] 2f:{"id":"af95f28e8796f8d6","slug":null,"title":"Wada Basins","thumbnail":null,"access_level":"unlisted","create_time":"$D2026-09-17T19:21:25.816Z","update_time":"$D2026-09-17T19:23:47.198Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":{"id":"2bedbc25317ac7b0","slug":"wada-basins","title":"Wada Basins","owner":{"id":"d6840fab65eebcab","login":"nxrix","name":"nxrix"}},"stars":2,"starred":false,"owner":{"type":"team","id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":"pro_2026"},"version":348,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}],"members":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Wada Basins","cells":[{"id":0,"value":"# Wada Basins","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"container = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"{\n const i = Inputs.number({\n placeholder: \"Size\",\n value: 1024,\n min: 1,\n step: 1\n });\n const d = Inputs.button(\"Download PNG\", {\n reduce() {\n const a = document.createElement(\"a\");\n const s = Number(i.value) || 1024;\n renderer.resize(s, (s * 3) / 4, 1);\n a.href = renderer.canvas.toDataURL();\n renderer.resizeEvent();\n a.download = `wada-basins.png`;\n a.click();\n }\n });\n i.style.width = \"100px\";\n return html`

${i}${d}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"const c0 = view(Inputs.color({value: \"#0ff\"}));\nconst c1 = view(Inputs.color({value: \"#f0f\"}));\nconst c2 = view(Inputs.color({value: \"#ff0\"}));\nconst c3 = view(Inputs.color({value: \"#000\"}));","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"splot(`\n void mainImage(out vec4 fragColor, vec2 uv) {\n vec2 z = uv;\n float iter = 32.0;\n float lm = 1.0;\n for (int i = 0; i < 32; i++) {\n vec2 z2 = vec2(\n z.x * z.x - z.y * z.y,\n 2.0 * z.x * z.y\n );\n vec2 f = vec2(\n z2.x * z.x - z2.y * z.y - 1.0,\n z2.x * z.y + z2.y * z.x\n );\n lm = length(f);\n z -= vec2(\n f.x * z2.x + f.y * z2.y,\n f.y * z2.x - f.x * z2.y\n ) / (3.0 * dot(z2, z2));\n if (lm < 0.001) {\n iter = float(i);\n break;\n }\n }\n float s = iter;\n if (lm > 0.0) s -= log2(max(log2(2.0/lm),0.0001));\n float t = s / 32.0;\n float angle = atan(z.y,z.x);\n float root = angle/(2.0*3.14159265);\n float p = t*0.5+root;\n vec3 col = cos(6.2831853*(p+vec3(0.25,0.125,0).zyx))*0.5+0.5;\n fragColor = vec4(col,1);\n }`,{\n width: 512\n})","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"Another place where this idea appears is in Newton's fractal. It can be created by plotting which root each point converges to when applying Newton's method to the polynomial ${tex`z^3 - 1`}.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":78,"value":"function toVec(color: string) {\n const r = parseInt(color.slice(1, 3), 16);\n const g = parseInt(color.slice(3, 5), 16);\n const b = parseInt(color.slice(5, 7), 16);\n return `vec3(${r / 255},${g / 255},${b / 255})`;\n}\n\nconst color0 = toVec(c0);\nconst color1 = toVec(c1);\nconst color2 = toVec(c2);\nconst color3 = toVec(c3);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"glsl = (l = \"\", t) => {\n return Object.assign(md`\\`${l} = glsl(~)\\``, { value: t });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"THREE = {\n try {\n const THREE = await import(\"three@0.184.0\");\n const { OrbitControls } = await import(\n \"three@0.184.0/examples/jsm/controls/OrbitControls.js\"\n );\n return { ...THREE, OrbitControls };\n } catch (e) {\n // IOS 15 issue\n const THREE = await import(\"https://esm.sh/three@0.184.0?target=es2020\");\n const { OrbitControls } = await import(\n \"https://esm.sh/three@0.184.0/examples/jsm/controls/OrbitControls.js?target=es2020\"\n );\n return { ...THREE, OrbitControls };\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"import { splot } from \"@nxrix/plot-shader-mark\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"2","titling":"auto"}} 30:"$2f:body"