Two arrays equality test

Question

This is more of a logic question. I can't figure out what is wrong with my function

// This function is meant to check if 3 pixels 
// are colored and therefore if the canvas is full

function checkIfFull() {
    let emptyPixel = [0, 0, 0, 0];
    let pixel1 = get(1, 1);
    //let pixel2 = get(599,599);
    //let pixel3 = get(400, 50);
    console.log(pixel1);

    if (pixel1 === emptyPixel) {
        console.log(true);
    } else {
        console.log(false);
    }
}

I am running the P5.js library. The get() is giving me an Array [a, b, c, d] and I am trying to test for equality or differences between those two (emptyPixel / pixel1)

These are the things I have tried: Testing every position within the arrays.

Thanks!

Arrays are not compared using == operator, you should loop through the array and compare each element. In any other language like java, there are utilities that help find the equality. — Zeus, Mar 13 '19 at 21:08
Did that : used a for loop and tested the equality for each element. Got the same result : no Ideia why :/ — Guillaume AT, Mar 13 '19 at 21:11
You might want to try it out as in https://stackoverflow.com/a/14853974/3830432 — Doug F, Mar 13 '19 at 21:13
Another possibility when checking "equality" of arrays is to convert them to strings (via `JSON.stringify()`) and then compare, though this might not be optimal in all situations. In the case you illustrate, that could work nicely, though I can't speak to the performance implications. Food for thought, that's all. — skwidbreth, Mar 13 '19 at 21:15
@Zeus Used something like that : // This function is meant to check if 3 pixels // are colored and therefore if the canvas is full function checkIfFull() { let emptyPixel = [0, 0, 0, 0]; let pixel1 = get(1, 1); //let pixel2 = get(599,599); //let pixel3 = get(400, 50); console.log(pixel1); for (let i = 0; i > 3; i++) { if (pixel1[i] === emptyPixel[i]) { console.log(true); } else { console.log(false); } } } — Guillaume AT, Mar 13 '19 at 21:18
I am not sure that this is really a duplicate of "how to compare arrays" The key phrase in this question is, " This function is meant to check if 3 pixels are colored and therefore if the canvas is full" Can you elaborate on what you mean by, "canvas is full"? — Charlie Wallace, Mar 14 '19 at 17:12
I am using the p5.js library which allows me to create a canvas (display window); the end goal of this program is to make a digital painting. So the script draws into the canvas and I am looking for a way to trigger an event when most of the pixels of the canvas have gained colores ( the canvas starts white) My ideia is to check for three pixels scared throughout the canvas. hope this is understandable :) — Guillaume AT, Mar 16 '19 at 09:17

score 0 · Answer 1 · answered Mar 13 '19 at 21:27

0

If an empty pixel is an array [0,0,0,0] you can test it with something like this

function checkIfEmpty(pixel) {
  return pixel.every(x => x === 0)
}

answered Mar 13 '19 at 21:27

Guy Yogev

861
5
14

A pixel with value [0,0,0,0] could be set to black and an alpha value of zero. I don't think we can determine if a pixel has been set our not by just checking the color and alpha values. – Charlie Wallace Mar 14 '19 at 17:29

score -1 · Answer 2 · answered Mar 13 '19 at 21:25

-1

Your array can be simply transformed to string to check equality

const emptyPixel = "0,0,0,0";

function checkIfFull() {
    
    const pixel1 = get(1, 1);

    return pixel1.toString() === emptyPixel
}

console.log(checkIfFull)

answered Mar 13 '19 at 21:25

AlexOwl

869
5
11

Why can we assume that a pixel with value [0,0,0,0] is empty? Why is a function that checks for equality with something called, "emptyPixel" called checkIfFull? I am not trying to be difficult and would really like to help your improve this answer. – Charlie Wallace Mar 14 '19 at 17:17

Two arrays equality test

2 Answers2