30: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; }31:[{"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}] 2e:{"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"},{"id":331,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":282,"value":"viewof replay = html`