2b:null 2c:["$","title",null,{"children":"Collision detection + trailing colors V3 | kelsey-n | Observable"}] 31:T1117,// FIXED flickering effect when node remains within boundary of cursor // TODO: make circles fill up canvas? Will have to add a bounding force to make sure nodes don't go out of view // TODO: move force of cursor node out of this function; have forceDistance be dependent on cursor node force // QUESTION: why does the force seem more volatile at first in the original version of this notebook, but takes a while to build up volatility here...? Look into caching: compare both notebooks on incognito vs regular browser to see if we get same behavior over time chart5 = { const height = width; // CHANGE THIS HERE FOR AUTO HEIGHT FIT... const context = DOM.context2d(width, height); const nodes = data.map(Object.create); const forceDistance = -20; const maxBoundaryDistance = 0; context.fillStyle = "#000"; context.fillRect(0, 0, width, height); const simulation = d3.forceSimulation(nodes) .alphaTarget(0.3) .velocityDecay(0.1) .force("x", d3.forceX().strength(0.01)) .force("y", d3.forceY().strength(0.01)) .force("collide", d3.forceCollide().radius(d => d.r + 1).iterations(3)) .force("charge", d3.forceManyBody().strength((d, i) => i ? 0 : -width * 2 / 50)) .on("tick", ticked); d3.select(context.canvas) .on("touchmove", event => event.preventDefault()) .on("pointermove", pointermoved); invalidation.then(() => simulation.stop()); const fadeDuration = 3000; // Adjust the duration as needed - originally 1000 const fadeOutRate = 0.003; // Adjust the rate as needed - originally 0.005 const fadingNodes = []; function getRandomColor() { const letters = "0123456789ABCDEF"; let color = "#"; for (let i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } function getRandomColorFromArray() { const colorArray = color === 'DVL' ? colorsDVL : color === 'MDS' ? colorsMDS : colorsRainbow // Pick a random index from the array const randomIndex = Math.floor(Math.random() * colorArray.length); // Return the color at the random index return colorArray[randomIndex]; } function pointermoved(event) { const [x, y] = d3.pointer(event); nodes[0].fx = x - width / 2; nodes[0].fy = y - height / 2; // Calculate distances from node centers to cursor node boundary for (let i = 1; i < nodes.length; ++i) { const d = nodes[i]; const dx = d.x - x + width / 2; const dy = d.y - y + height / 2; const distanceToBoundary = Math.sqrt(dx ** 2 + dy ** 2) - d.r - nodes[0].r + forceDistance; // Set isTouchingBoundary based on distance d.isTouchingBoundary = distanceToBoundary <= maxBoundaryDistance; // If it's touching the boundary and hasn't been set to a random color yet, set it if (d.isTouchingBoundary) { // d.randomColor = getRandomColorFromArray(); // THIS IS THE PROBLEM - we are setting random color every time the mouse moves? // d.randomColor = 'blue' d.fadeStartTime = Date.now(); fadingNodes.push(d); } if (d.isTouchingBoundary && !d.randomColor && color !== 'single') { d.randomColor = getRandomColorFromArray() } } // Redraw the chart ticked(); } function ticked() { context.clearRect(0, 0, width, height); context.save(); context.translate(width / 2, height / 2); for (let i = 1; i < nodes.length; ++i) { const d = nodes[i]; context.beginPath(); context.moveTo(d.x + d.r, d.y); context.arc(d.x, d.y, d.r, 0, 2 * Math.PI); // Calculate opacity based on elapsed time since fade started if (fadingNodes.includes(d)) { const elapsed = Date.now() - d.fadeStartTime; const opacity = 1 - Math.min(elapsed * fadeOutRate, 1); if (opacity <= 0) { // Opacity has reached 0, remove the randomColor delete d.randomColor; } // Interpolate between default color and the random/single color const interpolatedColor = d3.interpolateRgb(defaultColor, color === 'single' ? singleBoundaryColor : d.randomColor)(opacity); context.fillStyle = interpolatedColor; } else { context.fillStyle = defaultColor; } context.fill(); } context.restore(); } return context.canvas; } 32:[] 2f:{"id":"d0527b3ca6cae6f5","slug":null,"title":"Collision detection + trailing colors V3","thumbnail":"7ed973b547a5bf904e01f0e90c25eee0046a2f1bd54501145627be54bfd0a939","access_level":"public","create_time":"$D2023-10-06T15:46:30.928Z","update_time":"$D2023-10-06T18:46:38.307Z","view_time":null,"first_public_time":"$D2023-10-06T15:46:30.928Z","has_unpublished_edits":null,"fork":{"id":"1cf57b8fae6bafa8","slug":null,"title":"Collision detection + trailing colors V2","owner":{"id":"f7051f3637685f37","login":"kelsey-n","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"f7051f3637685f37","login":"kelsey-n","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ea8296efa15aab77ef16fe9573c923b11fbb0302fb0a4bbe9bdf7360567e56ce","tier":"starter_2024"},"version":440,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c6623c69750f4d77","login":"kelsey-n","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ea8296efa15aab77ef16fe9573c923b11fbb0302fb0a4bbe9bdf7360567e56ce","tier":null}],"members":[{"type":"individual","id":"c6623c69750f4d77","login":"kelsey-n","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ea8296efa15aab77ef16fe9573c923b11fbb0302fb0a4bbe9bdf7360567e56ce","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Collision detection + trailing colors V3","cells":[{"id":0,"value":"# Collision detection + trailing colors V3\n\nThis is inspired by [Collision Detection](https://observablehq.com/@d3/collision-detection/2), which uses D3's collide force to prevent circles from overlapping. The original example has an invisible node with large negative charge follow the cursor - giving the effect of the mouse repelling all other nodes. \n\nIn this example, I've adjusted the charge of the invisible node, and transitioned the colors of the nodes closest to the cursor - providing a colorful trailing effect to the cursor's repulsion. \n\nThis builds off of V2 by moving variables for color and force repulsion out of the chart function.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":416,"value":"1. Color constants:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":423,"value":"defaultColor = \"gray\"; // Set a single color (gray) for all nodes","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"colorsDVL = [\"#2251FF\", \"#00A9F4\", \"#AAE6F0\", \"#F2F2F2\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"colorsRainbow = [\"#FFA500\", \"#00CC00\", \"#000088\", \"#D81B60\", \"#9B59B6\", ]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"colorsMDS = [\"#FCB833\", \"#F45887\", \"#9F55B7\", \"#2251FF\", \"#73E4D6\", ]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"singleBoundaryColor = \"red\"; ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"2. Select color scheme here!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":403,"value":" // Constants - can be adjusted: \n viewof color = Inputs.radio([\"single\", \"DVL\", \"rainbow!\", \"MDS\"], {label: `Colors!!`, value: 'rainbow!'})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"3. Play with the viz!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":315,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"data = {\n const k = width / 200;\n const r = d3.randomUniform(k, k * 4);\n const n = 4;\n return Array.from({length: 200}, (_, i) => ({r: r(), group: i && (i % n + 1)}));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"