Detecting if something in a position already exists

I added something to my code that's supposed to detect when an object (pixel) already exists, and then replace the color instead of creating a new one. However, for some reason, it just doesn't do anything.

Code:

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]]);
    }
};

When comparing arrays, you need to compare individually every item, in your case. I modified a the original example to minimize repetition of code blocks and to improve a bit speed and memory usage. You can also a working example here

The idea is to compare the pixels positions, encoded at index 0 for x and 1 for y. And then to compare the color channels, which are also encoded in an array so we need to then again compare individually every component.

The function samePixels in the following example is exactly doing that:

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]);
}

Full source code for the js part:

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]);
}