2d:null 2e:["$","title",null,{"children":"Bar Code | Blade Runner movies | Loris Mat | Observable"}] 33:T448,html`

movie hue saturation light

`34:T615,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); // barcode bladerunner2049 const bar1 = svg.append("g") .attr("id", "barBladeRunner2049") .selectAll("rect") .data(data.bladerunner2049) .join("rect") .attr("x", (d,i) => ( ((width - (2*margin.left)) / data.bladerunner2049.length) *i + margin.left ) ) .attr("y", (d,i) => Math.random()*margin.top*2) .attr("height", (height/2) - margin.bottom) .attr("width", width/data.bladerunner2049.length) .attr("fill", "#000") .transition() .duration(2000) .delay((d,i) => 1000+(i*(Math.random()))) .attr("y", (d,i) => margin.top) .attr("fill", d => `hsl(${d[0][0]}, ${d[0][1]}%, ${d[0][2]}%)`) // barcode bladerunner (1982) const bar2 = svg.append("g") .attr("id", "barBladeRunner") .selectAll("rect") .data(data.bladerunner) .join("rect") .attr("x", (d,i) => ( ((width - (2*margin.left)) / data.bladerunner.length) *i + margin.left ) ) .attr("y", (d,i) => (height/2) + Math.random()*margin.top*2) .attr("height", (height/2) - margin.bottom) .attr("width", width/data.bladerunner.length) .attr("fill", "#000") .transition() .duration(2000) .delay((d,i) => 1000+(i*(Math.random()))) .attr("y", (d,i) => (height/2) + margin.top) .attr("fill", d => `hsl(${d[0][0]}, ${d[0][1]}%, ${d[0][2]}%)`) d3.selectAll("label").on("click",function() { svg.call(change, "bar1"); svg.call(change, "bar2"); }); return svg.node(); }35:T5c8,md`Frames are extracted every 5 seconds from both Blade Runner movies. The dominant color is extracted for every frame, with a K-means algorithm. The color format is then converted to HSL (Hue/Saturation/Lightness) and makes it possible to sort the colors by movie order (default), hue, saturation or lightness. The process can be described as follow: **1. Extracting the frames**, every 5 seconds. [ffmpeg](https://ffmpeg.org/) is used here, with the following command: ffmpeg -i Blade\ Runner\ 2049.mp4 -vf fps=1/5 img/output%06d.png At the end, 1881 pictures are extracted for Blade Runner 2049. Same goes for Blade Runner (1982) with 1312 pictures. **2. Retrieving the dominant color for every frame** In my [python notebook](https://github.com/lorismat/shared.visualizations/blob/master/python/movie_bar_code/extracting_frames_from_movies.ipynb), I'm using a K-means algorithm, on every frame. Before, the frame is converted to a group of 3-dimension vectors (Red, Green and Blue values). Then, we locate the unique centroid and get its color (position in the 3 dimensional space). Here is the python code, inspired, again, by [Charles Leifer's python code](http://charlesleifer.com/blog/using-python-and-k-means-to-find-the-dominant-colors-in-images/). **3. Formatting all colors in HSL** Here, the steps are pretty simple in python. The idea is to convert RGB dominant colors in HSL, which will be useful to sort our colors by hue, saturation or lightness.`36:T50e,function change(svg, bar) { let val = null; let i = 0; for (i = 0; i < 4; i++) { if (d3.selectAll("input").nodes()[i].checked === true) { if (bar === "bar1") { val = colors2049[d3.selectAll("input").nodes()[i].id]; // resetting all buttons to white background d3.selectAll("label") .style("background-color", "#fff") .style("color", "#000") // filtering on the clicked one d3.selectAll(`.${d3.selectAll("input").nodes()[i].id}`) .style("background-color", "#000") .style("color", "#fff"); d3.select("#barBladeRunner2049") .selectAll("rect") .data(val) .join("rect") .transition() .duration(1000) .delay((d, i) => (i * (Math.random()))) .attr("fill", d => `hsl(${d[0][0]}, ${d[0][1]}%, ${d[0][2]}%)`) } else if (bar === "bar2") { val = colorsOrigin[d3.selectAll("input").nodes()[i].id]; d3.select("#barBladeRunner") .selectAll("rect") .data(val) .join("rect") .transition() .duration(1000) .delay((d, i) => (i * (Math.random()))) .attr("fill", d => `hsl(${d[0][0]}, ${d[0][1]}%, ${d[0][2]}%)`) } } } }37:[{"id":"17d75db8cb35966bd238a0cfa68d7d03ed0148a270d4c054b9b2a603276ee7adeec7007003227ac73afd1d9504698fb122a64d12d9a8cdab263626b89bfb7d18","href":"https://static.observableusercontent.com/files/17d75db8cb35966bd238a0cfa68d7d03ed0148a270d4c054b9b2a603276ee7adeec7007003227ac73afd1d9504698fb122a64d12d9a8cdab263626b89bfb7d18","name":"bladerunnerall@1.json","type":"application/json","lastModified":1604749224208.276,"size":200575}] 31:{"id":"48859085c06b147a","slug":"bar-code-blade-runner-movies","title":"Bar Code | Blade Runner movies","thumbnail":"b11379e7da12daa910bae88e922aca821ca0bd58fd8805b08b13ffb6ce756818","access_level":"public","create_time":"$D2020-11-07T10:13:45.321Z","update_time":"$D2020-11-09T08:37:07.777Z","view_time":null,"first_public_time":"$D2020-11-07T15:37:43.986Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"1580b2fcff4ab1e8","login":"git1984","name":"Loris Mat","avatar_url":"https://avatars-next.observableusercontent.com/49e69ab32567a8fbb22c2864c6ea7876c95e3b1b690b2a8fc59eba055f59db05","tier":"starter_2024"},"version":322,"publish_version":322,"role":null,"authored":false,"authors":[{"type":"individual","id":"293d2779fe6dfc96","login":"git1984","name":"Loris Mat","avatar_url":"https://avatars-next.observableusercontent.com/49e69ab32567a8fbb22c2864c6ea7876c95e3b1b690b2a8fc59eba055f59db05","tier":null}],"members":[{"type":"individual","id":"293d2779fe6dfc96","login":"git1984","name":"Loris Mat","avatar_url":"https://avatars-next.observableusercontent.com/49e69ab32567a8fbb22c2864c6ea7876c95e3b1b690b2a8fc59eba055f59db05","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Bar Code | Blade Runner movies","cells":[{"id":0,"value":"md`# Bar Code | Blade Runner movies \n\n*Sorting colors from* Blade Runner *movies* in various ways \n\n**data ::** *Blade Runner* frames every 5 seconds, with the extraction of the dominant color (*K-means* algorithm) \n\n\n \n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md`# Process to extract the dominant color`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`# Appendix\n## Loading Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"data = FileAttachment(\"bladerunnerall@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"md`## On click`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"md`## Coloring`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"colors2049 = Object({ \"movieOrder\" : data.bladerunner2049,\n\t\t\t\t\t\t\t \"hue\" : parsing(\"bladerunner2049\",\"hue\"),\n\t\t\t\t\t\t\t \"saturation\" : parsing(\"bladerunner2049\",\"saturation\"),\n\t\t\t\t\t\t\t \"light\" : parsing(\"bladerunner2049\",\"light\") })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"colorsOrigin = Object({ \"movieOrder\" : data.bladerunner,\n\t\t\t\t\t\t\t \"hue\" : parsing(\"bladerunner\",\"hue\"),\n\t\t\t\t\t\t\t \"saturation\" : parsing(\"bladerunner\",\"saturation\"),\n\t\t\t\t\t\t\t \"light\" : parsing(\"bladerunner\",\"light\") })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"md`## Parsing Function`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"function parsing(movie,sortOrder) {\n \n let x = JSON.parse(JSON.stringify(data[movie])); \n \n if (sortOrder == \"hue\") {\n x.sort((a,b) => {\n\t\treturn a[0][0] - b[0][0];\n\t})\n }\n else if (sortOrder == \"saturation\") {\n x.sort((a,b) => {\n\t\treturn a[0][1] - b[0][1];\n\t})\n }\n else {\n x.sort((a,b) => {\n\t\treturn a[0][2] - b[0][2];\n\t})\n }\n \n return x\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"md`## Drawing Function`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md`## SVG Structure`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"width = 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"height = 550","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"margin = ({top: 20, right: 20, bottom: 40, left: 20})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"