检测某个位置的东西是否已经存在

Question

我在我的代码中添加了一些东西，用于检测对象（像素）何时已经存在，然后替换颜色而不是创建新颜色。但是，由于某种原因，它什么也没做。

代码：

var gridSize = 16;

var pixels = [];

var draw = function() {
    background(255, 255, 255);
    for (var i = 0; i < gridSize; i++) {
        stroke(0, 0, 0);
        line(400/gridSize*i, 0, 400/gridSize*i, 400);
        line(0, 400/gridSize*i, 400, 400/gridSize*i);
    }
    for (var i = 0; i < pixels.length; i++) {
        noStroke();
        fill(pixels[i][2][0], pixels[i][2][1], pixels[i][2][2]);
        rect(pixels[i][0]*(400/gridSize), pixels[i][1]*(400/gridSize), 400/gridSize, 400/gridSize);
    }
    document.getElementById("output").innerHTML = pixels;
    fill(255, 0, 0);
    text(alreadyExists, 200, 200);
};

var mousePressed = function() {
    alreadyExists = false;
    for (var i = 0; i < pixels.length; i++) {
        if (pixels[i] === [ceil(mouseX/(400/gridSize))-1, ceil(mouseY/(400/gridSize))-1, [document.getElementById("color1").value, document.getElementById("color2").value, document.getElementById("color3").value]]) {
            alreadyExists = true;
            pixels[i][2] = [document.getElementById("color1").value, document.getElementById("color2").value, document.getElementById("color3").value];
        }
    }
    if (!alreadyExists) {
        pixels.push([ceil(mouseX/(400/gridSize))-1, ceil(mouseY/(400/gridSize))-1, [document.getElementById("color1").value, document.getElementById("color2").value, document.getElementById("color3").value]]);
    }
};
var mouseDragged = function() {
    alreadyExists = false;
    for (var i = 0; i < pixels.length; i++) {
        if (pixels[i] === [ceil(mouseX/(400/gridSize))-1, ceil(mouseY/(400/gridSize))-1, [document.getElementById("color1").value, document.getElementById("color2").value, document.getElementById("color3").value]]) {
            alreadyExists = true;
            pixels[i][2] = [document.getElementById("color1").value, document.getElementById("color2").value, document.getElementById("color3").value];
        }
    }
    if (!alreadyExists) {
        pixels.push([ceil(mouseX/(400/gridSize))-1, ceil(mouseY/(400/gridSize))-1, [document.getElementById("color1").value, document.getElementById("color2").value, document.getElementById("color3").value]]);
    }
};

Answer 1

比较数组时，您需要单独比较每个项目。我修改了原始示例以最大程度地减少代码块的重复并提高位速度和内存使用率。您也可以 a working example here

我们的想法是比较像素位置，x 的索引为 0，y 的索引为 1。然后比较颜色通道，它们也被编码在一个数组中，所以我们需要再次单独比较每个组件。

以下示例中的函数 samePixels 正是这样做的：

var samePixels = function (p1, p2) {
    var samePosition = p1[0] === p2[0] && p1[1] === p2[1];

    if (!samePosition) {
        return false;
    }

    var colors1 = p1[2];
    var colors2 = p2[2];

    return (colors1[0] === colors2[0]) &&
           (colors1[1] === colors2[1]) &&
           (colors1[2] === colors2[2]);
}

js部分的完整源代码：


var gridSize = 16;

var pixels = [];
var alreadyExists;
var color1 = document.getElementById('color1');
var color2 = document.getElementById('color2');
var color3 = document.getElementById('color3');

var draw = function() {
    background(255, 255, 255);
    for (var i = 0; i < gridSize; i++) {
        stroke(0, 0, 0);
        line(400/gridSize*i, 0, 400/gridSize*i, 400);
        line(0, 400/gridSize*i, 400, 400/gridSize*i);
    }
    for (var i = 0; i < pixels.length; i++) {
        stroke(0);
        fill(pixels[i][2][0], pixels[i][2][1], pixels[i][2][2]);
        rect(pixels[i][0]*(400/gridSize), pixels[i][1]*(400/gridSize), 400/gridSize, 400/gridSize);
    }
    document.getElementById("output").innerHTML = pixels;
    fill(255, 0, 0);
    text(alreadyExists, 200, 200);
};

var mousePressed = mouseDragged = function() {
    alreadyExists = false;
    closestPixel = [ceil(mouseX/(400/gridSize))-1, ceil(mouseY/(400/gridSize))-1, [color1.value, color2.value, color3.value]];
    
    for (var i = 0; i < pixels.length; i++) {
        if (samePixels(pixels[i], closestPixel)) {
            alreadyExists = true;
            pixels[i][2] = [color1.value, color2.value, color3.value];
            
            break;
        }
    }
  
    console.log('Does the pixel already exist?', alreadyExists);
  
    if (!alreadyExists) {
        pixels.push(closestPixel);
    }
};

var samePixels = function (p1, p2) {
    var samePosition = p1[0] === p2[0] && p1[1] === p2[1];
    
    if (!samePosition) {
        return false;
    }
    
    var colors1 = p1[2];
    var colors2 = p2[2];
    
    return (colors1[0] === colors2[0]) &&
           (colors1[1] === colors2[1]) &&
           (colors1[2] === colors2[2]);
}

检测某个位置的东西是否已经存在

Detecting if something in a position already exists

javascript

processing

processing.js