感謝您閱讀本文。我正在嘗試修改此像素排序教程的作者提供的sketch.js。
我想知道將每個像素的原始位置存盤在附加紋理中以便使影像能夠排序回原始位置的最佳方法是什么？
到目前為止，我的目標是在 draw 函式中放置 2 個條件陳述句，以便在某個時間點（或迭代次數）像素開始冒泡排序回到原始影像，然后再重新排序。
事情可能是正確的
- 改變比較的符號（即從大到小）
- 在兩個陳述句中復制 .loadPixels() 和 .updatePixels() 。
我不太確定的事情
- 反轉 else 陳述句中的 for 回圈
- 將像素索引從(j, i 1)更改為(j, i - 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>上面的代碼可以正常作業，因為它似乎向后排序，但視覺效果很快就卡住了，而無需重新組合原始影像。由于我是一個完整的新手，任何見解都非常感謝，干杯！
uj5u.com熱心網友回復：
為了反轉排序以將像素放回其原始位置，您需要不根據色調進行排序，而是根據每個像素的原始位置進行排序。這意味著您需要一個單獨的資料結構來跟蹤每個像素的來源：
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/368468.html
下一篇：如何對字串進行排序并檢查字謎？