2b:null 2c:["$","title",null,{"children":"Collision detection + trailing colors V5 | kelsey-n | Observable"}] 31:T1567,// 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... // Set initial positions outside the viewport // data.forEach(node => { // node.x = Math.random() < 0.5 ? -100 : width + 100; // Initial positions outside the canvas // node.y = Math.random() * height; // Random initial y position // }); 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)) // Initial y force .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); const duration = 1000; // 5 seconds duration const startTime = performance.now(); function updateForceYStrength() { const currentTime = performance.now(); const elapsed = currentTime - startTime; if (elapsed < duration) { const progress = elapsed / duration; const newStrength = 0.5 - (0.49 * progress); // Adjust the 0.49 factor as needed // Update the forceY strength simulation.force("y", d3.forceY().strength(newStrength)); // Continue updating the animation requestAnimationFrame(updateForceYStrength); } else { // Ensure that the final strength is exactly 0.01 simulation.force("y", d3.forceY().strength(0.01)); } } // Start the animation to gradually decrease forceY strength // requestAnimationFrame(updateForceYStrength); d3.select(context.canvas) .on("touchmove", event => event.preventDefault()) .on("pointermove", pointermoved); invalidation.then(() => simulation.stop()); const fadeDuration = 6000; // Adjust the duration as needed - originally 3000 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":"dfd4afdc07e5165e","slug":null,"title":"Collision detection + trailing colors V5","thumbnail":"2cd9a36512093da7a7f3789f2f6660c84584e4547521d735aca742d9649e3a64","access_level":"public","create_time":"$D2023-10-19T18:15:24.474Z","update_time":"$D2023-10-19T18:15:41.211Z","view_time":null,"first_public_time":"$D2023-10-19T18:15:24.474Z","has_unpublished_edits":null,"fork":{"id":"b0fab5a492cdd76a","slug":null,"title":"Collision detection + trailing colors V4","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":472,"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":0,"collection":null,"type":"notebook","body":{"title":"Collision detection + trailing colors V5","cells":[{"id":0,"value":"# Collision detection + trailing colors V5\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":462,"value":"Can try to do: all circles attracting at center then slowly repelling each other - the forceCollide transition\nOr all circles at top of canvas, with a force that pulls them to the bottom instantly, transitions back up, keeps repeating - bouncing?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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"