2b:null 2c:["$","title",null,{"children":"Seam Carving (with forward energy), but we make a new image with the discarded seams | Job van der Zwan | Observable"}] 31:T42e,Description = md` *([Wait, what is seam carving?](#Appendix_A))* In typical seam carving implementations the removed seam is just thrown away. What if we actually keep the seams and create a new image with it? Let's try that out! (how about calling generating an image this way "seam weaving"?) We'll carve away 50% of the image below. Instead of discarding the removed seams (red line), we'll move them to a "discarded seams" section on the right, then re-insert them in original column order (blue line). If our energy function does a good job at estimating the most/least interesting pixels, the right half should be fairly boring, while the left half still has understandable content. *Thanks to [\`@mootari\`](https://observablehq.com/@mootari) for suggesting Unsplash for random images (including example code!)* *Button and select style by [\`@noise-machines\`](https://observablehq.com/@noise-machines/cubes#comment-4bb1b93cc1b33d1b)*`32:T3315,carved = { refresh; refresh2; if (!image) { yield md`*Awaiting image selection*`; } else { const context = createContext(image); context.lineCap = "round"; context.lineJoin = "round"; context.lineWidth = 3; const input = context.getImageData(0, 0, width, height); const inputData = input.data; const inputData32 = new Uint32Array(inputData.buffer); // In order to put the removed seams in the right locations // we have to store the original x-position of each pixel, // so that we can re-insert them in the right order const originalColumns = new Uint16Array(width * height); for (let y = 0; y < height; y++) { for (let x = 0; x < width; x++) { originalColumns[x + y * width] = x; } } const newColumns = new Uint16Array(width * height); const removedSeamLoc = new Uint16Array(height); const insertedSeamLoc = new Uint16Array(height); const { sqrt, min, max, SQRT1_2 } = Math; // =============== // = Pixel delta = // =============== const pixelOrder = (function checkEndian() { const arrayBuffer = new ArrayBuffer(2); const uint8Array = new Uint8Array(arrayBuffer); const uint16array = new Uint16Array(arrayBuffer); uint8Array[0] = 0xAA; // set first byte uint8Array[1] = 0xBB; // set second byte if (uint16array[0] === 0xBBAA) return "ABGR"; // little endian if (uint16array[0] === 0xAABB) return "RGBA"; // big endian else throw new Error("Something crazy just happened"); })(); // This is probably slow compared to inlining it, but let's get it working first const dPixel = pixelOrder == "RGBA" ? function dPixel(p0, p1) { const rgba0 = inputData32[p0]; const rgba1 = inputData32[p1]; const r0 = rgba0 >>> 24; const g0 = (rgba0 >> 16) & 0xFF; const b0 = (rgba0 >> 8) & 0xFF; const r1 = rgba1 >>> 24; const g1 = (rgba1 >> 16) & 0xFF; const b1 = (rgba1 >> 8) & 0xFF; // // Taking the difference between the squares // // is a better approximation of linear rgb // // while still being fairly cheap. // const dr = r0*r0 - r1*r1; // const dg = g0*g0 - g1*g1; // const db = b0*b0 - b1*b1; // return (dr < 0 ? -dr : dr) + (dg < 0 ? -dg : dg) + (db < 0 ? -db : db); // Adapted from code in https://github.com/mapbox/pixelmatch // calculate color difference according to the paper "Measuring perceived color difference // using YIQ NTSC transmission color space in mobile applications" by Y. Kotsarenko and F. Ramos const r = r0 - r1; const g = g0 - g1; const b = b0 - b1; const y = r * 0.2124681075446384 + g * 0.4169973963260294 + b * 0.08137907133969426; const i = r * 0.3258860837850668 - g * 0.14992193838645426 - b * 0.17596414539861255; const q = r * 0.0935501584120867 - g * 0.23119531908149002 + b * 0.13764516066940333; return sqrt(y * y + i * i + q * q); } : function dPixel(p0, p1) { const abgr0 = inputData32[p0]; const abgr1 = inputData32[p1]; const r0 = abgr0 & 0xFF; const g0 = (abgr0 >> 8) & 0xFF; const b0 = (abgr0 >> 16) & 0xFF; const r1 = abgr1 & 0xFF; const g1 = (abgr1 >> 8) & 0xFF; const b1 = (abgr1 >> 16) & 0xFF; // const dr = r0*r0 - r1*r1; // const dg = g0*g0 - g1*g1; // const db = b0*b0 - b1*b1; // return (dr < 0 ? -dr : dr) + (dg < 0 ? -dg : dg) + (db < 0 ? -db : db); const r = r0 - r1; const g = g0 - g1; const b = b0 - b1; const y = r * 0.2124681075446384 + g * 0.4169973963260294 + b * 0.08137907133969426; const i = r * 0.3258860837850668 - g * 0.14992193838645426 - b * 0.17596414539861255; const q = r * 0.0935501584120867 - g * 0.23119531908149002 + b * 0.13764516066940333; return sqrt(y * y + i * i + q * q); }; // ================= // = Cost Map Init = // ================= // build up energy map // see https://avikdas.com/2019/07/29/improved-seam-carving-with-forward-energy.html const costMap = new Float64Array(width * height); // energy cost pixel top-left corner costMap[0] = dPixel(0, 1); // energy cost top row (except corners for (let x = 1; x < width - 1; x++) { costMap[x] = dPixel(x - 1, x + 1); } // energy cost pixel top-right corner costMap[width - 1] = dPixel(width - 2, width - 1); // build cost map for rest of the rows for (let y = 1; y < height; y++) { const line = y * width; const linem1 = line - width; // leftmost column { // const x = 0; // we can simply leave out the zero altogether here const Cu = dPixel(line, line + 1) * 2; const Cr = dPixel(linem1, line + 1); const Mu = costMap[linem1] + Cu; const Mr = costMap[linem1 + 1] + Cu + Cr; costMap[line] = Mu < Mr ? Mu : Mr; } // rest of the row for (let x = 1; x < width - 1; x++) { const Cl = dPixel(x + linem1, x - 1 + line); const Cu = dPixel(x - 1 + line, x + 1 + line); const Cr = dPixel(x + linem1, x + 1 + line); // Diagonals. We'll weight them sqrt(1/2) compared to the rest const Clr = SQRT1_2 * dPixel(x - 1 + line, x + 1 + linem1); // bottom left to top right const Crl = SQRT1_2 * dPixel(x + 1 + line, x - 1 + linem1); // bottom right to top left const Ml = costMap[x - 1 + linem1] + Cu + Cl + Crl; const Mu = costMap[x + linem1] + Cu + Clr + Crl; const Mr = costMap[x + 1 + linem1] + Cu + Cr + Clr; const M = Mr < Mu ? Mr : Mu; costMap[x + line] = M < Ml ? M : Ml; } // rightmost column { const x = width - 1; const Cl = dPixel(x + linem1, x - 1 + line); const Cu = dPixel(x - 1 + line, x + line); const Ml = costMap[x - 1 + linem1] + Cu + Cl; const Mu = costMap[x + linem1] + Cu * 2; costMap[x + line] = Ml < Mu ? Ml : Mu; } } // =============== // = Carve Loop = // =============== let inputEnd = width - 1; while (inputEnd > width / 2) { // find minimum of the bottom row let y = height - 1; let line = y * width; let xMin = 0, costMin = costMap[line]; for (let x = 1; x < inputEnd; x++) { const xCost = costMap[x + line]; if (xCost < costMin) { costMin = xCost; xMin = x; } } // remove seam - go from bottom minimum and carve up while (y >= 0) { // copy pixeldata + original location at xMin; // moving 32 bits at once is faster than three 8-bit chunks const rgbMin = inputData32[xMin + line]; const loc = originalColumns[xMin + line]; removedSeamLoc[y] = xMin; // shift all remaining pixels (in "original" image) one to the left, // including their locations let i = xMin; let idx = i + line; while (i < inputEnd) { inputData32[idx] = inputData32[idx + 1]; originalColumns[idx] = originalColumns[idx + 1]; idx++; i++; } // insert removed pixel at the appropriate location on the right while (i < width - 1 && loc > newColumns[idx + 1]) { inputData32[idx] = inputData32[idx + 1]; newColumns[idx] = newColumns[idx + 1]; idx++; i++; } // const idx4 = idx << 2; inputData32[idx] = rgbMin; newColumns[idx] = loc; insertedSeamLoc[y] = i; // go up by one row y--; line = y * width; // The minimum cost is guaranteed to be one of the // three pixels right above the pixel with the // minimum cost of the row below it costMin = costMap[xMin + line]; if (costMap[max(0, xMin - 1) + line] < costMin) { xMin = max(0, xMin - 1); costMin = costMap[xMin + line]; } if (costMap[Math.min(inputEnd, xMin + 1) + line] < costMin) { xMin = Math.min(inputEnd, xMin + 1); costMin = costMap[xMin + line]; } } // Move the right border of the original (carved) image to the left by one inputEnd--; // Update image and draw seams context.putImageData(input, 0, 0); context.strokeStyle = 'red'; context.beginPath(); context.moveTo(removedSeamLoc[0], 0); for (let y = 1; y < height; y++) { context.lineTo(removedSeamLoc[y], y); } context.stroke(); context.strokeStyle = 'blue'; context.beginPath(); context.moveTo(insertedSeamLoc[0], 0); for (let y = 1; y < height; y++) { context.lineTo(insertedSeamLoc[y], y); } context.stroke(); yield { context, input, inputData32, inputEnd, originalColumns, newColumns }; // Update cost map // Optimization: we only have to update the pyramid // under wherever xMin ends up being on the top row, // because pixels outside of this pyramid cannot be // affected by the change. // Handle top-left and top-right corners if (xMin === 0) { costMap[0] = dPixel(0, 1); costMap[1] = dPixel(0, 2); } else if (xMin >= inputEnd) { costMap[inputEnd - 1] = dPixel(inputEnd - 2, inputEnd); costMap[inputEnd] = dPixel(inputEnd - 1, inputEnd); } else { costMap[xMin - 1] = dPixel(max(0, xMin - 2), xMin); costMap[xMin] = dPixel(xMin - 1, xMin + 1); costMap[xMin + 1] = dPixel(xMin, min(inputEnd, xMin + 2)); } // update cost map for rest of the rows let xStart = max(0, xMin - 1), xEnd = min(xMin + 1, inputEnd); for (let y = 1; y < height; y++) { const line = y * width; const linem1 = line - width; let x = xStart; // handle case where pyramid overlaps with start if (x === 0) { const Cu = dPixel(line, line + 1) * 2; const Cr = dPixel(linem1, line + 1); const Mu = costMap[linem1] + Cu; const Mr = costMap[linem1 + 1] + Cu + Cr; costMap[line] = Mu < Mr ? Mu : Mr; } else { const Cl = dPixel(x + linem1, x - 1 + line); const Cu = dPixel(x - 1 + line, x + 1 + line); const Cr = dPixel(x + linem1, x + 1 + line); // Diagonals. We'll weight them sqrt(1/2) compared to the rest const Clr = SQRT1_2 * dPixel(x - 1 + line, x + 1 + linem1); // bottom left to top right const Crl = SQRT1_2 * dPixel(x + 1 + line, x - 1 + linem1); // bottom right to top left const Ml = costMap[x - 1 + linem1] + Cu + Cl + Crl; const Mu = costMap[x + linem1] + Cu + Clr + Crl; const Mr = costMap[x + 1 + linem1] + Cu + Cr + Clr; const M = Mr < Mu ? Mr : Mu; costMap[x + line] = M < Ml ? M : Ml; } // inner pyramid while (++x < xEnd) { const Cl = dPixel(x + linem1, x - 1 + line); const Cu = dPixel(x - 1 + line, x + 1 + line); const Cr = dPixel(x + linem1, x + 1 + line); const Ml = costMap[x - 1 + linem1] + Cu + Cl; const Mu = costMap[x + linem1] + Cu; const Mr = costMap[x + 1 + linem1] + Cu + Cr; const M = Mr < Mu ? Mr : Mu; costMap[x + line] = M < Ml ? M : Ml; } // handle case where pyramid overlaps with end if (x === inputEnd) { const Cl = dPixel(x + linem1, x - 1 + line); const Cu = dPixel(x - 1 + line, x + line); const Ml = costMap[x - 1 + linem1] + Cu + Cl; const Mu = costMap[x + linem1] + Cu * 2; costMap[x + line] = Ml < Mu ? Ml : Mu; } else { const Cl = dPixel(x + linem1, x - 1 + line); const Cu = dPixel(x - 1 + line, x + 1 + line); const Cr = dPixel(x + linem1, x + 1 + line); const Ml = costMap[x - 1 + linem1] + Cu + Cl; const Mu = costMap[x + linem1] + Cu; const Mr = costMap[x + 1 + linem1] + Cu + Cr; const M = Mr < Mu ? Mr : Mu; costMap[x + line] = M < Ml ? M : Ml; } xStart = max(0, xStart - 1); xEnd = min(inputEnd, xEnd + 1); } } context.putImageData(input, 0, 0); yield { context, input, inputData32, inputEnd, originalColumns, newColumns }; } }33:T678,// Same as above, but lerping function restoreOriginalLerp(targetImage, columns, colStart, colEnd) { const { input: { data }, inputEnd } = carved; const { context, output32, output } = targetImage; for (let y = 0; y < height; y++) { const line = y * width; const l4 = line * 4; let x = 0; let idx = (colStart + line) * 4; let r0 = data[idx]; let g0 = data[idx + 1]; let b0 = data[idx + 2]; for (let i = colStart + 1; i < colEnd - 1; i++) { const xEnd = columns[i + line]; idx = (i + line) * 4; const r1 = data[idx]; const g1 = data[idx + 1]; const b1 = data[idx + 2]; const dx = xEnd - x; for (let j = 0; x + j < xEnd; j++) { const r = ((r0 * (dx - j) + r1 * j) / dx) & 0xFF; const g = ((g0 * (dx - j) + g1 * j) / dx) & 0xFF; const b = ((b0 * (dx - j) + b1 * j) / dx) & 0xFF; output[j * 4 + idx] = r; output[j * 4 + idx + 1] = g; output[j * 4 + idx + 2] = b; output[j * 4 + idx + 3] = 0xFF; } x = xEnd; r0 = r1; g0 = g1; b0 = b1; } idx = (inputEnd + line) * 4; const r1 = data[idx]; const g1 = data[idx + 1]; const b1 = data[idx + 2]; const dx = width - x; for (let j = 0; j + x < width; j++) { const r = ((r0 * (dx - j) + r1 * j) / dx) & 0xFF; const g = ((g0 * (dx - j) + g1 * j) / dx) & 0xFF; const b = ((b0 * (dx - j) + b1 * j) / dx) & 0xFF; output[j * 4 + idx] = r; output[j * 4 + idx + 1] = g; output[j * 4 + idx + 2] = b; output[j * 4 + idx + 3] = 0xFF; } } context.putImageData(output, 0, 0); }34:T591,Appendix_A = md`## Appendix A: Wait, what is seam carving? Sorry, it's quite a famous tecnique so I kind of assumed most people know it. Here are two videos explaining how it works, with the second one including the forward energy enhancement used in this notebook: Papers: - [Seam Carving for Content-Aware Image Resizing](https://faculty.idc.ac.il/arik/SCWeb/imret/index.html) - the original paper from 2007 - [Improved Seam Carving for Video Retargeting](https://faculty.idc.ac.il/arik/SCWeb/vidret/index.html) - the enhancement from 2008 Other sources: - [Real-world dynamic programming: seam carving](https://avikdas.com/2019/05/14/real-world-dynamic-programming-seam-carving.html), by Avik Das - [Improved seam carving with forward energy](https://avikdas.com/2019/07/29/improved-seam-carving-with-forward-energy.html), by Avik Das [🔙](#Description)`35:T9ec,Appendix_B = md`## Appendix B: Ideas to explore (partially done) - use perceived color contrast instead of Sobel for energy function. See [this notebook by Dan Burzo](https://observablehq.com/@danburzo/nearest-color?collection=@danburzo/color-exploration) for ideas of which color contrast formulas to use and [this GH repo](https://github.com/evercoder/d3-color-difference) for the code to do so - ✔️ done with Kotsarenko-Ramos approximation (since it's fast and "good enough" in most cases) - ✔️ for each pixel in the original image, store their original (x,y) coordinate, as well as their energy then: - store each removed seam + the original coordinates of the removed pixels + iteration at which seam was removed, - after removing enough seams (say, 50% of the image), create two data sets, one with removed pixels, one with remaining (in other words: the highest and lowest energy pixels) - generate new images with these data sets, for example: - if only horizontal or vertical seams were removed: - ✔️ create a retargeted "lowest-energy" pixels image (a retargeted image of "high energy" pixels is the default output of seam carving) - put pixels back at original coordinate and interpolate over the gaps - ... 1D (easy) or 2D (tricky, see below) - ... linearly, or weighted by energy of the pixel in the original image - 2D interpolation: treat pixels as voronoi generators at their original location, using their original color - 2D interpolation: treat pixels as vertices and use Delauny triangulation (see [Delaunay Raster technique by Jonathan Puckey](https://jonathanpuckey.com/projects/delaunay-raster/)) - Can use WebGL for default linear interpolation, but if not ready to make that switch see ~~[CodePlea - Interpolating in a Triangle](https://codeplea.com/triangular-interpolation) (via [this SO answer](https://stackoverflow.com/a/41419292/3211791))~~ [my notebook](https://observablehq.com/@jobleonard/linear-interpolation-along-a-triangle-with-barycentric-co) for how to use Barycentric Coordinates to do this in canvas2d. - weighted interpolation across a triangle by original energy value of pixel (vertex): determine proportional weight of each vertex at each pixel in a triangle using barycentric coordinates and energy weights, then based on those proportions average the colors (in a linear color space!) - Collapse pixels (see [Grant Custer's experiments](http://feed.grantcuster.com/post/20200411T151739697Z) for inspiration)`36:Ta96,html` `37:[{"id":"ae05a4cc3d6a6415d7d994b90a16fe804bc23dbdfeb9c5e135b7bfefa6ab5f13b116e54c363bfb72dec09093709b1330d15d81af9f9355dd53d31e48834dbf2b","href":"https://static.observableusercontent.com/files/ae05a4cc3d6a6415d7d994b90a16fe804bc23dbdfeb9c5e135b7bfefa6ab5f13b116e54c363bfb72dec09093709b1330d15d81af9f9355dd53d31e48834dbf2b","name":"blue.jpg","type":"image/jpeg","lastModified":1600011423921.215,"size":788900},{"id":"537e59ef7df0da75a85131d7e629ec44511abb93c5025c30f5a759ef243e316ced5379c7e958470c66915db94398046e8d5a89298e5fd50b229d7d1b21f6893f","href":"https://static.observableusercontent.com/files/537e59ef7df0da75a85131d7e629ec44511abb93c5025c30f5a759ef243e316ced5379c7e958470c66915db94398046e8d5a89298e5fd50b229d7d1b21f6893f","name":"North Windows Arch.jpg","type":"image/jpeg","lastModified":1600088894453.363,"size":5447794},{"id":"4ab83796709484be7e686e0c7e780ebdbde29431b57b6f7e2d7965c8f9ee80feba3fec667e2ecb1e40c969161e8bba1ede20fcd39bdfcfe29b08b6268452f8de","href":"https://static.observableusercontent.com/files/4ab83796709484be7e686e0c7e780ebdbde29431b57b6f7e2d7965c8f9ee80feba3fec667e2ecb1e40c969161e8bba1ede20fcd39bdfcfe29b08b6268452f8de","name":"IMG_20180615_134540_HDR-PANO.jpg","type":"image/jpeg","lastModified":1600119562504.69,"size":2017238}] 2f:{"id":"c5af998e9e6a5ddb","slug":"seam-carving-with-forward-energy-but-we-make-a-new-image-with","title":"Seam Carving (with forward energy), but we make a new image with the discarded seams","thumbnail":"9b5c65573fc913ffe0c305e0269f6333430ba927acefc70636d20807b039ed6a","access_level":"public","create_time":"$D2020-05-20T04:35:10.855Z","update_time":"$D2022-10-17T17:44:49.753Z","view_time":null,"first_public_time":"$D2020-09-15T11:16:17.877Z","has_unpublished_edits":null,"fork":false,"stars":41,"starred":false,"owner":{"type":"team","id":"3f83172cfde1e56a","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":"starter_2024"},"version":713,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}],"members":[{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null,"role":"editor"}],"comments":[{"id":"e9f0237c07f1878c","reply_to_id":null,"content":"I recognize that button.","create_time":"$D2020-09-17T05:53:43.832Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"dbf69c13a14d2f62","login":"visnup","name":"Visnu Pitiyanuvath","avatar_url":"https://avatars-next.observableusercontent.com/b847c4c49993b1df7599d355f47dc0ad9c2dcf43439ce9e8f3410e6368b3aac9","tier":null}},{"id":"2e97db8310f68447","reply_to_id":"e9f0237c07f1878c","content":"You already know that button from way back when it still played in underground bars","create_time":"$D2020-09-17T08:51:11.809Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":13,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Seam Carving (with forward energy), but we make a new image with the discarded seams","cells":[{"id":17,"value":"Title = md`# Seam Carving (with forward energy), but we make a new image with the discarded seams`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"carved.context.canvas","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"viewof selectedImg = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"viewof refresh = html``;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"md`

\n\nTo make things a little more interesting, let's try using the remaining pixels and the knowledge of their locations in the original photo to reconstruct the original image.\n\nWe stretch out the two sides to their original proportions, putting the \"known\" pixels back at their original locations and filling in the gaps with the last known pixel on the left of the gap. The idea is that we can judge how relevant the removed pixels were by looking at how well we can reconstruct the original image with either outputs.\n\nOnce our seam carver is finished 50% of the image below should contain gaps (but filled in with the pixel on its left). *In theory*, these should be in the areas with relatively low contrast and fewer fine details.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"originalRestored.context.canvas","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"md`

\n\nNow let's do the same as above, but with the pixels from the discarded seams. The result should \"mirror\" the image above: the relative low-constrast areas are the \"known\" pixels, and the gaps are the seams that go through the high-contrast areas and more fine details in the original image.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"removedRestored.context.canvas","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"md`(you might have scrolled down here after the animation finished, want to see these images being constructed from scratch?)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"viewof refresh2 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"md`

\n\nThe original input photo, for comparison:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"image = selectedImg && images[selectedImg] && images[selectedImg].image ||\n await loadImage(await randomImage(1920, 1080))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"credit = selectedImg && images[selectedImg] && images[selectedImg].credit || md`*Photo credit:* a random image from [Unsplash](https://source.unsplash.com/)\n\n

\n## Implementation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"images = ({\n \"De Stellingwerven\": {\n image: await FileAttachment(\"IMG_20180615_134540_HDR-PANO.jpg\").image(),\n credit: md`*Photo Credit:* Job van der Zwan (me)`\n },\n \"Blue Beach Surf\": {\n image: await FileAttachment(\"blue.jpg\").image(),\n credit: md`*Photo Credit:* [Blue Beach Surf](https://pixabay.com/photos/blue-beach-surf-travel-surfer-4145659/) by [Kiril Dobrev](https://pixabay.com/users/kirildobrev-12266114/)`\n },\n \"North Windows Arch\": {\n image: await FileAttachment(\"North Windows Arch.jpg\").image(),\n credit: md`*Photo Credit:* [North Windows Arch, Arches National Park - 9/24/2007](https://flic.kr/p/4hxxz50) by \nMike Goad`\n },\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"height = Math.round(width / image.naturalWidth * image.naturalHeight)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"function createContext(img) {\n Math.round(width / img.naturalWidth * img.naturalHeight)\n const context = DOM.context2d(width, height, 1);\n context.canvas.style = \"max-width: 100%;\";\n context.drawImage(img, 0, 0, width, height);\n return context;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"loadImage = {\n refresh;\n return function loadImage(src) {\n const img = DOM.element('img', {crossorigin: 'anonymous', src});\n return img.decode().then(() => img);\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"// Note: Multiple requests made within a 3 seconds might return the same URL.\nasync function randomImage(sizeOrWidth = null, height = sizeOrWidth) {\n const size = sizeOrWidth ? `/${+sizeOrWidth}x${+height}` : '';\n return (await fetch(`https://source.unsplash.com/random${size}`, {\n method: 'head',\n cache: 'no-store',\n })).url;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":561,"value":"// Restores (an approximation of) the original image from either the retargeted pixels or the discarded seams\nfunction restoreOriginal(targetImage, columns, colStart, colEnd) {\n const {inputData32, inputEnd} = carved;\n const {context, output32, output} = targetImage;\n for (let y = 0; y < height; y++) {\n const line = y * width;\n let x = 0;\n for (let i = colStart; i < colEnd; i++) {\n const xEnd = columns[i + line];\n const rgba = inputData32[i + line];\n while(x < xEnd) {\n output32[x + line] = rgba;\n x++;\n }\n }\n const rgba = inputData32[inputEnd + line];\n while (x < width) {\n output32[x + line] = rgba;\n x++;\n }\n }\n context.putImageData(output, 0, 0);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":672,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"// The restored image from the retargeted pixels\n// Initialized in a separate cell to avoid pointless re-allocation\noriginalRestored = {\n const context = createContext(image);\n const output = context.createImageData(width, height);\n const output32 = new Uint32Array(output.data.buffer);\n return { context, output, output32 };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"// The restored image from the discarded pixels\nremovedRestored = {\n const context = createContext(image);\n const output = context.createImageData(width, height);\n const output32 = new Uint32Array(output.data.buffer);\n return { context, output, output32 };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"restoreOriginal(originalRestored, carved.originalColumns, 0, carved.inputEnd)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"restoreOriginal(removedRestored, carved.newColumns, carved.inputEnd, width)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1"}} 30:"$2f:body"