2b:null 2c:["$","title",null,{"children":"Voronoi Particles Light | paulinelem | Observable"}] 31:Tadb,md`## TODO * [dans l'article](https://observablehq.com/d/96923465dbead7b4) : * [doc google](https://docs.google.com/document/d/1QjOfw2_hwPR9NpDB0sA4-v4Pp23jQnJrPph9Rbjy1ZI/edit#) - [x] remettre les points bien visibles, ainsi que les vecteurs vitesse (drawLayer()) - [x] vecteurs vitesse dragables. - [x] distance de Manhattan - [ ] Peut-être ne les afficher que sur hover (couche supplémentaire) - [ ] application concrète (exemple final) - [ ] changement de calcul de la vitesse f(t) - [-] difficulté de sélection d'un joueur ou accélération ; changer le curseur en fonction // gérer la possibilité de sélectionner (cf. https://observablehq.com/@fil/drag-subject-affordance) - [ ] todo: un layer modifiable + layer de calcul, sinon on ne s'en sort pas dans notre cas bien compliqué - [ ] enfin je pense au niveau du flow si il y avait une visu qui linéarise comment l’espace est occupé au fil du temps ca pourrait être pas mal du tout (en x le temps et en y chaque agent et montrer son % d’occupation d’espace) ca m’a l’air d’être quelque chose d’utile pour toutes les visus on peut éventuellement le dessiner par exemple dans un coin en haut a droite ? même si c’est pas grand ca donne une idée de l’évolution du remplissage - [ ] difficulté à le calculer ; la technique hidden canvas est relativement lente… - [ ] bug: le panel disparait à la fin - [ ] small multiples (x4) ou slider option like https://juxtapose.knightlab.com/ ? - [ ] je pensais a un dernier exemple interactif sympa : un des premiers de Bostock je crois c’est utiliser le pointeur de la souris comme point qui partitionne l’espace (je le retrouve pas) ca pourrait être intéressant de faire le meme mais en prenant en compte l’accélération du mouvement de la souris et montrer comment on peut ainsi prédire les zones de l’espace facilement accessibles avec la souris (sous reserve que les calculs soient faisables rapidement…) - [ ] 3D (three.js & cones) dans un notebook à part - [ ] ce qui serait utile c’est d’avoir un moyen de comparer visuellement les différentes stratégies (ex. avec ou sans accélération). je vois deux facons de faire (non exclusives) 1) une nouvelle visu qui pour une même cellule montre sous forme de small multiples les différentes formes possibles en fonction des parametres d’accelerations, et 2) faire une sorte de ghost mode dans les visus ou tu peux changer un parametres afin de comparer la nouvelle visu avec la précédente - [ ] application concrète à une scène de foot (à définir avec Gabin et Romain) et à la ville (avec Célia) ** Faire un notebook avec juste un canvas où on clique pour ajouter les agents ; une direction ; et un fond de carte. ** Tracking js caméra `32:T451,todo = md` - [ ] extracting boundaries - [x] as pixels - [x] as paths - [ ] as topojson - [ ] extracting isocontours - [ ] isocontours & un mobile qui se déplace dans cet espace 3D - [ ] jeu : cliquer et dire quel agent arrive en premier - [ ] réalisme (combien de temps pour s'arrêter quand on court à v max, inversement combien de temps pour atteindre v max) ; question du ballon - [-] darker n'est pas top (essayer color.copy({opacity:xx}) et utiliser colorsinebow - [ ] 3D version _NE MARCHE PAS_ - [-] worker (mais essayer avec [Hello SharedArrayBuffer](https://observablehq.com/@fil/hello-sharedarraybuffer) pour une alternative?) - [-] offscreencanvas _DONE_ - [x] drag-change the speed vector - [x] champ de vecteurs [dans un hexbin](https://observablehq.com/d/e7351954fdf01e9b) - [x] in this model all have the same acceleration capacity (can do diff. accelerations if we don't use voronoi clipping—the result is either slower or not as sharp) - [x] descartes - [x] replace \`(p.acceleration * (t ** 2 * s))\` with a scale - [x] drag agents - [x] monitor visibility continuously `33:T72c,function displayField(agents) { const hexbin = d3 .hexbin() .radius(hexradius) .angle(angle) .size([width, height]), centers = hexbin.centers(), owned = []; let t = 0, a = 10; do { t += hexradius / Math.sqrt(t + 1); for (const p of agents) { const pos = [ p.position[0] + t * p.speed[0], p.position[1] + t * p.speed[1] ]; for (let i = 0; i < centers.length; i++) { const c = centers[i], r = p.acceleration * radius(t); if (Math.hypot(c[0] - pos[0], c[1] - pos[1]) < r) { c.color = p.color; c.vector = [c[0] - pos[0], c[1] - pos[1]].map( d => d * (hexradius / r) ** 1.3 ); owned.push(c); centers.splice(i--, 1); } } } } while (radius(t) < width && centers.length && a-- > 0); const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); svg .selectAll(".hex") .data(owned) .join("path") .attr("d", d => `M${d[0]},${d[1]}${hexbin.hexagon()}`) .style("fill", d => d.color) .style("stroke", d => d.color); svg .selectAll(".vector") .data(owned) .join("path") .attr( "d", d => `M${d[0] - d.vector[0] / 2},${d[1] - d.vector[1] / 2} l${d.vector[0]},${d.vector[1]}` ) .style("stroke", "white"); svg .selectAll(".speed") .data(agents) .join("path") .attr( "d", d => `M${d.position[0]},${d.position[1]} l${d.speed[0] * hexradius * 10},${d.speed[1] * hexradius * 10}` ) .style("stroke", "white"); svg .selectAll(".agent") .data(agents) .join("circle") .attr("cx", d => d.position[0]) .attr("cy", d => d.position[1]) .attr("r", 4) .style("fill", "white"); return svg.node(); }34:T1571,function* drawSituation( agents, options = { darker, showCones, voronoiClip, width, height, shape }, context ) { const path = d3.geoPath().context(context); let { darker, showCones, showBoundaries, voronoiClip, width, height, shape, panel } = options; darker = darker || 0; const delaunay = d3.Delaunay.from(agents), points = delaunay.points, voronoi = delaunay.voronoi([0, 0, width, height]); let t = 0, d, time = performance.now(), t_cone = 0, instance = Math.random(); // hidden canvas to note who is winning const hidden = options.panel ? DOM.context2d(width, height, 0.25) : null; const lookup = new Map(); if (hidden) { const hiddenCanvasColor = rgbColorGenerator(); agents.forEach(a => (a.hidden = hiddenCanvasColor.next().value)); } function* draw() { const me = instance; do { const show_cone = showCones && t > t_cone + 3 && (t = t_cone + 3); t += 1 / Math.sqrt(t + 1); let i = 0; for (const p of agents) { context.beginPath(); context.arc(p.position[0], p.position[1], p.distanceMax-p.distance, 0, tau); context.strokeStyle = "black"; var col = p.color context.fillStyle = d3.hsl(col['h'], col['s'], 0.85); context.stroke(); context.fill(); context.closePath(); // context.restore(); //for each agent we draw a circle centered on his center and of diameter (distanceMax-distance)/2 //we draw the circle with the same color but less opacity that the agent so that we can see a difference with de cone. points[i++] = p.position[0] + t * p.speed[0]; points[i++] = p.position[1] + t * p.speed[1]; } if (voronoiClip) voronoi.update(); i = 0; if (d) context.putImageData(d, 0, 0); for (const p of agents) { context.save(); if (voronoiClip) { context.beginPath(); voronoi.renderCell(i, context); context.clip(); } if (show_cone) { t_cone = t; context.globalCompositeOperation = "destination-over"; drawShape( //we do the same changes everytime the drawShape function is called points[2 * i], points[2 * i + 1], p.acceleration * radius(t), p.distance + Math.pow(Math.pow(t * p.speed[0], 2) + Math.pow(t* p.speed[1], 2), 0.5), // we calculate the new distance, from the origine to the new position of the player p.distanceMax, // the max distance doesn't change i, shape, context ); context.lineWidth = 0.5; context.strokeStyle = "white"; context.stroke(); } context.globalAlpha = globalAlpha; context.globalCompositeOperation = "destination-over"; drawShape( points[2 * i], points[2 * i + 1], p.acceleration * radius(t), p.distance + Math.pow(Math.pow(t * p.speed[0], 2) + Math.pow(t*p.speed[1], 2), 0.5), p.distanceMax, i, shape, context ); const u = d3.hsl(p.color); context.fillStyle = u.copy({ l: u.l / (1 + t * darker) }); // .copy({ l: …} ) ?? context.fill(); context.restore(); i++; } d = context.getImageData(0, 0, width, height); if (performance.now() - time > 50) { // same on the hidden canvas if (hidden) { i = 0; for (const p of agents) { hidden.save(); if (voronoiClip) { hidden.beginPath(); voronoi.renderCell(i, hidden); hidden.clip(); } hidden.globalCompositeOperation = "destination-over"; drawShape( points[2 * i], points[2 * i + 1], p.acceleration * radius(t), p.distance + Math.pow(Math.pow(t * p.speed[0], 2) + Math.pow(t*p.speed[1], 2), 0.5), p.distanceMax, i, shape, hidden ); hidden.fillStyle = `rgb(${p.hidden.join(",")})`; // https://stackoverflow.com/questions/195262/can-i-turn-off-antialiasing-on-an-html-canvas-element hidden.fill(); hidden.restore(); i++; } } // /hidden time = performance.now(); drawLayer(hidden, lookup); yield context.canvas; } } while ( me == instance && t < 2000 && d.data.some((d, i) => i % 4 === 3 && !d) ); } yield* draw(); const tmax = t; const boundaries = showBoundaries ? pathboundaries(agents, tmax).features : []; { for (const m of boundaries) { context.strokeStyle = "white"; context.beginPath(); if (m.geometry.coordinates.length === 1) m.geometry.type = "MultiPoint"; path(m); context.lineWidth = 1; context.stroke(); } } drawLayer(); yield context.canvas; function drawLayer(hidden, lookup) { // all we paint here is forgotten let i = 0; for (const p of agents) { drawPoint(context, p, 5); i++; } if (options.panel) { context.save(); context.translate(0, 0); drawPanel(context, agents, hidden, lookup); context.restore(); } } }35:T50b,function drawPanel(context, agents, hidden, lookup) { if (hidden) { // context.drawImage(hidden.canvas, 0, 0); const data = hidden.getImageData( 0, 0, hidden.canvas.width, hidden.canvas.height ).data; let unknown = 0; for (const agent of agents) agent.pixels = 0; for (let i = 0; i < data.length; i += 4) { if (data[i + 3] >= 200) { const c = [data[i], data[i + 1], data[i + 2]], code = c.join(","); if (!lookup.has(code)) { const a = d3.scan( agents.map( d => Math.abs(d.hidden[0] - c[0]) + Math.abs(d.hidden[1] - c[1]) + Math.abs(d.hidden[2] - c[2]) ) ); lookup.set(code, a); } agents[lookup.get(code)].pixels++; } } context.fillStyle = "white"; context.fillRect( 0, 0, Math.sqrt(d3.max(agents, d => d.pixels)) + 2, 2 * (agents.length + 2) ); for (const agent of agents) { context.translate(0, 2); context.fillStyle = agent.color; context.fillRect(0, 0, Math.sqrt(agent.pixels), 2); } context.fillStyle = "black"; context.translate(0, 2); context.fillRect(0, 0, Math.sqrt(unknown), 2); } }36:T45d,function drawShape(x, y, r, distance, distanceMax, pos, shape, context) { //this function now takes into account the distance and the distanceMax of an agent if (distance d.position[0], d => d.position[1] ), points = delaunay.points, voronoi = delaunay.voronoi([0, 0, width, height]); let step = 0.01; for (let t = 1; t < tmax; t += step) { const r = radius(t); for (let i = 0; i < agents.length; i++) { points[2 * i] = agents[i].position[0] + agents[i].speed[0] * t; points[2 * i + 1] = agents[i].position[1] + agents[i].speed[1] * t; } delaunay.update(); let max = Infinity; for (let i = 0; i < agents.length; i++) { for (const j of delaunay.neighbors(i)) { if (j < i) { const vector = [ points[2 * j] - points[2 * i], points[2 * j + 1] - points[2 * i + 1] ], dist = Math.hypot(...vector) / 2, mid = [ (points[2 * i] + points[2 * j]) / 2, (points[2 * i + 1] + points[2 * j + 1]) / 2 ]; const diff = r * r - dist * dist; max = Math.min(max, Math.abs(diff)); if (diff >= 0) { const id = `${i}-${j}`; if (!A.get(id)) { const str = []; A.set(id, str); } const str = A.get(id); const side = Math.sqrt(diff), normal = [vector[1] / dist / 2, -vector[0] / dist / 2]; for (const even of [-1, 1]) { const pt = [ mid[0] + even * normal[0] * side, mid[1] + even * normal[1] * side ]; const f = delaunay.find(...pt, i); if (f == i || f == j) { if (even < 0) str.push(pt); else str.unshift(pt); } } } } } } // adaptive step for t step = Math.max(1, Math.sqrt(max)) / 100; if (performance.now() - time > 10000) break; } const boundaries = []; for (const [id, m] of A) { let start = true, p0 = m[0], curr; for (let i = 0; i < m.length; i++) { const p = m[i]; if (Math.hypot(p[0] - p0[0], p[1] - p0[1]) > 25) { if (!start) { boundaries.push({ type: "Feature", properties: id, geometry: { type: "LineString", coordinates: curr } }); start = true; } } if (start) { curr = []; start = false; } curr.push(p); p0 = p; } boundaries.push({ type: "Feature", properties: id, geometry: { type: "LineString", coordinates: curr } }); } return { type: "FeatureCollection", features: boundaries.filter(d => d && d.geometry.coordinates) }; }38:T46e,{ const context = DOM.context2d(width, height, 1); const points = []; for (let r = 0; r < 100; r++) { const data = context.getImageData(0, 0, width, height); const A = {}; for (const c of agents) { plotCircleAA( Math.round(c.position[0]), Math.round(c.position[1]), r, (x, y, v = 255) => { const i = x + width * y; if (data.data[4 * i + 3] < 128) { const id = `${x}/${y}`; A[id] = (A[id] || 0) + v / 255; } } ); } for (const b in A) { if (A[b] > 1) { const p = b.split("/").map(Number); points.push(p); } } context.fillStyle = "white"; for (const c of agents) { context.beginPath(); context.arc(...c.position, r, 0, tau); context.fill(); } context.fillStyle = "red"; for (const c of agents) { context.beginPath(); context.arc(...c.position, 1, 0, tau); context.fill(); } context.fillStyle = "black"; for (const p of points) { context.fillRect(...p, 1, 1); } yield context.canvas; } }39:T5e8,async function displayInteractive(agents, options = {}) { let instance = Math.random(), im; if (options.visibility) await options.visibility(); if (!options.shape) options.shape = shape; const w = (options.width = options.width || width), h = (options.height = options.height || height); const context = DOM.context2d(w, h), canvas = context.canvas, _drag = drag(agents) .on("start.render", () => { instance = Math.random(); im = context.getImageData( 0, 0, context.canvas.width, context.canvas.height ); }) .on("drag.render", () => { context.putImageData(im, 0, 0); for (const p of agents.filter(p => p.active)) { drawPoint(context, p, 9); } }) .on("end.render", go); const _dragsubject = dragsubject(agents); d3.select(canvas) .call(_drag) .style("cursor", "pointer") .on("mousemove", () => { const m = d3.mouse(canvas), subject = _dragsubject({ x: m[0], y: m[1] }); d3.select(canvas).style( "cursor", !subject ? "default" : subject.thing == "dot" ? "pointer" : "crosshair" ); }); go(); return canvas; async function go() { context.clearRect(0, 0, w, h); const u = instance; for (const x of drawSituation(agents, options, context)) { if (u !== instance) break; if (options.visibility) await options.visibility(); await Promises.delay(16); } } }3a:T422,// adapted from https://observablehq.com/@d3/hello-d3-drag drag = agents => { // When starting a drag gesture, move the subject to the top and mark it as active. function dragstarted() { agents.splice(agents.indexOf(d3.event.subject), 1); agents.push(d3.event.subject); d3.event.subject.active = true; } // When dragging, update the subject’s position. function dragged() { const agent = d3.event.subject; if (agent.thing === "dot") { agent.position[0] = Math.max(0, Math.min(width, d3.event.x)); agent.position[1] = Math.max(0, Math.min(height, d3.event.y)); } if (agent.thing === "speed") { agent.speed[0] = (d3.event.x - agent.position[0]) / 20; agent.speed[1] = (d3.event.y - agent.position[1]) / 20; } } // When ending a drag gesture, mark the subject as inactive again. function dragended() { d3.event.subject.active = false; } return d3 .drag() .subject(dragsubject(agents)) .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); }3b:[{"id":"691e70cd7e213fc69d93026d2708b6fc38a1381a617c656548519c5886a93e28d3dea400116baabce63a44dbab27c3c297408d2fad24b98409e3bd9ad9c7dc0c","href":"https://static.observableusercontent.com/files/691e70cd7e213fc69d93026d2708b6fc38a1381a617c656548519c5886a93e28d3dea400116baabce63a44dbab27c3c297408d2fad24b98409e3bd9ad9c7dc0c","name":"d3-hexbin.js","type":"application/javascript","lastModified":1578563310868.019,"size":7438}] 2f:{"id":"d6e347b48f997424","slug":"voronoi-particles-light","title":"Voronoi Particles Light","thumbnail":"89b7bcdee6d8ac97173c3d3d98517caa381d2ff11cb976def02a69eeb830be8b","access_level":"public","create_time":"$D2020-01-09T09:48:30.868Z","update_time":"$D2020-01-23T07:59:37.220Z","view_time":null,"first_public_time":"$D2020-01-16T17:49:00.858Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"2fe05e7dad5299f4","login":"paulinelem","name":"","avatar_url":"https://avatars-next.observableusercontent.com/9b47c2864b3507854ea53e6c9961ef8622a66e9752959e2f02894aeb49a36eb1","tier":"starter_2024"},"version":2041,"publish_version":2041,"role":null,"authored":false,"authors":[{"type":"individual","id":"12748f029868b0f7","login":"paulinelem","name":"","avatar_url":"https://avatars-next.observableusercontent.com/9b47c2864b3507854ea53e6c9961ef8622a66e9752959e2f02894aeb49a36eb1","tier":null}],"members":[{"type":"individual","id":"12748f029868b0f7","login":"paulinelem","name":"","avatar_url":"https://avatars-next.observableusercontent.com/9b47c2864b3507854ea53e6c9961ef8622a66e9752959e2f02894aeb49a36eb1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Voronoi Particles Light","cells":[{"id":0,"value":"md`# Voronoi Particles Light`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1590,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":333,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":916,"value":"md`This notebook explores a (to our knowledge) new extension of Voronoi, which takes into account the initial _speed_ and potential _acceleration_ of the sites (which we’ll call agents). It is different from _power diagrams_\n\nhttps://en.wikipedia.org/wiki/Voronoi_diagram#Generalizations_and_variations\n\n\nLe pavage qu’on définit là indique le premier agent pour toutes les positions du ballon. L’idée serait de rendre en plus ces positions dépendantes de t ?\n\nPeut-être qu’en passant en 3D (2D terrain + temps) ça marchera… je vais essayer\nles contours définis ont un label de temps, et donc on peut voir quand et où la trajectoire mobile passe dans un contour bien numéroté au bon instant\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":82,"value":"viewof s = slider({\n min: 0,\n value: 5,\n max: 10,\n step: 0.00001,\n description: \"acceleration/speed ratio\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":140,"value":"viewof darker = slider({\n min: 0,\n value: 0.02,\n max: 0.1,\n description: \"darker with time?\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":345,"value":"viewof globalAlpha = select({\n options: [1, 0.3, 0.1, 0.01],\n description: \"Global alpha\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1575,"value":"viewof shape = select({\n options: [\"circle\", \"square\", \"manhattan\"],\n description: \"Isolines shape\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":197,"value":"viewof options = checkbox([\"Show cones\", \"Clip Voronoi\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":394,"value":"showCones = options && options.indexOf(\"Show cones\") > -1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":396,"value":"voronoiClip = options && options.indexOf(\"Clip Voronoi\") > -1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":369,"value":"radius = d3\n .scalePow()\n .exponent(2)\n .domain([0, 10])\n .range([0, s])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1543,"value":"mutable debug = null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":219,"value":"{\n const agents = Array.from({ length: 5 }, (d, i) => ({\n position: [width * Math.random(), height * Math.random()],\n // speed: [Math.random() * 10, Math.random() * 10],\n speed: [3, 2],\n // color: d3.color(\"steelblue\"), \n color: d3.hsl(((i % 2) / 2) * 360, 0.6 + 0.2 * Math.random(), 0.6), \n acceleration: Math.random(),\n distance:Math.random()*50,\n // the distance that the agent has already done\n distanceMax:70\n // the distance that the agent can make \n // in this model all have the same acceleration capacity ** power diagram\n }));\n\n yield displayInteractive(agents, {\n showBoundaries: true,\n visibility,\n panel: true\n });\n // console.log(agents[0].color);\n}\n// the accessible zone is the intersection of the dark and clear zone\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":301,"value":"md`Un agent avance à fond vers un statique.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":325,"value":"md`Un agent avance vers un mur.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":443,"value":"md`### Relative acceleration\n\nIf an agent can accelerate more than another, it can “encircle” it after a while. (Note: in this model, we can’t use the Voronoi clipping any more).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":438,"value":"viewof acceleration = slider({\n min: 0.9,\n max: 3,\n value: 1,\n description: \"Relative acceleration\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":450,"value":"viewof acceleration2 = slider({\n min: 0.9,\n max: 3,\n value: 1.25,\n description: \"Relative acceleration\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":967,"value":"md`## Vector field`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1097,"value":"agentsDir = Array.from({ length: 15 }, (d, i) => ({\n position: [width * Math.random(), height * Math.random()],\n speed: [Math.random() - Math.random(), Math.random() - Math.random()],\n color: d3.hsl(Math.random() * 360, 0.6 + 0.2 * Math.random(), 0.6),\n acceleration: 1 // in this model all have the same acceleration capacity ** power diagram\n}))\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1090,"value":"hexradius = 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1094,"value":"viewof angle = slider({ min: -90, max: 90, description: \"Angle\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":994,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":834,"value":"md`## Draw`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":205,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1869,"value":"function drawPoint(context, p, size) {\n const end = [\n p.position[0] + 20 * p.speed[0],\n p.position[1] + 20 * p.speed[1]\n ];\n context.strokeStyle = \"white\";\n context.beginPath();\n context.moveTo(...p.position);\n context.lineTo(...end);\n context.lineWidth = size > 5 ? 2 : 0.5;\n context.stroke();\n context.closePath();\n context.restore();\n\n context.beginPath();\n context.arc(...p.position, size, 0, tau);\n context.fillStyle = p.color;\n context.fill();\n context.lineWidth = size > 5 ? 3 : 2;\n context.stroke();\n context.closePath();\n context.restore();\n\n context.beginPath();\n context.arc(...end, size / 2, 0, tau);\n context.fillStyle = p.color;\n context.fill();\n context.lineWidth = size > 5 ? 2 : 1;\n context.stroke();\n context.closePath();\n context.restore();\n \n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1716,"value":"// import {rgbColorGenerator} from \"@camargo/canvas-picking-with-a-hidden-canvas\"\nfunction* rgbColorGenerator() {\n let nextColor = 1;\n const nextColorStep = 50;\n\n while (nextColor < 16777216) {\n nextColor += nextColorStep;\n yield [\n nextColor & 0xff,\n (nextColor & 0xff00) >> 8,\n (nextColor & 0xff0000) >> 16\n ];\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1653,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1579,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1356,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1121,"value":"import {plotCircle, plotCircleAA} from \"81fd2058ee21afc3\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1125,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":541,"value":"md`## Drag`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":296,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1804,"value":"// Choose the circle that is closest to the pointer for dragging.\nfunction dragsubject(agents) {\n const radius = 30;\n\n return function(event) {\n if (!event) event = d3.event;\n let subject = null;\n let distance = radius * 1.5;\n\n for (const c of agents) {\n // grab the dot?\n let d = Math.hypot(event.x - c.position[0], event.y - c.position[1]);\n if (d < distance) {\n distance = d;\n subject = c;\n subject.thing = \"dot\";\n }\n // grab the speed?\n d = Math.hypot(\n event.x - (c.position[0] + 20 * c.speed[0]),\n event.y - (c.position[1] + 20 * c.speed[1])\n );\n if (d < 5) {\n distance = d;\n subject = c;\n subject.thing = \"speed\";\n }\n }\n return subject;\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":461,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":535,"value":"md`## Annex`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"// agents = Array.from({ length: 500 }, (d, i) => ({\n// position: [width * Math.random(), height * Math.random()],\n// speed: [Math.random() - Math.random(), Math.random() - Math.random()],\n// color: color(i),\n// acceleration: 1, // in this model all have the same acceleration capacity, \n// distance:0, \n// distanceMax:20\n// }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":930,"value":"color = i => {\n const u = i / 2.618033988749895,\n v = u - Math.floor(u);\n return d3.hsl(v * 360, 0.6 + 0.2 * Math.random(), 0.6); // d3.interpolateSpectral(v)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"d3 = require(\"d3@5\", \"d3-delaunay@5\", \"d3-color@1.3\", await FileAttachment(\n \"d3-hexbin.js\"\n).url())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"tau = 2 * Math.PI","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":147,"value":"import {checkbox, slider, select} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W3b","stdlib":"1","titling":"auto"}} 30:"$2f:body"