31:T619,coloursGraph = { // bring in the control buttons const byRandom = document.querySelector("#random"); const byGreen = document.querySelector("#green"); const byGreenReverse = document.querySelector("#green-reverse"); const byHue = document.querySelector("#hue"); // start from random sort let sortFunction = c => c.fill.split(', ')[2] //const width = 1400; const height = width; const c = DOM.context2d(width, height); c.translate(width/2, height/2); // draw function function draw(sortFunction) { // get data const circlePackingColourCountsSorted = getCirclePackingColourCountsSorted(dataRaw, sortFunction) // draw the shape c.fillStyle = "#111" c.fillRect(-width/2, -height/2, width, height); // make sure to clear or fill the rect for (const { x, y, r, fill } of circlePackingColourCountsSorted) { c.beginPath(); c.arc(x, y, r-padding, 0, 2*Math.PI) //c.rect(x-r, y-r, r*2-padding, r*2-padding) c.fillStyle = fill c.fill() } } // run the drawing logic draw(sortFunction) // each time a button is clicked, change the colour section function and draw again byRandom.onclick = () => { sortFunction = c => c.fill.split(', ')[2] draw(sortFunction) } byGreen.onclick = () => { sortFunction = c => c.colRGB[1] draw(sortFunction) } byGreenReverse.onclick = () => { sortFunction = c => -c.colRGB[1] draw(sortFunction) } byHue.onclick = () => { sortFunction = c => -c.colHSL[0] draw(sortFunction) } yield c.canvas; }32:T60f,{ // Get data const sorted = getSorted(dataRaw) const sequentialSquare = getSequentialSquare(dataRaw) //const width = 1200; const height = width; // bring in the animation control buttons const play = document.querySelector("#play"); const reverse = document.querySelector("#reverse"); const c = DOM.context2d(width, height); c.translate(width/2, height/2); /// 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(sequentialSquare, { x: (index, target, targets) => sorted[index].x, y: (index, target, targets) => sorted[index].y, fill: (index, target, targets) => sorted[index].fill, r: (index, target, targets) => sorted[index].r, duration: 1, ease: 'power.3.out', stagger: { amount: 2 }, onUpdate: animate }); // this is what happens on update of the gsap animation function animate() { c.fillStyle = "black" c.fillRect(-width/2, -height/2, width, height); // make sure to clear or fill the rect for (const { x, y, r, fill } of sequentialSquare) { 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(); reverse.onclick = () => tl.reverse(); yield c.canvas; }33:[{"id":"e45c2ff9975f78cd66584a47987a21f8c8cdbb440d5ae64050d96f123ee18ed1473bc06eaecff9a9f5ddaa1b376c27e03805d72c7ce1a6d42c378e144c4e76df","href":"https://static.observableusercontent.com/files/e45c2ff9975f78cd66584a47987a21f8c8cdbb440d5ae64050d96f123ee18ed1473bc06eaecff9a9f5ddaa1b376c27e03805d72c7ce1a6d42c378e144c4e76df","name":"arcane_ep4_frames_0_58630_3col_sample_every3frames.json","type":"application/json","lastModified":1643907190179.147,"size":1863335},{"id":"9adccb92f46396f9e56bb9ae6678a489e8e69c1cf2bce0b381933d676333e78b4cc3e1a9c1b3deee56033ec46d3631a8a7db6b8648e670d6faa408397ff15517","href":"https://static.observableusercontent.com/files/9adccb92f46396f9e56bb9ae6678a489e8e69c1cf2bce0b381933d676333e78b4cc3e1a9c1b3deee56033ec46d3631a8a7db6b8648e670d6faa408397ff15517","name":"arcane_ep6_frames_0_60650_3col_sample_every3frames.json","type":"application/json","lastModified":1644058082924.489,"size":1908052},{"id":"49988d80304cafda4b4a3c6bb757de9701cef58669828590a9c40acad304a332024cf66c4fa7c5684daf1fb6742892c34993a4e04b37d96b801516947f1b5f1d","href":"https://static.observableusercontent.com/files/49988d80304cafda4b4a3c6bb757de9701cef58669828590a9c40acad304a332024cf66c4fa7c5684daf1fb6742892c34993a4e04b37d96b801516947f1b5f1d","name":"arcane_ep7_frames_0_57500_3col_sample_every3frames.json","type":"application/json","lastModified":1644090356262.533,"size":1831733},{"id":"2537a75ec77bee26445397d526ed08a51c2f017d1f4acbd4c97b5fc4a66e5171f06b99c430cdefb187335c9fe4136fe7f88b771c69ea75747e94b6ba431334f8","href":"https://static.observableusercontent.com/files/2537a75ec77bee26445397d526ed08a51c2f017d1f4acbd4c97b5fc4a66e5171f06b99c430cdefb187335c9fe4136fe7f88b771c69ea75747e94b6ba431334f8","name":"arcane_ep9_frames_0_59160_3col_sample_every3frames.json","type":"application/json","lastModified":1644231117932.781,"size":1865960},{"id":"73c7f991fe855841855184977770b61001b38a0d22ef21857f92aa38da125f67d97557daa60fd3795555297043eacc7d3332491527d258b1be3b4eaa1251e4df","href":"https://static.observableusercontent.com/files/73c7f991fe855841855184977770b61001b38a0d22ef21857f92aa38da125f67d97557daa60fd3795555297043eacc7d3332491527d258b1be3b4eaa1251e4df","name":"arcane_ep1_frames_0_62484_3col_sample_every3frames.json","type":"application/json","lastModified":1643641120253.18,"size":2011063},{"id":"37ee6b72a69a9327bb7d6e2d3dea1b9c3db559335e5128d42483e9a80688d2ad176f37a385974265449a23fe9994218124c4b824261dbe2d9890bed009209b42","href":"https://static.observableusercontent.com/files/37ee6b72a69a9327bb7d6e2d3dea1b9c3db559335e5128d42483e9a80688d2ad176f37a385974265449a23fe9994218124c4b824261dbe2d9890bed009209b42","name":"arcane_ep2_frames_0_58360_3col_sample_every3frames.json","type":"application/json","lastModified":1643740656438.73,"size":1852963},{"id":"354ce0ef73f53a163797729877c1f88018d8571cb96307ee28885276a063163bd9d27a40eab9177538294464432d59394b7baec985bf1ddf95dd7d5866b7f32e","href":"https://static.observableusercontent.com/files/354ce0ef73f53a163797729877c1f88018d8571cb96307ee28885276a063163bd9d27a40eab9177538294464432d59394b7baec985bf1ddf95dd7d5866b7f32e","name":"arcane_ep8_frames_0_58220_3col_sample_every3frames.json","type":"application/json","lastModified":1644153835819.427,"size":1850611},{"id":"ee15d393e4de3cd4d324d3caafa8778f34e8e95c475edc19216e496727fa8a7e3d31784c89117ba8346f1a6556ac5b9c70f80b05d1edf5e684c65703767ec4f8","href":"https://static.observableusercontent.com/files/ee15d393e4de3cd4d324d3caafa8778f34e8e95c475edc19216e496727fa8a7e3d31784c89117ba8346f1a6556ac5b9c70f80b05d1edf5e684c65703767ec4f8","name":"arcane_ep5_frames_0_58440_3col_sample_every3frames.json","type":"application/json","lastModified":1643973637097.873,"size":1845308},{"id":"03e0e576e1db19b578d81ff0ef3a19948a508c378cf1413e7a6eaafd4e21ac8ae866bb315e167e9d405c791de4b84fc0f255d99901bc04643699dfca62cbd545","href":"https://static.observableusercontent.com/files/03e0e576e1db19b578d81ff0ef3a19948a508c378cf1413e7a6eaafd4e21ac8ae866bb315e167e9d405c791de4b84fc0f255d99901bc04643699dfca62cbd545","name":"arcane_ep3_frames_0_63700_3col_sample_every3frames.json","type":"application/json","lastModified":1643821951663.94,"size":2001923}] 2f:{"title":"Colours in Arcane","cells":[{"id":0,"value":"# Colours in Arcane\nVisualisation of the colours in the animation Arcane. Three colours taken per frame. Try all the episodes and different colour representations. Depending on how the colours are sorted, we get a very different 'feel'. ","pinned":false,"hidden":false,"mode":"md"},{"id":307,"value":"## Static Version with all the colours scaled by num times they appear","pinned":false,"hidden":false,"mode":"md"},{"id":359,"value":"viewof selected = Inputs.select([\n 'episode 1', 'episode 2', 'episode 3', 'episode 4', \n 'episode 5', 'episode 6', 'episode 7', 'episode 8', 'episode 9'\n], {label: \"Select episode\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"dataRaw = episodes[selected]","pinned":false,"hidden":false,"mode":"ojs"},{"id":473,"value":"

\n \n \n \n \n

","pinned":false,"hidden":false,"mode":"html"},{"id":299,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":312,"value":"## Animate between sequential and sorted representation \nwhere the data is 3 colours per each frame","pinned":false,"hidden":false,"mode":"md"},{"id":124,"value":"

\n \n \n

","pinned":false,"hidden":false,"mode":"html"},{"id":3,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":296,"value":"### Each unique colour with its count, sorted by one colour channel","pinned":false,"hidden":false,"mode":"md"},{"id":286,"value":"getCirclePackingColourCountsSorted = (dataRaw, sortFunction) => {\n const sorted = getSorted(dataRaw)\n const radiusMultiplyFactor = 1.7\n const uniqueColsDict = _.countBy(sorted, d => d.fill)\n const uniqueColsArr = []\n for (const [col, num] of Object.entries(uniqueColsDict)) {\n \n const rgb = col.split('rgb(')[1].split(')')[0].split(', ')\n const colRGB = [+rgb[0], +rgb[1], +rgb[2]]\n const colHSL = rgbToHsl(+rgb[0], +rgb[1], +rgb[2])\n \n uniqueColsArr.push({\n col: col, \n num: num,\n name: col, \n fill: col, \n rgb: rgb,\n colRGB: colRGB,\n colHSL: colHSL,\n r: Math.floor(Math.sqrt(num)*radiusMultiplyFactor) + padding\n })\n }\n \n //const uniqueColsArrSorted = _.sortBy([...uniqueColsArr], c => c.fill.split(', ')[2])\n const uniqueColsArrSorted = _.sortBy([...uniqueColsArr], sortFunction)//.reverse()\n\n const circlePackingColourCountsSorted = d3.packSiblings([...uniqueColsArrSorted])\n return circlePackingColourCountsSorted\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"### Sequential array of colours in square layout\nAll the colours in the order in which they appear in the frames, in a square read from left to right and top to bottom. ","pinned":false,"hidden":false,"mode":"md"},{"id":173,"value":"getSequentialSquare = (dataRaw) => {\n const numPerRow = Math.floor(Math.sqrt(60000))\n const size = radius*2 + padding\n const scale = d3.scaleLinear() // <-A\n .domain([0, numPerRow -1])\n .range([0, size * numPerRow])\n \n const data = []\n dataRaw.forEach(frame => {\n frame.colours.forEach(colour => {\n data.push({\n name: frame.img,\n fill: colour,\n r: radius + padding\n })\n })\n })\n const sqrt = Math.floor(Math.sqrt(data.length))\n const newData = [...data]\n newData.forEach((d, i) => {\n d.x = 520 - scale(i % numPerRow)\n d.y = 450 - scale(Math.floor(i / numPerRow))\n // d.x = (radius + padding*2) * i%sqrt\n // d.y = (radius + padding*2) * Math.floor(i/sqrt)\n }) \n return newData\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":273,"value":"### Sequential array of colours in circle packing layout \nAll the colours in the order in which they appear in the frames, but still in a circle packing layout. ","pinned":false,"hidden":false,"mode":"md"},{"id":133,"value":"getSequential = (dataRaw) => {\n const data = []\n dataRaw.forEach(frame => {\n frame.colours.forEach(colour => {\n data.push({\n name: frame.img,\n fill: colour,\n r: radius*2 + padding\n })\n })\n })\n const circlePackingSequential = d3.packSiblings([...data])\n return data\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":270,"value":"### Sorted array of colours by single colour\nCreate a circle packing layout of the sorted array of colours, where we start by sorting just by one colour channel.","pinned":false,"hidden":false,"mode":"md"},{"id":138,"value":"getSorted = (dataRaw) => {\n const data = []\n dataRaw.forEach(frame => {\n frame.colours.forEach(colour => {\n const rgb = colour.split('rgb(')[1].split(')')[0].split(', ')\n const colRGB = [+rgb[0], +rgb[1], +rgb[2]]\n const colHSL = rgbToHsl(+rgb[0], +rgb[1], +rgb[2])\n data.push({\n name: frame.img,\n fill: colour,\n colRGB: colRGB,\n colHSL: colHSL,\n r: radius + padding\n })\n })\n })\n const dataSorted = _.sortBy([...data], c => -c.colRGB[1])\n const circlePackingSorted = d3.packSiblings([...dataSorted])\n return dataSorted\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":361,"value":"episodes = ({\n 'episode 1': dataEp1,\n 'episode 2': dataEp2,\n 'episode 3': dataEp3,\n 'episode 4': dataEp4,\n 'episode 5': dataEp5,\n 'episode 6': dataEp6,\n 'episode 7': dataEp7,\n 'episode 8': dataEp8,\n 'episode 9': dataEp9,\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"dataEp1 = FileAttachment(\"arcane_ep1_frames_0_62484_3col_sample_every3frames.json\").json({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":404,"value":"dataEp2 = FileAttachment(\"arcane_ep2_frames_0_58360_3col_sample_every3frames.json\").json({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"dataEp3 = FileAttachment(\"arcane_ep3_frames_0_63700_3col_sample_every3frames.json\").json({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"dataEp4 = FileAttachment(\"arcane_ep4_frames_0_58630_3col_sample_every3frames.json\").json({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"dataEp5 = FileAttachment(\"arcane_ep5_frames_0_58440_3col_sample_every3frames.json\").json({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":438,"value":"dataEp6 = FileAttachment(\"arcane_ep6_frames_0_60650_3col_sample_every3frames.json\").json({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":447,"value":"dataEp7 = FileAttachment(\"arcane_ep7_frames_0_57500_3col_sample_every3frames.json\").json({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":519,"value":"dataEp8 = FileAttachment(\"arcane_ep8_frames_0_58220_3col_sample_every3frames.json\").json({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":532,"value":"dataEp9 = FileAttachment(\"arcane_ep9_frames_0_59160_3col_sample_every3frames.json\").json({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"function rgbToHsl(r, g, b){\n r /= 255, g /= 255, b /= 255;\n var max = Math.max(r, g, b), min = Math.min(r, g, b);\n var h, s, l = (max + min) / 2;\n\n if(max == min){\n h = s = 0; // achromatic\n }else{\n var d = max - min;\n s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n switch(max){\n case r: h = (g - b) / d + (g < b ? 6 : 0); break;\n case g: h = (b - r) / d + 2; break;\n case b: h = (r - g) / d + 4; break;\n }\n h /= 6;\n }\n\n return [h, s, l];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"padding = 0.2;","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"radius = 2;","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"gsap = gs.gsap","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"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"}