31:T61b,{ const c = DOM.context2d(width, height); c.translate(width/2, height/2); ////////////////////// Draw function /////////////////////// const draw = (data) => { c.fillStyle = "black" c.fillRect(-width / 2, -width / 2, width, height); // Make sure to clear or fill the rect for (const { x, y, r, fill } of data) { const xNew = x const yNew = y c.beginPath(); c.arc(xNew, yNew, r, 0, 2*Math.PI) c.fillStyle = fill c.fill() } } ////////////////////// 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. const tl = gsap.to(dataStart, { x: (index) => dataEnd[index].x, y: (index) => dataEnd[index].y, //fill: (index) => dataEnd[index].fill, //r: (index) => dataEnd[index].r, duration: animationDuration, stagger: 0.1, ease: 'power.3.out', stagger: { amount: 2 }, onUpdate: () => draw(dataStart) }); tl.pause() /////////////// Control the animation ////////////////// // Button controls to be able to play/pause etc the gsap animation const play = document.querySelector("#play"); const pause = document.querySelector("#pause"); const restart = document.querySelector("#restart"); const reverse = document.querySelector("#reverse"); play.onclick = () => tl.play(); restart.onclick = () => tl.restart() pause.onclick = () => tl.pause(); reverse.onclick = () => tl.reverse(); draw(dataStart) yield c.canvas; }32:T622,function getDataSequentialGrid(dataIn) { const numElements = dataIn.length const cellSize = radius*2 const numCells = numElements // If you want the width to be controlled by the width of the container // but the height is as much as needed to fit the data. const numCols = Math.ceil(width / cellSize) const numRows = Math.ceil(numCells / numCols) const height = numRows * cellSize // If you want the height to be the height of the container, comment out the line above. // Use d3 band scales to position the elements in rows and cols const xScale = d3.scaleBand() .domain(_.range(numCols)) .range([0, width]) const yScale = d3.scaleBand() .domain(_.range(numRows)) .range([0, height]) // Create an array of just the x and y positions where each etry will go const cells = [] let count = 0 for (let i = 0; i < numRows; i++) { for (let j = 0; j < numCols; j++) { if (count <= numCells) { const entry = { id: count, x: xScale(j) - width / 2, y: yScale(i) - height / 2, } cells.push(entry) } count += 1 } } // Merge the array of x and y positions for each entry with the data containing the // rest of the information, i.e. the colours const dataSequentialGrid = [] dataIn.forEach((d, i) => { const entry = { name: d.name, fill: d.fill, red: d.red, green: d.green, blue: d.blue, r: d.r, x: cells[i].x, y: cells[i].y } dataSequentialGrid.push(entry) }) return dataSequentialGrid }33:[{"id":"f8934c38ef2970c98eaef4289ff726bd95891d3345e8766931cdf142cba47cfddc497165b05c73afb460a18dcb8788edf3e84882cf69c2cf171a56c639a7b19c","href":"https://static.observableusercontent.com/files/f8934c38ef2970c98eaef4289ff726bd95891d3345e8766931cdf142cba47cfddc497165b05c73afb460a18dcb8788edf3e84882cf69c2cf171a56c639a7b19c","name":"spirited-away_frames_0_100000_3col_sample_every2frames.json","type":"application/json","lastModified":1664625496650.923,"size":4988880}] 2f:{"title":"All the colours in Spirited Away","cells":[{"id":0,"value":"# All the colours in Spirited Away","pinned":false,"hidden":false,"mode":"md"},{"id":125,"value":"{\n \n const c = DOM.context2d(width, height);\n c.translate(width/2, height/2);\n\n const draw = (data) => {\n c.fillStyle = \"black\"\n c.fillRect(-width / 2, -width / 2, width, height); // Make sure to clear or fill the rect\n for (const { x, y, r, fill } of data) {\n const xNew = x \n const yNew = y \n c.beginPath();\n c.arc(xNew, yNew, r, 0, 2*Math.PI)\n c.fillStyle = fill\n c.fill()\n }\n }\n\n draw(dataCirclePackingByNumcol)\n yield c.canvas;\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"dataStart = dataCirclePacking // Data we will aniamte from \n// dataSequentialGrid, dataCirclePacking, dataCirclePackingByRed, dataCirclePackingByGreen","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"dataEnd = dataSequentialGrid // Data will animate to","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"viewof animationDuration = Inputs.range([1, 10], {value: 2, step: 1, label: \"Animation duration\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"

\n \n \n \n \n

","pinned":false,"hidden":false,"mode":"html"},{"id":68,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"dataSequentialGrid = getDataSequentialGrid(dataTidy)","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"dataSortedByRed = sortByCol(dataTidy, 'red')","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"dataSortedByGreen = sortByCol(dataTidy, 'green')","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"dataSortedByBlue = sortByCol(dataTidy, 'blue')","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"dataCirclePacking = getCirclePacking(dataTidy)","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"dataCirclePackingByNumcol = getDataCirclePackingByNumcol(dataTidy)","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"dataCirclePackingByRed = getCirclePacking(dataSortedByRed)","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"dataCirclePackingByGreen = getCirclePacking(dataSortedByGreen)","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"### Circle packing by number of each colour","pinned":false,"hidden":false,"mode":"md"},{"id":72,"value":"function getDataCirclePackingByNumcol(dataIn) {\n const radiusMultiplyFactor = 2\n const padding = 1 \n const uniqueColsDict = _.countBy(dataIn, d => d.fill)\n const uniqueColsArr = []\n for (const [col, num] of Object.entries(uniqueColsDict)) {\n uniqueColsArr.push({\n col: col, \n num: Math.round(Math.sqrt(num)),\n name: col, \n fill: col, \n red: +col.split(', ')[0].split('(')[1],\n green: +col.split(', ')[1],\n blue: +col.split(', ')[2].split(')')[0],\n r: Math.floor(Math.sqrt(num)*radiusMultiplyFactor) + padding\n })\n }\n const uniqueColsArrSorted = _.sortBy(\n _.cloneDeep(uniqueColsArr), c => [c.green, c.blue]\n )\n const dataCirclePackingByNumcol = d3.packSiblings(_.cloneDeep(uniqueColsArrSorted))\n return dataCirclePackingByNumcol\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"### Ordering by sequential data","pinned":false,"hidden":false,"mode":"md"},{"id":41,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"### Ordering by colour and circle packing","pinned":false,"hidden":false,"mode":"md"},{"id":37,"value":"function getCirclePacking(dataIn) {\n const circlePacking = d3.packSiblings(_.cloneDeep(dataIn))\n return circlePacking\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"### Helper function to sort the data by colour - red, green or blue.","pinned":false,"hidden":false,"mode":"md"},{"id":32,"value":"function sortByCol(dataIn, col) {\n // value of col has to be 'red', 'green' or 'blue'\n const dataClone = _.cloneDeep(dataIn)\n const dataSorted = _.sortBy(dataClone, col)\n return dataSorted\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"### Tidy the data","pinned":false,"hidden":false,"mode":"md"},{"id":176,"value":"result = _(dataTidy)\n .countBy('fill') // { 'rgb(0, 0, 0)': 4, 'rgb(12, 80, 119)': 1, ... }\n .map((count, fill) => ({ fill, count })) // convert to array of objects\n .orderBy('count', 'desc') // sort by count descending\n .value().slice(0, 1000)","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"dataTidy = tidyData(dataSample)","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"function tidyData(dataIn) {\n const data = []\n dataIn.forEach(frame => {\n frame.colours.forEach(colour => {\n data.push({\n name: frame.img,\n fill: colour,\n red: +colour.split(', ')[0].split('(')[1],\n green: +colour.split(', ')[1],\n blue: +colour.split(', ')[2].split(')')[0],\n r: radius\n })\n })\n })\n return data\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"### Constants","pinned":false,"hidden":false,"mode":"md"},{"id":20,"value":"width = 1200","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"height = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"radius = 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"## Data load","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"dataSample = data.filter((d, i) => i%4 === 0) ","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"data = FileAttachment(\"spirited-away_frames_0_100000_3col_sample_every2frames.json\").json({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"gsap = gs.gsap","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"gs = require(\"https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}