34:I[204091,["/_next/static/immutable/chunks/0flq6dgj4r1ua.js"],"IconMark"] 2c:null 2d:["$","title",null,{"children":"Vines | Fabian Iwand | Observable"}] 32:T691,{ const size = 500, rng = seedrandom(''+seed), ctx = DOM.context2d(size, size); const points = Array.from({length: count}, () => { const a = rng()*Math.PI*2, r = rng()**(.5**p); return [(.5+.5*r*Math.cos(a))*size, (.5+.5*r*Math.sin(a))*size]; }); //points.push([0,0]); const links = new Map; for(let i = 0; i < points.length; i++) { const p = points[i]; const tree = d3.quadtree(points.filter(([x,y]) => x < p[0] && y < p[1])); const p2 = tree.find(...p); if(p2) links.set(p, p2); } const parents = new Set(links.values()); const leaves = new Set(Array.from(links.keys()).filter(p => !parents.has(p))); ctx.translate(size/2, size/2); ctx.scale(1, -1); ctx.rotate(Math.PI/4); ctx.translate(-size/2, -size/2); if(radius > 0) { ctx.beginPath(); for(const [x,y] of leaves) { ctx.moveTo(x + radius, y); ctx.arc(x, y, radius, 0, Math.PI*2); } ctx.fill(); } ctx.strokeStyle = '#000'; ctx.beginPath(); const mix = (a, b, t) => a + t * (b-a); const pmix = ([x1,y1], [x2,y2], t = .5) => [mix(x1,x2,t), mix(y1,y2,t)]; for(const [a, b] of links.entries()) { const c = links.get(b) || b; ctx.moveTo(...(leaves.has(a) ? a : pmix(a, b))); ctx.quadraticCurveTo(...b, ...pmix(b, c)); } ctx.stroke(); if(explain) { ctx.lineWidth = 2; ctx.strokeStyle = 'hsla(200,100%,50%,.5)'; const r = 3; ctx.beginPath(); for(const [x,y] of points) { ctx.moveTo(x + r, y); ctx.arc(x, y, r, 0, Math.PI*2); } for(const [a, b] of links) { ctx.moveTo(...a); ctx.lineTo(...b); } ctx.stroke(); } return ctx.canvas; }33:[] 30:{"id":"2984fb174e34b59e","slug":"qtc-vines","title":"Vines","thumbnail":"ee792d8b576a4d0c0be32d8f94a6d488b09102d8576d489c62a86d5c46f3c283","access_level":"public","create_time":"$D2021-03-23T19:38:34.265Z","update_time":"$D2021-05-13T20:44:42.498Z","view_time":null,"first_public_time":"$D2021-03-25T18:31:38.900Z","fork":false,"stars":41,"starred":false,"owner":{"type":"team","id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":"starter_2024"},"version":205,"publish_version":205,"role":null,"authored":false,"authors":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}],"members":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":10,"collection":{"id":"414312a67ea30ac3","slug":"generative","title":"Generative","owner":{"id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand"}},"type":"notebook","body":{"title":"Vines","cells":[{"id":0,"value":"md`# Vines`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":85,"value":"viewof seed = Inputs.Range([0, 10000], {value: 8, step: 1, label: 'Random seed'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":69,"value":"viewof count = Inputs.Range([10, 1500], {step: 1, value: 1000, label: 'Points'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":48,"value":"viewof p = Inputs.Range([.5, 3], {value:2, step:.001, label: 'Weight'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":75,"value":"viewof radius = Inputs.Range([0, 5], {step: .001, value: 3, label: 'Blossom radius'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":133,"value":"viewof explain = Inputs.Toggle({label: 'Show structure'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":175,"value":"md`---\n\n## Explanation\n\n1. Points are created randomly in a circular area.\n2. Each point's parent (or \"stem\") is determined by looking for the closest point^* below within a 90° cone^**.\n3. Points are connected by creating quadratic curves from and to the midpoints between each two points.\n\n^* Very inefficiently, by creating a new quadtree with all candidates for each point.\n\n^** Internally, we look for points with a lower x and y offset, and rotate the final output by 45°.\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"d3 = require('d3-quadtree@2')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"seedrandom = require('seedrandom')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":67,"value":"Inputs = require('@observablehq/inputs@0.7.22')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body" 25:null 29:[["$","title","0",{"children":"Vines | Fabian Iwand | Observable"}],["$","meta","1",{"property":"og:title","content":"Vines"}],["$","meta","2",{"property":"og:description","content":"An Observable notebook by Fabian Iwand"}],["$","meta","3",{"property":"og:url","content":"https://observablehq.com/@mootari/qtc-vines"}],["$","meta","4",{"property":"og:site_name","content":"Observable"}],["$","meta","5",{"property":"og:image","content":"https://static.observableusercontent.com/thumbnail/ee792d8b576a4d0c0be32d8f94a6d488b09102d8576d489c62a86d5c46f3c283.jpg"}],["$","meta","6",{"property":"og:image:width","content":"640"}],["$","meta","7",{"property":"og:image:height","content":"400"}],["$","meta","8",{"property":"og:type","content":"article"}],["$","meta","9",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","10",{"name":"twitter:title","content":"Vines"}],["$","meta","11",{"name":"twitter:description","content":"An Observable notebook by Fabian Iwand"}],["$","meta","12",{"name":"twitter:image","content":"https://static.observableusercontent.com/thumbnail/ee792d8b576a4d0c0be32d8f94a6d488b09102d8576d489c62a86d5c46f3c283.jpg"}],["$","meta","13",{"name":"twitter:image:width","content":"640"}],["$","meta","14",{"name":"twitter:image:height","content":"400"}],["$","link","15",{"rel":"icon","href":"/favicon.ico?favicon.2hqc0rwsy9zm6.ico","sizes":"96x96","type":"image/x-icon"}],["$","link","16",{"rel":"icon","href":"/icon.png?icon.1mhghqfpotdlb.png","sizes":"512x512","type":"image/png"}],["$","$L34","17",{}]]