2b:null 2c:["$","title",null,{"children":"Pixel sorting | Torben Jansen | Observable"}] 31:T509,// https://observablehq.com/@mbostock/meme-generator viewof image = { const files = [ ["Lotus", FileAttachment("lotus@1.jpg")], ["A Sunday Afternoon on the Island of La Grande Jatte", FileAttachment("seurat.jpg")], ["The birth of Venus", FileAttachment("boticelli-venus.jpg")], ["Bedroom in Arles", FileAttachment("bedroom-in-arles.jpg")], ["Mediterranean", FileAttachment("mapping-the-mediterranean.png")] ]; const form = html`

`; form.file.onchange = () => { form.select.value = "Other"; form.value = new Promise((resolve, reject) => { const image = new Image; image.src = URL.createObjectURL(form.file.files[0]); image.onload = () => resolve(image); image.onerror = reject; }); form.dispatchEvent(new CustomEvent("input")); }; form.select.onchange = async () => { if (form.select.value === "Other") { form.file.click(); } else { form.value = files[form.select.selectedIndex][1].image(); form.dispatchEvent(new CustomEvent("input")); } }; form.select.selectedIndex = 0; form.select.onchange(); return form; }32:[{"id":"ffcefa65b3c3ac564da08e51faf17fd5c23c1005d8f7d3a0b1a304aab789cc16491f3096a1c4b3f83049ccda72f130e91efffcc213658328946cc5335ef0c8c6","href":"https://static.observableusercontent.com/files/ffcefa65b3c3ac564da08e51faf17fd5c23c1005d8f7d3a0b1a304aab789cc16491f3096a1c4b3f83049ccda72f130e91efffcc213658328946cc5335ef0c8c6","name":"lotus@1.jpg","type":"image/jpeg","lastModified":1581789351064.667,"size":125142},{"id":"1db97a943c54990959b9e31719ee35311fa09a2b4bf8b64053998e0c6b787d6be21809ee43c5b733089b30ed37724e3663e5bca5ba32a6a0174afd838ad4a628","href":"https://static.observableusercontent.com/files/1db97a943c54990959b9e31719ee35311fa09a2b4bf8b64053998e0c6b787d6be21809ee43c5b733089b30ed37724e3663e5bca5ba32a6a0174afd838ad4a628","name":"boticelli-venus.jpg","type":"image/jpeg","lastModified":1581802479520.714,"size":253013},{"id":"c46fbd5acb77612852a8a70c8648956329eedbe7f61a200258743faf649648a6ec2cefede8a63ba8a86112afb49fa812a70ee8ac41d244424c544e7d5a1708b3","href":"https://static.observableusercontent.com/files/c46fbd5acb77612852a8a70c8648956329eedbe7f61a200258743faf649648a6ec2cefede8a63ba8a86112afb49fa812a70ee8ac41d244424c544e7d5a1708b3","name":"seurat.jpg","type":"image/jpeg","lastModified":1581802265260.744,"size":262210},{"id":"e54b4c2039c9ca45783c6770d0463d4e476aed2ed8f384447833c445bc7484366233a061e9a2df997c43aee9ee2f972564c3adb1e08165b52c18045c6377a263","href":"https://static.observableusercontent.com/files/e54b4c2039c9ca45783c6770d0463d4e476aed2ed8f384447833c445bc7484366233a061e9a2df997c43aee9ee2f972564c3adb1e08165b52c18045c6377a263","name":"bedroom-in-arles.jpg","type":"image/jpeg","lastModified":1581801755624.732,"size":117619},{"id":"ec4777fc1fe126017dad47192ebde2de84880775978df0fad459884e61f1ccccc14ff35263867d5a9850fcaa41dcb38a531bc6331e7e010c975c838bb66a294e","href":"https://static.observableusercontent.com/files/ec4777fc1fe126017dad47192ebde2de84880775978df0fad459884e61f1ccccc14ff35263867d5a9850fcaa41dcb38a531bc6331e7e010c975c838bb66a294e","name":"mapping-the-mediterranean.png","type":"image/png","lastModified":1581803072070.081,"size":499786}] 2f:{"id":"7dba04d78c8961e6","slug":"pixel-sorting","title":"Pixel sorting","thumbnail":"c012c74ff0324b8cfa739d8cce391c219e7a059b17d7ea761cd0e21a71ab4644","access_level":"public","create_time":"$D2020-02-15T12:43:16.243Z","update_time":"$D2021-09-11T16:31:11.395Z","view_time":null,"first_public_time":"$D2020-02-15T20:23:27.907Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"03836a98946da550","login":"toja","name":"Torben Jansen","avatar_url":"https://avatars-next.observableusercontent.com/f79c27ca86680a3a399f6eb78b22436d6dd665b49ad284ba1ccfb405bfc89fe0","tier":"starter_2024"},"version":376,"publish_version":376,"role":null,"authored":false,"authors":[{"type":"individual","id":"9334261743951ef0","login":"toja","name":"Torben Jansen","avatar_url":"https://avatars-next.observableusercontent.com/f79c27ca86680a3a399f6eb78b22436d6dd665b49ad284ba1ccfb405bfc89fe0","tier":null}],"members":[{"type":"individual","id":"9334261743951ef0","login":"toja","name":"Torben Jansen","avatar_url":"https://avatars-next.observableusercontent.com/f79c27ca86680a3a399f6eb78b22436d6dd665b49ad284ba1ccfb405bfc89fe0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Pixel sorting","cells":[{"id":0,"value":"md`# Pixel sorting\n\nLet's sort the pixels of an image by hue.\n\nTo do this we create a new [typed array view](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays) of the raw buffer data, which allows us to represent the pixel colors as an array of 32-bit unsigned integer values.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":331,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":49,"value":"{\n replay;\n await visibility();\n \n const { width, height } = image;\n \n const canvas = document.createElement(\"canvas\");\n canvas.width = width;\n canvas.height = height;\n \n const context = canvas.getContext('2d');\n context.drawImage(image, 0, 0, width, height);\n yield context.canvas;\n \n const imageData = context.getImageData(0, 0, width, height);\n const colors = new Uint32Array(imageData.data.buffer);\n \n let row = 0;\n while (row < height) {\n colors.subarray(row * width, row * width + width).sort(sortHue);\n context.putImageData(imageData, 0, 0);\n yield context.canvas;\n ++row;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":282,"value":"viewof replay = html`