2a:null 2b:["$","title",null,{"children":"Creative Coding with JavaScript workshop | Dea Bankova | Observable"}] 30:T59f,{ const width = 1200 const height = 500 const ctx = DOM.context2d(width, height); const petalPaths = [ 'M0 0 C50 50 50 100 0 100 C-50 100 -50 50 0 0', 'M0,0 C50,40 50,70 20,100 L0,85 L-20,100 C-50,70 -50,40 0,0', 'M0 0 C50 25 50 75 0 100 C-50 75 -50 25 0 0', ] const drawFlower = (colour='pink', scale = 1, x=100, y=100, petalsIncrement=Math.PI*0.05) => { // Create the path const d = petalPaths[1] const p = new Path2D(d) // Settings ctx.save() // start new settings ctx.fillStyle = colour ctx.translate(x, y) ctx.scale(scale, scale) // Draw the petals ctx.beginPath() _.range(0, Math.PI*2, petalsIncrement).map(i => { ctx.rotate(i) ctx.fill(p) ctx.stroke(p) }) ctx.restore() // restore to default settings - for scale and translate } // Set the background ctx.lineWidth = 2 ctx.fillStyle = '#E5B80B' ctx.strokeStyle = 'gold' ctx.fillRect(0, 0, width, height) // Call the drawFlower function 50 times for (let i = 0; i < 50; i++) { const scale = Math.max(0.4, Math.random()) const x = Math.random()*width const y = Math.random()*height // Draw larger pink flowers drawFlower('#ffb7c5', scale, x, y, Math.PI*0.1) // Draw smaller white flowers on top of the pink ones drawFlower('#fff', scale*0.5, x, y, Math.PI*0.5) } yield ctx.canvas; }31:T43a,{ const width = 1200 const height = 400 const ctx = DOM.context2d(width, height); _.range(0, 200).map(i => { const cx = Math.random()*width const cy = Math.random()*height const r = Math.random()*50 const l = Math.PI * 2 // Radial gradient option const radgrad = ctx.createRadialGradient(cx, cy, 0, cx, cy, r) radgrad.addColorStop(0, 'white') radgrad.addColorStop(0.9, 'aqua') radgrad.addColorStop(1, "black") // More complex gradient const radgrad1 = ctx.createRadialGradient(cx, cy, 0, cx, cy, r) radgrad1.addColorStop(Math.min(0.2, Math.floor(Math.random())), "white") radgrad1.addColorStop(0.85, `rgba( ${Math.max(150, Math.random()*255)}, ${0}, ${Math.max(180, Math.random()*255)}, ${Math.random()*2} )`) radgrad1.addColorStop(1, "white") ctx.beginPath() ctx.arc(cx, cy, r, 0, l, i%2===0 ? true : false) ctx.fillStyle = radgrad1 ctx.fill() ctx.closePath() }) yield ctx.canvas; }32:T52d,{ const width = 1200 const height = 400 const ctx = DOM.context2d(width, height); let i = 0 const draw = () => { //ctx.clearRect(0, 0, width, height) _.range(0, 200).map(i => { const cx = Math.random()*width const cy = Math.random()*height const r = Math.random()*50 const l = Math.PI * 2 // Radial gradient option const radgrad = ctx.createRadialGradient(cx, cy, 0, cx, cy, r) radgrad.addColorStop(0, 'white') radgrad.addColorStop(0.9, 'aqua') radgrad.addColorStop(1, "black") // More complex gradient const radgrad1 = ctx.createRadialGradient(cx, cy, 0, cx, cy, r) radgrad1.addColorStop(Math.min(0.2, Math.floor(Math.random())), "white") radgrad1.addColorStop(0.85, `rgba( ${Math.max(150, Math.random()*255)}, ${0}, ${Math.max(180, Math.random()*255)}, ${Math.random()*2} )`) radgrad1.addColorStop(1, "white") ctx.beginPath() ctx.arc(cx, cy, r, 0, l, i%2===0 ? true : false) ctx.fillStyle = radgrad1 ctx.fill() ctx.closePath() }) if (i<100) { window.requestAnimationFrame(draw) } i++ } draw() yield ctx.canvas; }33:T892,simpleAnimationCanvas = { const width = 1200 const height = 500 const ctx = DOM.context2d(width, height); ///////////////////////////////////// //////////// Create data //////////// ///////////////////////////////////// const numCircles = 300 // Pick a random palette for start and end data const palette1 = utils.random.pick(palettes) const palette2 = utils.random.pick(palettes) const dataStart = _.range(0, numCircles).map(i => ({ id: i, x: Math.random()*width, y: Math.random()*height, r: Math.random()*20, fill: utils.random.pick(palette1) })) const dataEnd = _.range(0, numCircles).map(i => ({ id: i, x: Math.random()*width, y: Math.random()*height, r: Math.abs(utils.random.gaussian(20, 5)), 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 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, 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 ctx.canvas; }34:T544,{ const width = 1200 // adjust const height = 400 // adjust const ctx = DOM.context2d(width, height) const numDatapoints = 23 // Data const dataStart = _.range(0, numDatapoints).map(i => { const data = { id: i, x: i*50 + 25, y: 25, r: 15, fill: '#999' } return data }) const dataEnd = _.range(0, numDatapoints).map(i => { const data = { id: i, x: i*50 + 50*(Math.random() - 0.5), y: height - 35, r: 25, fill: '#E5B80B' } return data }) // Draw const draw = (data) => { ctx.fillStyle = '#fff' ctx.strokeStyle = '#999' ctx.fillRect(0, 0, width, height) for (const { x, y, r, fill } of data) { ctx.beginPath() ctx.arc(x, y, r, 0, 2*Math.PI) ctx.fillStyle = fill ctx.fill() ctx.stroke() } } // Animate const timeline = gsap.timeline() .to(dataStart, { x: index => dataEnd[index].x, y: index => dataEnd[index].y, r: index => dataEnd[index].r, fill: index => dataEnd[index].fill, duration: 2, stagger: 0.2, ease: 'bounce', repeat: -1, yoyo: true, onUpdate: () => draw(dataStart) }) yield ctx.canvas }35:T5e3,{ 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: { amount: 2 }, ease: 'linear', 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; }36:T623,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 entry 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 }37:[{"id":"139398bed4860119eb8bb3c6f096c0b8c322b1efd3343b44af8313d18e2bf3d84fe9f235b63a2b2df18e4dbae419739c2804cf978b6cceb83e4da34d68c3e892","href":"https://static.observableusercontent.com/files/139398bed4860119eb8bb3c6f096c0b8c322b1efd3343b44af8313d18e2bf3d84fe9f235b63a2b2df18e4dbae419739c2804cf978b6cceb83e4da34d68c3e892","name":"1000.json","type":"application/json","lastModified":1695560989694.737,"size":51585},{"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":1695487946572.749,"size":1002261},{"id":"3bcdacaa930db167eaaa1e028c32e1c49a8f6710531d96ccf6e64c911077bc4a7fd404c8bdc0335937786f1c79ce205918f834b1cf9048391049c084ff9728a8","href":"https://static.observableusercontent.com/files/3bcdacaa930db167eaaa1e028c32e1c49a8f6710531d96ccf6e64c911077bc4a7fd404c8bdc0335937786f1c79ce205918f834b1cf9048391049c084ff9728a8","name":"only-yesterday_frames_0_70000_3col_sample_every2frames.json","type":"application/json","lastModified":1695487946572.749,"size":2560199},{"id":"f8934c38ef2970c98eaef4289ff726bd95891d3345e8766931cdf142cba47cfddc497165b05c73afb460a18dcb8788edf3e84882cf69c2cf171a56c639a7b19c","href":"https://static.observableusercontent.com/files/f8934c38ef2970c98eaef4289ff726bd95891d3345e8766931cdf142cba47cfddc497165b05c73afb460a18dcb8788edf3e84882cf69c2cf171a56c639a7b19c","name":"spirited-away_frames_0_100000_3col_sample_every2frames.json","type":"application/json","lastModified":1695487946572.749,"size":4988880},{"id":"989d3cd137122ada65f213ea3837e357389cd73a3c60acf3b7f049a4112eccbbe7f0b977c91eda6bcd0e96972895598f9341620ab38a203a653776b08cc0f915","href":"https://static.observableusercontent.com/files/989d3cd137122ada65f213ea3837e357389cd73a3c60acf3b7f049a4112eccbbe7f0b977c91eda6bcd0e96972895598f9341620ab38a203a653776b08cc0f915","name":"totoro_frames_0_100000_3col_sample_every7frames.json","type":"application/json","lastModified":1695487946572.749,"size":1733846}] 2e:{"id":"2f7281ee025c58fb","slug":"creative-coding-with-javascript-workshop","title":"Creative Coding with JavaScript workshop","thumbnail":"6cc863a809d27a6ae737e820b3fc90df39bed96ba15177dc04a61feddeec4c2f","access_level":"public","create_time":"$D2023-09-23T16:52:26.572Z","update_time":"$D2023-10-12T20:15:33.052Z","view_time":null,"first_public_time":"$D2023-10-12T20:14:09.214Z","fork":{"id":"14b6e45f3c9100f3","slug":null,"title":"Animating Canvas with GSAP","owner":{"id":"ff1e8a7fac805262","login":"deaxmachina","name":"Dea Bankova"}},"stars":13,"starred":false,"owner":{"type":"team","id":"ff1e8a7fac805262","login":"deaxmachina","name":"Dea Bankova","avatar_url":"https://avatars-next.observableusercontent.com/a308b4ba2fa30b481d3ab1406f4359318e3fd5edded8e9b84c8b3a2fd8831a1a","tier":"starter_2024"},"version":1616,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"02cf083ba1ef32dd","login":"deaxmachina","name":"Dea Bankova","avatar_url":"https://avatars-next.observableusercontent.com/a308b4ba2fa30b481d3ab1406f4359318e3fd5edded8e9b84c8b3a2fd8831a1a","tier":null}],"members":[{"type":"individual","id":"02cf083ba1ef32dd","login":"deaxmachina","name":"Dea Bankova","avatar_url":"https://avatars-next.observableusercontent.com/a308b4ba2fa30b481d3ab1406f4359318e3fd5edded8e9b84c8b3a2fd8831a1a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":27,"collection":null,"type":"notebook","body":{"title":"Creative Coding with JavaScript workshop","cells":[{"id":625,"value":"# Creative Coding with JavaScript workshop \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1101,"value":"## Part I: HTML5 Canvas & GSAP animations\nMaterials for the hands-on part of the\n[workshop by Le Wagon Tokyo](https://www.meetup.com/le-wagon-tokyo-coding-station/events/296138163/), \"Creative coding with Javascript\". \n[Here](https://deaxmachina.mmm.page/creative_coding_workshop) is the accompanying presentation. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":445,"value":"The MDN docs for Canvas are an excellent learning resource. You can find them here: [Docs](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":433,"value":"Note: There are some differences between how you'd start drawing on a HTML `