Agregué algo a mi código que se supone que detecta cuando ya existe un objeto (píxel), y luego reemplaza el color en lugar de crear uno nuevo. Sin embargo, por alguna razón, simplemente no hace nada.
Código:
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]]); } };Al comparar matrices, debe comparar individualmente cada elemento, en su caso. Modifiqué el ejemplo original para minimizar la repetición de bloques de código y mejorar un poco la velocidad de bits y el uso de la memoria. También puede un ejemplo de trabajo aquí
La idea es comparar las posiciones de los píxeles, codificados en el índice 0 para x y 1 para y. Y luego para comparar los canales de color, que también están codificados en una matriz, por lo que debemos comparar nuevamente cada componente individualmente.
La función samePixels en el siguiente ejemplo está haciendo exactamente eso:
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]); }Código fuente completo para la parte 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]); }