2c:null 2d:["$","title",null,{"children":"Cracked Ice | Laurence Gonsalves | Observable"}] 32:T905,{ replay; const points = genPoints(width, height); const n = points.length / 2; const context = DOM.context2d(width, height); context.lineCap = "round"; // Create network of movable vertices. const delaunay = new d3.Delaunay(points); const voronoi = delaunay.voronoi([-width*.5, -height*.5, width*2, height*2]); const verts = []; // vertex number to [x, y] const edges = []; // vertex number to set of neighboring edge vertex numbers { const index = new Map(); // [x, y] to vertex number for (let i = 0; i < n; ++i) { for (let v of voronoi.cellPolygon(i)) { index[v] = verts.length; verts.push(v); edges.push(new Set()) } } for (let i = 0; i < n; ++i) { const poly = voronoi.cellPolygon(i); for (let j = 0; j < poly.length; ++j) { const p1 = poly[j]; const p2 = poly[(j + 1) % poly.length]; if (p1 != p2 ) edges[index[p1]].add(index[p2]); } } } const a = []; for (let i = 0; i < verts.length; ++i) { a.push(i); } // Iterate cracked ice for (let i = 0; i < 100000; ++i) { // draw all edges context.clearRect(0, 0, width, height); context.lineWidth = 5; context.beginPath(); context.strokeStyle = "#936F62"; drawGraph(context, width, height, verts, edges); context.stroke(); context.lineWidth = 4; context.beginPath(); context.strokeStyle = "#66311E"; drawGraph(context, width, height, verts, edges); context.stroke(); yield context.canvas; shuffle(a); for (let v of a) { const neighbors = edges[v]; // pick segment to straighten let best = Math.PI; let best_j = -1; let best_k = -1; for (let j of neighbors) { for (let k of neighbors) { if (j == k) continue; const th_j = theta(verts[v], verts[j]); const th_k = theta(verts[v], verts[k]); const bent = Math.abs(normangle(th_j - th_k) - Math.PI); if (bent < best) { best = bent; best_j = j; best_k = k; } } } if (best_j < 0) continue; // straighten segment const old_v = verts[v]; verts[v] = project_on_segment(verts[v], verts[best_j], verts[best_k]); } } }33:T853,md`["Cracked ice"](https://www.google.com/search?q=chinese+cracked+ice+pattern&tbm=isch) (冰裂), is a decorative pattern traditionally used in Chinese window lattices, but also used for screens, wall-hangings, tables, cabinets and stair railings. It is traditionally made out of individual pieces of wood, but the pattern is also used in many other media including metal, textiles, wallpaper/paint, and ceramic glaze. I wanted to find a way to algorithmically generate cracked ice designs. One thing I'd noticed about the examples I'd seen is that at each intersection, there is always one "crack" that is straight. I'd had a few ideas to replicate this look that involved repeated subdividing of the plane, though these didn't really pan out, as they produce cracks that completely cut the plane, which is not typical of real cracked ice designs. One night I had a dream where I worked out the solution. Usually when I have dreams where I come up with programming solutions they don't actually work in the real world, but this idea worked. The basic idea is to start with a bunch of points, generate their voronoi diagram, and then progressively "straighten" the intersections in the resulting voronoi diagram. I'd originally written this a several years ago in Python, but wanted to try playing around with Observable and D3, so this seemed like a natural thing to port. This is my first attempt at anything using D3, and the first time I've coded in Javascript in about 10 years, so I'm sure there are many things that could be done in a more straightforward way, and I'm probably replicating a bunch of existing library routines. (eg: Where's all the vector math? Is that really the best way to extract the edges and vertices from a voronoi?) Suggestions for improving the code are welcome. This implementation staightens all vertices once per frame, but chooses a random order each frame. My initial set of points is just uniform random points. I was originally using the output of Lloyd's algorithm (hence the fork), but the "clumpiness" of uniform randomness actually seems to produce more interesting cracked ice. ` 34:[] 30:{"id":"64f2e7ba02e6613b","slug":"cracked-ice","title":"Cracked Ice","thumbnail":"e62f8f0a32222f176f2e2c135046f6f677105b9b83e5931a69d4f6a263ab32f3","access_level":"public","create_time":"$D2018-05-23T17:43:35.907Z","update_time":"$D2018-05-29T21:43:27.787Z","view_time":null,"first_public_time":"$D2018-05-29T18:15:44.972Z","has_unpublished_edits":null,"fork":{"id":"3e35d744eb6f5df2","slug":"lloyds-algorithm","title":"Lloyd’s Algorithm","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":5,"starred":false,"owner":{"type":"team","id":"8eef45de50ec3cef","login":"xenomachina","name":"Laurence Gonsalves","avatar_url":"https://avatars-next.observableusercontent.com/e0974bd5b92e2ff1d8f89535a0dda772192eb56ae8e1ec1528bc8dfd07c41d5c","tier":"starter_2024","bio":"Founder of Niphtio. he/him"},"version":278,"publish_version":278,"role":null,"authored":false,"authors":[{"type":"individual","id":"3ed78c3e175ccc1f","login":"xenomachina","name":"Laurence Gonsalves","avatar_url":"https://avatars-next.observableusercontent.com/e0974bd5b92e2ff1d8f89535a0dda772192eb56ae8e1ec1528bc8dfd07c41d5c","tier":null,"bio":"Founder of Niphtio. he/him"}],"members":[{"type":"individual","id":"3ed78c3e175ccc1f","login":"xenomachina","name":"Laurence Gonsalves","avatar_url":"https://avatars-next.observableusercontent.com/e0974bd5b92e2ff1d8f89535a0dda772192eb56ae8e1ec1528bc8dfd07c41d5c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Cracked Ice","cells":[{"id":0,"value":"md`# Cracked Ice`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"viewof replay = html`