2f:T85a,simpleAnimationCanvas = { const width = 1200 const height = 300 const c = DOM.context2d(width, height); ///////////////////////////////////// //////////// Create data //////////// ///////////////////////////////////// const dataStart = _.range(0, 200).map(i => ({ id: i, x: Math.random()*width, y: Math.random()*height, r: Math.random()*30, fill: `rgb(${Math.round(Math.random()*255)}, ${Math.round(Math.random()*255)}, ${Math.round(Math.random()*255)})` })) const dataEnd = _.range(0, 200).map(i => ({ id: i, x: Math.random()*width, y: Math.random()*height, r: Math.random()*20, fill: `rgb(${Math.round(Math.random()*255)}, ${Math.round(Math.random()*255)}, ${Math.round(Math.random()*255)})` })) ///////////////////////////////////// /////////// Draw function /////////// ///////////////////////////////////// const draw = (data) => { c.fillStyle = "black" c.fillRect(0, 0, width, height); // Make sure to clear or fill the rect for (const { x, y, r, fill } of data) { c.beginPath(); c.arc(x, y, r, 0, 2*Math.PI) c.fillStyle = fill c.fill() } } ///////////////////////////////////// ///////////// Animation ///////////// ///////////////////////////////////// const tl = gsap.to(dataStart, { x: (index) => dataEnd[index].x, y: (index) => dataEnd[index].y, r: (index) => dataEnd[index].r, fill: (index) => dataEnd[index].fill, duration: 3, //stagger: 0.01, ease: 'bounce', onUpdate: () => draw(dataStart) }) tl.pause() ///////////////////////////////// ///// Control the animation ///// ///////////////////////////////// const play = document.querySelector("#play-test"); const pause = document.querySelector("#pause-test"); const restart = document.querySelector("#restart-test"); const reverse = document.querySelector("#reverse-test"); play.onclick = () => tl.play(); restart.onclick = () => tl.restart() pause.onclick = () => tl.pause(); reverse.onclick = () => tl.reverse(); draw(dataStart) yield c.canvas; }30:T600,{ 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) { c.beginPath(); c.arc(x, y, 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, duration: animationDuration, //stagger: 0.1, stagger: { amount: 2 }, ease: 'linear', //elastic onUpdate: () => draw(dataStart) }); tl.pause() ///////////////////////////////// ///// Control the 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; }31: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 }32:[{"id":"73c7f991fe855841855184977770b61001b38a0d22ef21857f92aa38da125f67d97557daa60fd3795555297043eacc7d3332491527d258b1be3b4eaa1251e4df","href":"https://static.observableusercontent.com/files/73c7f991fe855841855184977770b61001b38a0d22ef21857f92aa38da125f67d97557daa60fd3795555297043eacc7d3332491527d258b1be3b4eaa1251e4df","name":"arcane_ep1_frames_0_62484_3col_sample_every3frames.json","type":"application/json","lastModified":1663878860586.861,"size":2011063},{"id":"989d3cd137122ada65f213ea3837e357389cd73a3c60acf3b7f049a4112eccbbe7f0b977c91eda6bcd0e96972895598f9341620ab38a203a653776b08cc0f915","href":"https://static.observableusercontent.com/files/989d3cd137122ada65f213ea3837e357389cd73a3c60acf3b7f049a4112eccbbe7f0b977c91eda6bcd0e96972895598f9341620ab38a203a653776b08cc0f915","name":"totoro_frames_0_100000_3col_sample_every7frames.json","type":"application/json","lastModified":1663870771217.525,"size":1733846},{"id":"f8934c38ef2970c98eaef4289ff726bd95891d3345e8766931cdf142cba47cfddc497165b05c73afb460a18dcb8788edf3e84882cf69c2cf171a56c639a7b19c","href":"https://static.observableusercontent.com/files/f8934c38ef2970c98eaef4289ff726bd95891d3345e8766931cdf142cba47cfddc497165b05c73afb460a18dcb8788edf3e84882cf69c2cf171a56c639a7b19c","name":"spirited-away_frames_0_100000_3col_sample_every2frames.json","type":"application/json","lastModified":1664311798125.154,"size":4988880},{"id":"ced27aa0381f0094822bfb7eacd79fec90b8427af48ac773ffd401077f4a178ada0d364d5d6cd187ac2604fa4bd7ca3967853395d45e126df7d89b62d498fbba","href":"https://static.observableusercontent.com/files/ced27aa0381f0094822bfb7eacd79fec90b8427af48ac773ffd401077f4a178ada0d364d5d6cd187ac2604fa4bd7ca3967853395d45e126df7d89b62d498fbba","name":"kimi-no-na-wa_frames_0_20000_3col_sample_every2frames.json","type":"application/json","lastModified":1664399484201.744,"size":1002261},{"id":"807c9ce4514804c5d387e0915359bb75f42b2bd81f882135e63ba140d9f1de9af412214218468187aeab6f1e704a7549dc774bd32454d57149065651d65147b5","href":"https://static.observableusercontent.com/files/807c9ce4514804c5d387e0915359bb75f42b2bd81f882135e63ba140d9f1de9af412214218468187aeab6f1e704a7549dc774bd32454d57149065651d65147b5","name":"only-yesterday_frames_0_20000_3col_sample_every2frames.json","type":"application/json","lastModified":1664525746105.344,"size":1026575},{"id":"3bcdacaa930db167eaaa1e028c32e1c49a8f6710531d96ccf6e64c911077bc4a7fd404c8bdc0335937786f1c79ce205918f834b1cf9048391049c084ff9728a8","href":"https://static.observableusercontent.com/files/3bcdacaa930db167eaaa1e028c32e1c49a8f6710531d96ccf6e64c911077bc4a7fd404c8bdc0335937786f1c79ce205918f834b1cf9048391049c084ff9728a8","name":"only-yesterday_frames_0_70000_3col_sample_every2frames.json","type":"application/json","lastModified":1664742493765.252,"size":2560199}] 2d:{"title":"Animating Canvas with GSAP","cells":[{"id":0,"value":"# Animating Canvas with GSAP","pinned":false,"hidden":false,"mode":"md"},{"id":402,"value":"## 1. ✨ Basics of Canvas animation with GSAP ✨\nThe approach will be to animate one array of x, y positions and other properties into another array of x, y positions and other corresponding properties. We will use GSAP for that. Then while the 'animation' of the arrays into each other is happening, we will re-draw the canvas with each intermediate value. This will create the illusion of the elements moving. ","pinned":false,"hidden":false,"mode":"md"},{"id":313,"value":"

\n \n \n \n \n

","pinned":false,"hidden":false,"mode":"html"},{"id":291,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":406,"value":"## 2. ✨ Animate between two different layouts - circle packing and grid ✨","pinned":false,"hidden":false,"mode":"md"},{"id":97,"value":"dataStart = dataCirclePackingByRed // Data we will animate from ","pinned":true,"hidden":false,"mode":"ojs"},{"id":131,"value":"dataEnd = dataSequentialGrid // Data will animate to","pinned":true,"hidden":false,"mode":"ojs"},{"id":198,"value":"viewof animationDuration = Inputs.range([1, 10], {value: 2, step: 1, label: \"Animation duration\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"

\n \n \n \n \n

","pinned":false,"hidden":false,"mode":"md"},{"id":86,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":283,"value":"### Get various options for the data arrangement","pinned":false,"hidden":false,"mode":"md"},{"id":190,"value":"dataSequentialGrid = getDataSequentialGrid(dataTidy)","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"dataCirclePacking = getCirclePacking(dataTidy)","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"dataCirclePackingByRed = getCirclePacking(dataSortedByRed)","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"dataCirclePackingByGreen = getCirclePacking(dataSortedByGreen)","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"dataSortedByGreen = sortByCol(dataTidy, 'green')","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"dataSortedByRed = sortByCol(dataTidy, 'red')","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"## Layout #2 - Ordering by sequential data in a grid\nHere we add x and y positions to the data such that they are arranged in a grid. In other words, the first few colours of the animation will appear on the first row of a grid, then the next few on the second row, etc. We use D3 band scales for that. ","pinned":false,"hidden":false,"mode":"md"},{"id":58,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"## Layout #1 - Ordering by colour and circle packing","pinned":false,"hidden":false,"mode":"md"},{"id":264,"value":"Helper function to create a circle packing array out of the data using D3's circle packing. Note that all we need for the circle packing to be created is a radius *r* property for each entry. Then d3.packSiblings will automatically compute the x and y values for each entry. ","pinned":false,"hidden":false,"mode":"md"},{"id":48,"value":"function getCirclePacking(dataIn) {\n const dataClone = _.cloneDeep(dataIn)\n const circlePacking = d3.packSiblings(dataClone)\n return circlePacking\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":262,"value":"Helper function to sort the data by colour - red, green or blue.","pinned":false,"hidden":false,"mode":"md"},{"id":30,"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":147,"value":"## Tidy data\nHere we just transform the data so that each row (entry) contains exactly one colour. Some colours will be repeated, naturally. We also extract the red, green and blue values for each entry, so that we can use them to sort the data. ","pinned":false,"hidden":false,"mode":"md"},{"id":28,"value":"dataTidy = tidyData(dataSample)","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"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":156,"value":"### Constants","pinned":false,"hidden":false,"mode":"md"},{"id":78,"value":"height = width","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"width = 900","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"radius = 2.5 // How big the circle for each colour-entry will be","pinned":true,"hidden":false,"mode":"ojs"},{"id":216,"value":"## About the data and task\n### Load data and filter\n- The data that we will work with consists for 3 colours per frame of the frames of 3 animations: Totoro, Spirited Away and Arcane. Colours are not extracted from every frame as that would give us a huge dataset!\n- We further reduce the number of frames from which to consider the colours by sampling. This is to ensure we don't overload the canvas and it can run the animations smoothly.\n \n### Goal\nOur goal is to **visualise the colours** and to **animate between different visualisations**. ","pinned":false,"hidden":false,"mode":"md"},{"id":23,"value":"dataSample = data.filter((d, i) => i%5 === 0) // Take every 5th frame; you can change this to experiment.","pinned":true,"hidden":false,"mode":"ojs"},{"id":227,"value":"data = datasets[selectedDatasetName]","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"viewof selectedDatasetName = Inputs.select(['spiritedAway', 'totoro', 'arcane', 'kimiNoNaWa'], {label: \"Select a dataset to work with\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"datasets = ({ totoro: dataTotoro, arcane: dataArcane, spiritedAway: dataSpiritedAway, kimiNoNaWa: dataOnlyYesterday })","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"dataSpiritedAway = FileAttachment(\"spirited-away_frames_0_100000_3col_sample_every2frames.json\").json({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"dataOnlyYesterday = FileAttachment(\"only-yesterday_frames_0_70000_3col_sample_every2frames.json\").json({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"dataTotoro = FileAttachment(\"totoro_frames_0_100000_3col_sample_every7frames.json\").json({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"dataArcane = FileAttachment(\"arcane_ep1_frames_0_62484_3col_sample_every3frames.json\").json({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"dataKiminonawa = FileAttachment(\"kimi-no-na-wa_frames_0_20000_3col_sample_every2frames.json\").json({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"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"},{"id":408,"value":"## 3. ✨ Further examples! ✨\n** What we did here plus more**\n- [Colours in Spirited Away - animating Canvas with GSAP](https://observablehq.com/@deaxmachina/all-the-colours-in-spirited-away)\n- [Colours in Totoro - animating Canvas with GSAP](https://observablehq.com/@deaxmachina/all-the-colours-in-totoro)\n- [Colours in Arcane - animating Canvas with GSAP](https://observablehq.com/@deaxmachina/colours-in-arcane)\n\n** Other examples **\n- [Circle packing with D3, Canvas with GSAP animation](https://observablehq.com/@deaxmachina/circle-packing-with-canvas-and-gsap-animation)\n- [Animating lots of Three.js particles with GSAP](https://observablehq.com/@deaxmachina/animating-lots-of-three-js-particles-with-gsap)","pinned":false,"hidden":false,"mode":"md"},{"id":247,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W32","stdlib":"1","titling":"auto"}