3e:null 3f:["$","title",null,{"children":"Circle packing with canvas and GSAP animation | Ian Mulholland | Observable"}] 45:T4d2,# Circle packing with canvas and GSAP animation I've come across a lot of visuals involving a circle packing graph, especially in news - often animated so there is a 'flow' of particles from one of the clusters to multiple others. I really like this effect, and I wanted to try to implement it in the simplest way possible for me to understand. Shout out to [this notebook](https://observablehq.com/@emamd/animating-lots-and-lots-of-circles-with-regl-js) which tackles a similar viz with regl. Also [this BBC article about the UK's gender pay gap](https://www.bbc.co.uk/news/resources/idt-a524dd3a-c09c-4f09-bc03-c5006d75ef96). My approach here is as follows: 1. Create a circle packing with d3.packSiblings - this automatically calculates the (x, y) positions for all the particles. 2. For each category in which we want to cluster the data later, create separate packSiblings - this ensures that the clusters are packed tightly after they are re-arranged. 3. Use GSAP to animate the (x, y) positions from the original location to new clusters with (x, y) determined via the packSiblings of the categories and some other translations (can be done with a scale if more complex - here we just hard-code some numbers that work) 46:Td8a,{ const width = 1000; const height = 900; const radius = 1.7; const padding = 0; const n = 1000; // bring in the animation control buttons const play = document.querySelector("#play"); const pause = document.querySelector("#pause"); const restart = document.querySelector("#restart"); const reverse = document.querySelector("#reverse"); const c = DOM.context2d(width, height); c.translate(250, 250); /// Starting data /// // these are the particles that we are going to animate - store positional or other animatable arguments const circles = d3.packSiblings(d3.range(n).map(() => ({ r: radius + padding, fill: '#ffafcc' }))); // add some random group element that we can use to split the particles on circles.forEach((circle, i) => { circle.group = i % 3 === 0? 'pandas' : 'cats' // these are... completely random }) /// New position of data /// // 1. Create new packSiblings for each of our groups - so that the circles are packed tight together // if we don't do that it will still work but the new circle packings will have the original (x, y) // positions so will look very 'sparse' const groups = ['pandas', 'cats'] const circlesPerGroup = {} // store in object with keys = the gorups for (const group of groups) { circlesPerGroup[group] = d3.packSiblings(d3.range( circles.filter(circle => circle.group === group).length ).map(() => ({ r: radius + padding + 3, group: group }))) }; // 2. Create the new circles by looping over the groups const xOffset = 500; // how far right to move horizontally from initial position const yOffsetPerGroup = 350; // this can also be defined with a scale if we have more groups const movedCircles = [] for (const [group, groupCircles] of Object.entries(circlesPerGroup)) { const groupNumber = groups.indexOf(group) groupCircles.forEach((circle, index) => { movedCircles.push({ x: groupCircles[index].x + xOffset, y: groupCircles[index].y + yOffsetPerGroup*groupNumber, fill: circle.group === 'cats'? '#76c893' : '#1a759f', // can be done with a colour scheme group: circle.group }) }) } /// Animation /// // animate the x,y pos and the fill s.t. x and y are moved to the position of the moved circles, // which we can access via the index; stagger the particles const tl = gsap.to(circles, { x: (index, target, targets) => movedCircles[index].x, y: (index, target, targets) => movedCircles[index].y, fill: (index, target, targets) => movedCircles[index].fill, duration: 1, ease: 'power.3.out', stagger: { amount: 2 }, onUpdate: animate }); tl.pause() // pause to begin with; play if button is clicked // this is what happens on update of the gsap animation function animate() { c.fillStyle = "#22223b" c.fillRect(-250, -250, 1200, 1200); // make sure to clear or fill the rect for (const { x, y, r, fill } of circles) { c.beginPath(); c.arc(x, y, r-padding, 0, 2*Math.PI) c.fillStyle = fill c.fill() } } // run the drawing logic once just so that we can see the initial circle packing animate() // button controls to be able to play/pause etc the gsap animation play.onclick = () => tl.play(); restart.onclick = () => tl.restart() pause.onclick = () => tl.pause(); reverse.onclick = () => tl.reverse(); yield c.canvas; }47:T4d1,{ const width = 750; const height = 650; const radius = 2; const padding = 1; const n = 1000; const c = DOM.context2d(width, height); c.translate(200, 200); /// Starting data /// const circles = d3.packSiblings(d3.range(n).map(() => ({ r: radius + padding, fill: 'gray' }))); /// New position of data /// const movedCircles = [] circles.forEach(circle => { movedCircles.push({ x: circle.x + 300, y: circle.y + 200, fill: d3.interpolateRainbow(Math.random()) }) }); /// Animation /// gsap.to(circles, { x: (index, target, targets) => movedCircles[index].x, y: (index, target, targets) => movedCircles[index].y, fill: (index, target, targets) => movedCircles[index].fill, duration: 0.5, ease: 'power.3.out', stagger: { amount: 10 }, onUpdate: animate }); // this is what happens on update of the gsap animation function animate() { c.fillStyle = "white" c.fillRect(-200, -200, 700, 700); // make sure to clear or fill the rect for (const { x, y, r, fill } of circles) { c.beginPath(); c.arc(x, y, r-padding, 0, 2*Math.PI); c.fillStyle = fill; c.fill(); } } yield c.canvas; } 48:[] 43:{"id":"b4b553442874faf3","slug":null,"title":"Circle packing with canvas and GSAP animation","thumbnail":"42e383732e2e72ff8f7b758e1c04877657b2420e88e08be4ca209f94571a0904","access_level":"public","create_time":"$D2023-04-11T20:25:21.376Z","update_time":"$D2023-04-12T19:04:03.186Z","view_time":null,"first_public_time":"$D2023-04-11T20:25:21.376Z","has_unpublished_edits":null,"fork":{"id":"8419be0d06e0d602","slug":"circle-packing-with-canvas-and-gsap-animation","title":"Circle packing with canvas and GSAP animation","owner":{"id":"ff1e8a7fac805262","login":"deaxmachina","name":"Dea Bankova"}},"stars":0,"starred":false,"owner":{"type":"team","id":"498b5eebd648902d","login":"ian-mulholland","name":"Ian Mulholland","avatar_url":"https://avatars-next.observableusercontent.com/b17de045636f24ac3bb85f3250009468422824a9819cb36269fb0a47559dc0c5","tier":"starter_2024","bio":"","following":false},"version":203,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d151400cf935c88d","login":"ian-mulholland","name":"Ian Mulholland","avatar_url":"https://avatars-next.observableusercontent.com/b17de045636f24ac3bb85f3250009468422824a9819cb36269fb0a47559dc0c5","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"d151400cf935c88d","login":"ian-mulholland","name":"Ian Mulholland","avatar_url":"https://avatars-next.observableusercontent.com/b17de045636f24ac3bb85f3250009468422824a9819cb36269fb0a47559dc0c5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Circle packing with canvas and GSAP animation","cells":[{"id":0,"value":"$45","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"

\n \n \n \n \n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"### Simpler version \nSimplified version of the above where we don't have any categories - we simply move the particles from the circle packing to a new position in a staggered animation. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"width = 700","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"gs = require('https://bundle.run/gsap@3.6.1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"gs = require(\"https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 44:"$43:body"