Encode Every Pixel into Array Quickly

[ItsYaBoiWesley]

Hi!

I'm making a maze game which uses color based collision detection, for the sake of using image mazes easily. My player detects if there is black in front of it, if there is not it can walk in that direction, if there is it will be stopped.

Now I'm coding the enemy, using "easystarjs" for pathfinding. They require an array of walkable (white in my game) and non-walkable (black in my game) information. So, I thought of making a 2D array, which has a slot for every pixel. Using for loops, I would encode every pixel into its proper position on the array using either 1 (wall/black pixel) or 0 (not-wall/white pixel)

I come from a C++ background, so I didn't think how slooowwww this would be in JavaScript. Is there any faster way I can do what I'm trying to do? It's likely this will need to run in the game LOOP, because the player moves.

[b10b]

https://www.w3schools.com/tags/canvas_getimagedata.asp

Running a map to turn that ImageData (per pixel) into a boolean array is pretty fast with modern js.  You probably only need to do it once on init?  When the Player moves that's unlikely needed in the pathfinding array (just the start position changes)?  If it is needed then make only the difference change(s).  But running pathfinding every loop is probably a bad idea anyway - do it less often - e.g. when the circumstances change.

[ItsYaBoiWesley]

2 hours ago, b10b said:

https://www.w3schools.com/tags/canvas_getimagedata.asp

Running a map to turn that ImageData (per pixel) into a boolean array is pretty fast with modern js.  You probably only need to do it once on init?  When the Player moves that's unlikely needed in the pathfinding array (just the start position changes)?  If it is needed then make only the difference change(s).  But running pathfinding every loop is probably a bad idea anyway - do it less often - e.g. when the circumstances change.

Ok, cool! But how do I map the data from getImageData into an array?

[b10b]

1 hour ago, ItsYaBoiWesley said:

how do I map the data from getImageData into an array?

https://www.w3schools.com/tags/canvas_imagedata_data.asp

Worth taking some time to read the APIs around Canvas, there aren't many methods - but each is very powerful so it's a high signal to noise ratio.

[ItsYaBoiWesley]

Oh, so I got down the pixel color thing. As in, I can get the pixel color of an X, Y, coordinate. But I need to get it into this format for the pathfinding library.

 

var grid = [[0,0,1,0,0],
            [0,0,1,0,0],
            [0,0,1,0,0],
            [0,0,1,0,0],
            [0,0,0,0,0]];

 

That's what's giving me trouble. I've tried some iteration stuff but I'm confused. (Obviously this will be a much bigger array than the example)

[b10b]

Sounds like a fun programming exercise ... translating a 1D array into a 2D array based on a fixed length row.  Keywords might be "array", "slice", "splice", "chunk".  Many ways to do it.

Or, given that it is a Boolean array, string expressions could be leveraged:

var _1d = [0,0,1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,0,0,0];
var _2d = _1d.join('').match( /.{1,5}/g ).map( p_s => p_s.split('').map( Number ) );

This assumes a row width of 5.

But probably tidier to do directly from the ImageMapData where you already know the width.  Map!

[BobF]

Using an array element for every single pixel may be an unnecessary inefficiency. Internally, I would divide the maze into cubes of pixels instead. Choose the largest cube size that guarantees all pixels within any given cube will have the same color. Feed a cube array to the pathfinder lib instead of a pixel array. A cube array will be WAY faster to build from ImageData (i.e., you only need to sample one ImageData pixel per cube), and the cube array will chew up WAY less RAM.

[ItsYaBoiWesley]

Well, sorry guys! I've changed my entire system ? 

No longer doing color based collision detection, I am rather doing a more conventional system with a genuine tilemap, which is then translated into canvas visual output.

Thanks for all of the support, though! I hope someone in the future finds this helpful!