Javascript 2d array select around from single point

120

Question: Javascript 2d array select around from single point

Say I have a 15x15 2d array

    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],     [0, 0, 0, 0, A, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

See the character A? at y:9 and x:4 (index starts with 0). What I want to do here is to javascript error update the array where I select or update the 0s around the A to, say, asterisk (*).

For an example, lets say I want 0s around the A as far as 3 indexes to be updated as *

    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],     [0, 0, 0, 0, *, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],     [0, 0, 0, *, *, *, 0, 0, 0, 0, 0, 0, 0, 0, 0],     [0, 0, *, *, *, *, *, 0, 0, 0, 0, 0, 0, 0, 0],     [0, *, *, *, A, *, *, *, 0, 0, 0, 0, 0, 0, 0],     [0, 0, *, *, *, *, *, 0, 0, 0, 0, 0, 0, 0, 0],     [0, 0, 0, *, *, *, 0, 0, 0, 0, 0, 0, 0, 0, 0],     [0, 0, 0, 0, *, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

What is the most efficient way to achieve this?

EDIT What I've tried:

var s_length = 4, coordinate_y_x = [9, 4]     for (let i1 = 0; i1 < s_length; i1++) {        for (let i = 0; i < s_length; i++) {         if (map[coordinate_y_x[0] - i][coordinate_y_x[1]] != undefined) map[coordinate_y_x[0] - i][coordinate_y_x[1]] = 1         if (map[coordinate_y_x[0]][coordinate_y_x[1] - i]!= undefined) map[coordinate_y_x[0]][coordinate_y_x[1] - i] = 1       }        for (let i = s_length; i > 0; i--) {         console.log("loop2");         if (map[coordinate_y_x[0] + i][coordinate_y_x[1]]!= undefined) map[coordinate_y_x[0] + i][coordinate_y_x[1]] = 1         if (map[coordinate_y_x[0]][coordinate_y_x[1] + i]!= undefined) map[coordinate_y_x[0]][coordinate_y_x[1] + i] = 1       }      }

I managed to change what's left, right, top, and bottom from this code with given point and length, but javascript error I can't seem to figure out how to do the rest (between directions)

    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],     [0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],     [0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],     [0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],     [0, 1, 1, 1, A, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0],     [0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],     [0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],     [0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

Total Answers: 1

40

Answers 1: of Javascript 2d array select around from single point

One way is with a somewhat spiral matrix walk, but instead of a "square" walk, yours will be diagonal / "diamond" shape. Additionally, we don't really care about the "connectiveness" of the path, so I'll jump around a bit. That is, when a walk has finished a ring, it isn't important that the next ring start on a neighboring cell of the previous ring's last step.

In your example data, I've marked the cells that the javascript error algorithm would visit in order (1st, 2nd, 3rd, etc.)

[0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0], [0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0], [0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0], [0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0], [0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0], [0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0], [0,  0,  0,  0, 16,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0], [0,  0,  0, 15,  7, 17,  0,  0,  0,  0,  0,  0,  0,  0,  0], [0,  0, 14,  6,  2,  8, 18,  0,  0,  0,  0,  0,  0,  0,  0], [0, 13,  5,  1,  A,  3,  9, 19,  0,  0,  0,  0,  0,  0,  0], [0,  0, 24, 12,  4, 10, 20,  0,  0,  0,  0,  0,  0,  0,  0], [0,  0,  0, 23, 11, 21,  0,  0,  0,  0,  0,  0,  0,  0,  0], [0,  0,  0,  0, 22,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0], [0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0], [0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0]

Note, I've chosen to always start from the left side javascript error of the origin, but that is arbitrary. You could start from the top, right, or bottom side.

So our three loops (in order) will be

  1. The length we want to "expand" by can be thought of as a separate "ring." So loop each ring.
  2. Next, loop each "side" of that ring.
  3. Finally, loop each "step" along that side.

To keep things symmetric, each side will only occupy a single "corner" cell. So for example when looping the 3rd ring, each side would only be 3 steps each. Here I have each side labeled as a, b, c, and d.

* * * b * * * * * a * b * * * a * * * b * a * * X * * c * d * * * c * * * d * c * * * * * d * * *

Otherwise the only tricky part is figuring out how to change directions as you loop each side.

A very simple way to do this is store "deltas," how much we expect each x and y value (where we currently are) to change for each step. We know we'll be moving 1 step each time, so it is just a matter of moving right / down (positive +) or left / up (negative -).

I decided to store these values in an array, but you can probably do some modulo math to switch between them. Looping over a constant is just a little easier to understand. So moving up and to the right would have an x_delta value of 1 and y_delta value of -1, etc.

Finally, you need a "in bounds" check as you are completing your walk. The algo will still try javascript error and "visit" these cells, but won't try to write to the array if it doesn't exist. This is one area of the algo you can probably improve.

Put it all together, and you have this:

const data = Array(15)     .fill()     .map(v => Array(15).fill(0));  // Assumes the graph won't contain `undefined` values. Otherwise, do a `length` check on the arrays function inBounds(data, [y, x]) {     return data?.[y]?.[x] !== undefined; }  const deltas = [     [ 1, -1], // Up right     [ 1,  1], // Down right     [-1,  1], // Down left     [-1, -1], // Up left ];  function fillFrom({origin: [oy, ox], data, length, value}) {     // Walk in diamond "rings" around our origin     for (let size = 1; size <= length; size++) {         // Start from the left side of our ring         let x = ox - size;         let y = oy;         // Move along 4 sides of the diamond         for (let [xd, yd] of deltas) {             // Move each step along the side             for (let step = 0; step < size; step++) {                 if (inBounds(data, [y, x])) {                     data[y][x] = value;                 }                 x += xd;                 y += yd;             }         }     }      return data; }   // Updates data "in place." Would need to deep clone if you wanted to keep things immutable fillFrom({origin: [9, 4], data, length: 3, value: 1}); data[9][4] = 'A';  console.log(data.map(r => r.join('')).join('\n'));

Recent Blog

Contains into JSON array PostgreSQL

May 29, 2023

Getting all th tags and testing values with playwright

May 29, 2023

Spring - Enum in RestControllers?

May 29, 2023

Higher Order Components - React.JS

May 29, 2023

Parser rule does not produce an error for invalid input

May 29, 2023

Remove "Some" keyword from string println! in rust [duplicate]

May 29, 2023

How to continue using a powershell script after it finished

May 29, 2023

Does not render NLog property value in logs when using ScopeContext.PushProperty in OnActionExecutedAsync()

May 29, 2023

What will be the formula for conditional formatting to highlight the duplicates in horizontally for multiple rows in google sheet?

May 29, 2023

NVDA calls out incomplete error message and twice

May 29, 2023