I have a loop where i iterate over the pixel data received from the method getImageData(). There I find the coordinates for each pixel (coordX and coordY). Then I filter the pixels depending on the color and I want to push the pixels I need into the object in the following way:
result.coords[coordX][coordY].counted
If with numbers, then like this:
result.coords = {
1: {
1: {
counted: false,
},
2: {
counted: false,
},
},
2: {
5: {
counted: false,
},
8: {
counted: false,
},
9: {
counted: false,
},
},
};
I did this but there are problems:
var result = {
coords: {},
},
pixel = new app.Color(),
array = {},
coordX,
coordY,
i;
for (i = 0; options.imageData && i < options.imageData.data.length; i += 4) {
pixel.x = options.imageData.data[i];
pixel.y = options.imageData.data[i + 1];
pixel.z = options.imageData.data[i + 2];
pixel.a = options.imageData.data[i + 3];
coordX = (i / 4) % options.imageData.width;
coordY = Math.floor(i / 4 / options.imageData.width);
// Pixel filter by color
if (pixel.x == 255 && pixel.a == 255) {
array[coordY] = {
counted: false,
};
result.coords[coordX] = array;
// .. next is the code that is not important ..
}
}
Problem of the following type: when I push a new Y coordinate, it is added to the array for all X. But I may have cases when, for example, the Y=5 coordinate will not be at the X=1 coordinate, but only at X=2 (as in example above). But in my case Y=5 will also be added to X=1.
Please tell me how to correctly create an object with property 'coords', in which there will be properties X, in which all Y related to it will be stored, in which there will also be property 'counted' with value False.
Edit:
I did like this:
data = {};
if (pixel.x == 255 && pixel.a == 255) {
if (result.coords[coordX]) {
for (var item in result.coords[coordX]) {
data[item] = result.coords[coordX][item];
}
}
data[coordY] = {
counted: false,
};
result.coords[coordX] = data;
data= {};
}
Given an i, the OP computes coordX and coordY. What's needed is something like an inverse to produce a key for the counting data structure.
const width = options.imageData.width;
function keyForXY(x, y) {
return y * width + x
}
function setValueAtXY(object, x, y, value) {
const key = keyForXY(x,y);
object[key] = value;
}
function getValueAtXY(object, x, y) {
const key = keyForXY(x,y);
return object[key];
}
Replace your data structure access with these, like...
if (pixel.x == 255 && pixel.a == 255) {
setValueAtXY(array, coordX, coordY, { counted: false });
setValueAtXY(result.coords, coordX, coordY, array);
}
Note that I'm not sure exactly what's happening in the OP semantically... why for example we're placing a bool in an object or how "array" and "result.coords" relate to each other, so I'm not endorsing any of that, just mapping the OP logic into a more appropriate (seeming) data structure.