2f:T883,circleAnimation = { const width = 1200 const height = 300 const ctx = DOM.context2d(width, height); const numPoints = 200 // Pick a random palette for start and end data //const palette1 = utils.random.pick(palettes) const palette2 = utils.random.pick(palettes) /////////////////////////////// ///////// Create Data ///////// /////////////////////////////// const dataStart = _.range(0, numPoints).map(i => ({ id: i, x: Math.random()*width, y: Math.random()*height, r: Math.abs(utils.random.gaussian() * 15), fill: utils.random.pick(palette1) })) const dataEnd = _.range(0, numPoints).map(i => ({ id: i, x: Math.random()*width, y: Math.random()*height, r: Math.abs(utils.random.gaussian() * 20), fill: utils.random.pick(palette2) })) /////////////////////////////// //////// Draw Function //////// /////////////////////////////// const draw = (data) => { ctx.fillStyle = 'black' ctx.fillRect(0, 0, width, height) // Make sure to clear or fill the rect for (const { x, y, r, fill } of data ) { ctx.beginPath() ctx.arc(x, y, r, 0, 2*Math.PI) ctx.fillStyle = fill ctx.fill() } } /////////////////////////////// ////////// Animation ////////// /////////////////////////////// const animation = gsap.to(dataStart, { x: (index) => dataEnd[index].x, y: (index) => dataEnd[index].y, fill: (index) => dataEnd[index].fill, r: (index) => dataEnd[index].r, duration: 3, ease: ease, onUpdate: () => draw(dataStart) }) animation.pause() /////////////////////////////// //// Control the animation //// /////////////////////////////// const play = document.querySelector('#play-circles') const pause = document.querySelector('#pause-circles') const restart = document.querySelector('#restart-circles') const reverse = document.querySelector('#reverse-circles') play.onclick = () => animation.play() restart.onclick = () => animation.restart() pause.onclick = () => animation.pause() reverse.onclick = () => animation.reverse() // Draw the initial graph draw(dataStart) yield ctx.canvas } 30:T883,manyCirclesAnimation = { const width = 1100 const height = 600 const ctx = DOM.context2d(width, height); const numPoints = numCircles // Pick a random palette for start and end data const palette2 = utils.random.pick(palettes) /////////////////////////////// ///////// Create Data ///////// /////////////////////////////// const dataStart = _.range(0, numPoints).map(i => ({ id: i, x: Math.random()*width, y: Math.random()*height, r: Math.abs(utils.random.gaussian() * 5), fill: utils.random.pick(palette3) })) const dataEnd = _.range(0, numPoints).map(i => ({ id: i, x: Math.random()*width, y: Math.random()*height, r: Math.abs(utils.random.gaussian() * 5), fill: utils.random.pick(palette2) })) /////////////////////////////// //////// Draw Function //////// /////////////////////////////// const draw = (data) => { ctx.fillStyle = 'white' ctx.fillRect(0, 0, width, height) // Make sure to clear or fill the rect for (const { x, y, r, fill } of data ) { ctx.beginPath() ctx.arc(x, y, r, 0, 2*Math.PI) ctx.fillStyle = fill ctx.fill() } } /////////////////////////////// ////////// Animation ////////// /////////////////////////////// const animation = 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) }) animation.pause() /////////////////////////////// //// Control the animation //// /////////////////////////////// const play = document.querySelector('#play-many') const pause = document.querySelector('#pause-many') const restart = document.querySelector('#restart-many') const reverse = document.querySelector('#reverse-many') play.onclick = () => { console.log('playing'); animation.play() } restart.onclick = () => animation.restart() pause.onclick = () => animation.pause() reverse.onclick = () => animation.reverse() // Draw the initial graph draw(dataStart) yield ctx.canvas }31:T86f,circlesToPackingAnimation = { const width = 700 const height = 700 const ctx = DOM.context2d(width, height); const numPoints = 4000 /////////////////////////////// ///////// Create Data ///////// /////////////////////////////// const dataStart1 = _.range(0, numPoints).map(i => ({ id: i, x: Math.random()*width, y: Math.random()*height, r: Math.abs(utils.random.gaussian() * 5), fill: utils.random.pick(palette4), })) const dataStart = d3.packSiblings(_.cloneDeep([...dataStart1])).map(d => ({ id: d.id, x: d.x + width / 2, y: d.y + height / 2, r: d.r, fill: d.fill, })) const dataEnd = _.cloneDeep([...dataStart1]) /////////////////////////////// //////// Draw Function //////// /////////////////////////////// const draw = (data) => { ctx.fillStyle = 'white' ctx.fillRect(0, 0, width, height) // Make sure to clear or fill the rect for (const { x, y, r, fill } of data ) { ctx.beginPath() // ctx.fillRect(x - r, y - r, r * 2, r * 2) ctx.arc(x, y, r, 0, 2*Math.PI) ctx.fillStyle = fill ctx.fill() } } /////////////////////////////// ////////// Animation ////////// /////////////////////////////// const animation = 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: 'power3.out', onUpdate: () => draw(dataStart) }) animation.pause() /////////////////////////////// //// Control the animation //// /////////////////////////////// const play = document.querySelector('#play-packing') const pause = document.querySelector('#pause-packing') const restart = document.querySelector('#restart-packing') const reverse = document.querySelector('#reverse-packing') play.onclick = () => { console.log('playing'); animation.play() } restart.onclick = () => animation.restart() pause.onclick = () => animation.pause() reverse.onclick = () => animation.reverse() // Draw the initial graph draw(dataStart) yield ctx.canvas }32:T93a,circlesAnglesAnimation = { const width = 1200 const height = 300 const ctx = DOM.context2d(width, height); const numPoints = 1000 // Pick a random palette for start and end data //const palette = utils.random.pick(palettes) /////////////////////////////// ///////// Create Data ///////// /////////////////////////////// const dataStart = _.range(0, numPoints).map(i => ({ id: i, x: Math.random()*width, y: Math.random()*height, r: Math.abs(utils.random.gaussian() * 10), fill: utils.random.pick(palette5), startAngle: 0, endAngle: 2*Math.PI })) const dataEnd = dataStart.map(d => ({ id: d.id, x: d.x, y: d.y, r: Math.abs(utils.random.gaussian() * 7), fill: d.fill, startAngle: d.startAngle, endAngle: 0 //2*Math.random()*Math.PI })) /////////////////////////////// //////// Draw Function //////// /////////////////////////////// const draw = (data) => { ctx.fillStyle = 'white' ctx.fillRect(0, 0, width, height) // Make sure to clear or fill the rect for (const { x, y, r, fill, startAngle, endAngle } of data ) { ctx.beginPath() ctx.arc(x, y, r, startAngle, endAngle) ctx.fillStyle = fill ctx.fill() } } /////////////////////////////// ////////// Animation ////////// /////////////////////////////// const animation = gsap.to(dataStart, { x: (index) => dataEnd[index].x, y: (index) => dataEnd[index].y, r: (index) => dataEnd[index].r, fill: (index) => dataEnd[index].fill, startAngle: (index) => dataEnd[index].startAngle, endAngle: (index) => dataEnd[index].endAngle, duration: 0.8, stagger: 0.005, ease: 'power3.out', onUpdate: () => draw(dataStart) }) animation.pause() /////////////////////////////// //// Control the animation //// /////////////////////////////// const play = document.querySelector('#play-arc') const pause = document.querySelector('#pause-arc') const restart = document.querySelector('#restart-arc') const reverse = document.querySelector('#reverse-arc') play.onclick = () => { console.log('playing'); animation.play() } restart.onclick = () => animation.restart() pause.onclick = () => animation.pause() reverse.onclick = () => animation.reverse() // Draw the initial graph draw(dataStart) yield ctx.canvas }33:T6d5,circlesAnime = { const width = 1000 const height = 1000 const ctx = DOM.context2d(width, height); /////////////////////////////// ///////// Create Data ///////// /////////////////////////////// const dataStart = getRandomArrangement(dataTidy, width, height) const dataEnd = getCirclePacking(dataTidy, width, height) /////////////////////////////// //////// Draw Function //////// /////////////////////////////// const draw = (data) => { ctx.fillStyle = 'white' ctx.fillRect(0, 0, width, height) // Make sure to clear or fill the rect for (const { x, y, r, fill } of data ) { ctx.beginPath() ctx.arc(x, y, r, 0, 2*Math.PI) ctx.fillStyle = fill ctx.fill() } } /////////////////////////////// ////////// Animation ////////// /////////////////////////////// const animation = 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: 'power3.out', onUpdate: () => draw(dataStart) }) animation.pause() /////////////////////////////// //// Control the animation //// /////////////////////////////// const play = document.querySelector('#play-anime') const pause = document.querySelector('#pause-anime') const restart = document.querySelector('#restart-anime') const reverse = document.querySelector('#reverse-anime') play.onclick = () => { console.log('playing'); animation.play() } restart.onclick = () => animation.restart() pause.onclick = () => animation.pause() reverse.onclick = () => animation.reverse() // Draw the initial graph draw(dataStart) yield ctx.canvas }34:[{"id":"f8934c38ef2970c98eaef4289ff726bd95891d3345e8766931cdf142cba47cfddc497165b05c73afb460a18dcb8788edf3e84882cf69c2cf171a56c639a7b19c","href":"https://static.observableusercontent.com/files/f8934c38ef2970c98eaef4289ff726bd95891d3345e8766931cdf142cba47cfddc497165b05c73afb460a18dcb8788edf3e84882cf69c2cf171a56c639a7b19c","name":"spirited-away_frames_0_100000_3col_sample_every2frames.json","type":"application/json","lastModified":1665091402201.259,"size":4988880},{"id":"ce0bfaa1662e03075e61967e7b3a404aa800892c88292110475cabaebfd3a228ab103dfe07d2ba2e6a45c25c20d92f972f1e82e5e908d26c72544aa96bcccc77","href":"https://static.observableusercontent.com/files/ce0bfaa1662e03075e61967e7b3a404aa800892c88292110475cabaebfd3a228ab103dfe07d2ba2e6a45c25c20d92f972f1e82e5e908d26c72544aa96bcccc77","name":"1000.json","type":"application/json","lastModified":1664796696145.639,"size":51585},{"id":"3bcdacaa930db167eaaa1e028c32e1c49a8f6710531d96ccf6e64c911077bc4a7fd404c8bdc0335937786f1c79ce205918f834b1cf9048391049c084ff9728a8","href":"https://static.observableusercontent.com/files/3bcdacaa930db167eaaa1e028c32e1c49a8f6710531d96ccf6e64c911077bc4a7fd404c8bdc0335937786f1c79ce205918f834b1cf9048391049c084ff9728a8","name":"only-yesterday_frames_0_70000_3col_sample_every2frames.json","type":"application/json","lastModified":1665090468073.363,"size":2560199},{"id":"989d3cd137122ada65f213ea3837e357389cd73a3c60acf3b7f049a4112eccbbe7f0b977c91eda6bcd0e96972895598f9341620ab38a203a653776b08cc0f915","href":"https://static.observableusercontent.com/files/989d3cd137122ada65f213ea3837e357389cd73a3c60acf3b7f049a4112eccbbe7f0b977c91eda6bcd0e96972895598f9341620ab38a203a653776b08cc0f915","name":"totoro_frames_0_124000_3col_sample_every7frames.json","type":"application/json","lastModified":1665092239590.774,"size":1733846}] 2d:{"title":"Animating Canvas with GSAP - END","cells":[{"id":0,"value":"# Animating Canvas with GSAP - END","pinned":false,"hidden":false,"mode":"md"},{"id":297,"value":"# ✨ Basics of Canvas animation with GSAP ✨","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"## 1. Random circles changing position and colour\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":20,"value":"

\n \n \n \n \n

","pinned":false,"hidden":false,"mode":"html"},{"id":83,"value":"Run the sell below to get a new random starting colour palette.","pinned":false,"hidden":false,"mode":"md"},{"id":80,"value":"palette1 = utils.random.pick(palettes)","pinned":true,"hidden":false,"mode":"ojs"},{"id":85,"value":"viewof ease = Inputs.select(['bounce', 'linear', 'power2.out', 'power3.out', 'slow'], {label: \"Select an ease function\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":98,"value":"## 2. How many circles can we animate? \nThe animation above is cute, but we can do the same thing easily with SVG. However, with Canvas we can animate tens of thousands of circles (or anything). ","pinned":false,"hidden":false,"mode":"md"},{"id":116,"value":"palette3 = utils.random.pick(palettes) // re-run this cell to update colours","pinned":true,"hidden":false,"mode":"ojs"},{"id":139,"value":"viewof numCircles = Inputs.range([5000, 50000], {value: 20000, step: 5000, label: \"Number of circles\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"

\n \n \n \n \n

","pinned":false,"hidden":false,"mode":"md"},{"id":100,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":174,"value":"## 3. Random positions to circle packing\nUsing d3's circle packing to create a layout of tightly packed circles and animate to that from random starting positions. ","pinned":false,"hidden":false,"mode":"md"},{"id":176,"value":"palette4 = utils.random.pick(palettes) // re-run this cell to update colours","pinned":true,"hidden":false,"mode":"ojs"},{"id":154,"value":"

\n \n \n \n \n

","pinned":false,"hidden":false,"mode":"html"},{"id":157,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"## 4. Semi-circles","pinned":false,"hidden":false,"mode":"md"},{"id":211,"value":"palette5 = utils.random.pick(palettes) // re-run this cell to update colours","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"

\n \n \n \n \n

","pinned":false,"hidden":false,"mode":"html"},{"id":187,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"# ✨✨ Anime ✨✨","pinned":false,"hidden":false,"mode":"md"},{"id":246,"value":"

\n \n \n \n \n

","pinned":false,"hidden":false,"mode":"html"},{"id":248,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"function getRandomArrangement(dataIn, width, height) {\n const dataRandomArrangement = _.range(0, dataIn.length - 1).map(i => ({\n name: dataIn[i].name,\n x: Math.random()*width,\n y: Math.random()*height,\n r: Math.abs(utils.random.gaussian() * 5),\n fill: dataIn[i].fill,\n red: dataIn[i].red,\n green: dataIn[i].green,\n blue: dataIn[i].blue,\n }))\n return dataRandomArrangement\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":237,"value":"function getCirclePacking(dataIn, width, height) {\n const dataClone = _.cloneDeep([...dataIn])\n const circlePacking = d3.packSiblings(dataClone).map(d => ({\n x: d.x + width /2,\n y: d.y + height / 2,\n r: d.r,\n fill: d.fill,\n red: d.red,\n green: d.green,\n blue: d.blue,\n }))\n return circlePacking\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":233,"value":"dataTidy = tidyData(dataSample)","pinned":true,"hidden":false,"mode":"ojs"},{"id":225,"value":"function tidyData(dataIn) {\n const radius = 2.5\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":235,"value":"dataSample = dataRaw.filter((d, i) => i%5 === 0) // Take every 5th frame; you can change this to experiment.","pinned":true,"hidden":false,"mode":"ojs"},{"id":231,"value":"dataRaw = spiritedAway","pinned":true,"hidden":false,"mode":"ojs"},{"id":228,"value":"onlyYesterday = FileAttachment(\"only-yesterday_frames_0_70000_3col_sample_every2frames.json\").json({ typed: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"spiritedAway = FileAttachment(\"spirited-away_frames_0_100000_3col_sample_every2frames.json\").json({ typed: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"totoro = FileAttachment(\"totoro_frames_0_124000_3col_sample_every7frames.json\").json({ typed: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"# ✨ 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":307,"value":"### Final thoughts... \nIf you want to reach out with any questions after this workshop, or have any suggestions for other notebooks with examples you'd like me to create, please email me at hello@deabankova.com or poke me on twitter @deabankova 😊","pinned":false,"hidden":false,"mode":"md"},{"id":182,"value":"### Load Libraries","pinned":false,"hidden":false,"mode":"md"},{"id":45,"value":"utils = require('https://cdn.jsdelivr.net/npm/canvas-sketch-util-umd@1.10.6/lib/index.umd.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"palettes = FileAttachment(\"1000.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"gsap = gs.gsap","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"gs = require(\"https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W34","stdlib":"1","titling":"auto"}