有没有办法将像素冒泡排序回原始图像？

Question

感谢您阅读本文。 我正在尝试修改此像素排序教程的作者提供的sketch.js 。

我想知道将每个像素的原始位置存储在附加纹理中的最佳方法是什么，以便能够将图像排序回原始位置？

到目前为止，我的目标是在绘图 function 中放置 2 个条件语句，以便在某个时间点（或迭代次数）像素开始冒泡排序回到原始图像，然后再重新排序。

事情可能是正确的

1. 更改比较的符号（即，从大到减）
2. 在两个语句中复制.loadPixels() 和.updatePixels()。

我不太确定的事情

1. 在 else 语句中反转 for 循环
2. 将像素索引从(j, i + 1)更改为(j, i - 1)

我还没有弄清楚的事情

1. 一旦原始图像被重新组合，一种重新排序的方法

 let panel; let counter = 0; const sc = 2; const panelW = 25; const panelH = 15; const frameW = 20; function preload() { panel = loadImage("https://www.paulwheeler.us/files/Burano-island-Venice.jpg"); } function setup() { createCanvas( sc * (panel.width + 2 * frameW), sc * (panel.height + 2 * frameW) ); pixelDensity(1); } function draw() { if (counter < 3200000) { panel.loadPixels(); for (let i = 0; i < panel.height - 1; i++) { for (let j = 0; j < panel.width; j++) { counter = counter + 1; if ( hue(fGetPanelPixel(j, i)) > hue(fGetPanelPixel(j, i + 1)) ) { let hold = fGetPanelPixel(j, i + 1); fSetPanelPixel(j, i + 1, fGetPanelPixel(j, i)); fSetPanelPixel(j, i, hold); } } } panel.updatePixels(); } else { console.log("now backwards..."); panel.loadPixels(); for (let i = panel.height - 1; i > 0; i--) { for (let j = panel.width - 1; j > 0; j--) { if ( hue(fGetPanelPixel(j, i)) < hue(fGetPanelPixel(j, i - 1)) ) { let hold = fGetPanelPixel(j, i - 1); fSetPanelPixel(j, i - 1, fGetPanelPixel(j, i)); fSetPanelPixel(j, i, hold); } } } panel.updatePixels(); } image(panel, sc * frameW, sc * frameW, sc * panel.width, sc * panel.height); } function fGetPanelPixel(x, y) { const index = 4 * (y * panel.width + x); return [ panel.pixels[index], panel.pixels[index + 1], panel.pixels[index + 2], ]; } function fSetPanelPixel(x, y, c) { const index = 4 * (y * panel.width + x); panel.pixels[index] = c[0]; panel.pixels[index + 1] = c[1]; panel.pixels[index + 2] = c[2]; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

上面的代码可以正常工作，因为它看起来是向后排序的，但是视觉效果很快就卡住了，而没有重新合成原始图像。 由于我是一个完整的新手，因此非常感谢任何见解，干杯！

Answer 1

为了反转排序以将像素放回其原始 position 您需要不基于色调，而是基于每个像素的原始 position 进行排序。 这意味着您需要一个单独的数据结构来跟踪每个像素的来源：

 let panel; let counter = 0; const sc = 2; const panelW = 25; const panelH = 15; const frameW = 20; let pixelOrigin = []; function preload() { panel = loadImage("https://www.paulwheeler.us/files/Burano-island-Venice.jpg"); } function setup() { createCanvas( sc * (panel.width + 2 * frameW), sc * (panel.height + 2 * frameW) ); pixelDensity(1); for (let j = 0; j < panel.width; j++) { pixelOrigin[j] = []; for (let i = 0; i < panel.height; i++) { pixelOrigin[j][i] = i; } } } function draw() { if (counter < 3200000) { panel.loadPixels(); for (let i = 0; i < panel.height - 1; i++) { for (let j = 0; j < panel.width; j++) { counter = counter + 1; if ( hue(fGetPanelPixel(j, i)) > hue(fGetPanelPixel(j, i + 1)) ) { let hold = fGetPanelPixel(j, i + 1); fSetPanelPixel(j, i + 1, fGetPanelPixel(j, i)); fSetPanelPixel(j, i, hold); // Also swap origins let tmp = pixelOrigin[j][i + 1]; pixelOrigin[j][i + 1] = pixelOrigin[j][i]; pixelOrigin[j][i] = tmp; } } } panel.updatePixels(); } else { panel.loadPixels(); for (let i = panel.height - 2; i >= 0; i--) { for (let j = 0; j < panel.width; j++) { if (pixelOrigin[j][i] > pixelOrigin[j][i + 1]) { let hold = fGetPanelPixel(j, i + 1); fSetPanelPixel(j, i + 1, fGetPanelPixel(j, i)); fSetPanelPixel(j, i, hold); // Also swap origins let tmp = pixelOrigin[j][i + 1]; pixelOrigin[j][i + 1] = pixelOrigin[j][i]; pixelOrigin[j][i] = tmp; } } } panel.updatePixels(); } image(panel, sc * frameW, sc * frameW, sc * panel.width, sc * panel.height); } function fGetPanelPixel(x, y) { const index = 4 * (y * panel.width + x); return [ panel.pixels[index], panel.pixels[index + 1], panel.pixels[index + 2], ]; } function fSetPanelPixel(x, y, c) { const index = 4 * (y * panel.width + x); panel.pixels[index] = c[0]; panel.pixels[index + 1] = c[1]; panel.pixels[index + 2] = c[2]; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>