Creating a grid array of co ordinates

Question

I'm a little confused with my array creation. I have a list of items with x:y co ordinates and also their dimensions (in grid sizes) ... for example:

x: 1
y: 7
width: 2 tiles
height: 2 tiles

So the idea im trying to do is create an array of x:y grids that are "occupied". But looping such data so the occupied tiles would there for be:

x: 1
y: 7
//
x: 2
y: 7
//
x: 1
y: 8
//
x: 2
y: 8

Because in the above example the item is 2 by 2 tiles ( a square ).

My object is structured like this (shown in console.log(sdata);)

7: Array[4]
0: "1"
1: "7"
2: "2"
3: "2"

So yeah im trying to make an array to store this kind of grid reference..Hope I explained what I trying to get at, but i can't work out how to structure a loop to create the array.

The "object structure" in your last code block doesn't make any sense. Why are the numbers strings? What do the left hand properties have to do with the right hand values? Why is 7 an array? — mikerobi
– mikerobi, Commented Apr 3, 2012 at 20:15
Take a look at this. It may help: stackoverflow.com/questions/2529865/… — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Apr 3, 2012 at 20:19
Its a very basic object structure, 7 is the key. 0 to 3 is array position. And it was generated in PHP thus automatically assumes it as string, this is not important issue as I can convert them to integer during processing the data. — Sir
– Sir, Commented Apr 3, 2012 at 20:20

rlemon · Accepted Answer · 2012-04-03 20:41:11Z

1

http://jsfiddle.net/rlemon/JeeV2/ Here is an example of how you could produce this type of 'grid' occupied data..

var chords = [ // instead of arrays we'll use objects.. they're nicer. 
    {
    x: 1,
    y: 7,
    h: 2, // height
    w: 2}, // width
{ // ohh look a second plot point.
    x: 4,
    y: 1,
    h: 3,
    w: 2},
];

var occupied = { // will be your cells points occupied
    x: [],
    y: []    
};
chords.forEach(function(chord) { // now lets loop the chords and produce the occupied array
    occupied.x.push( chord.x );
    occupied.x.push( chord.x + (chord.w-1) ); // expand the width of the cell - initial point
    occupied.y.push( chord.y );
    occupied.y.push( chord.y + (chord.h-1) ); // expand the height of the cell - initial point
});
console.log( occupied );
// outputs
Object
    x: Array[4]
        0: 1
        1: 2
        2: 4
        3: 5

    y: Array[4]
        0: 7
        1: 8
        2: 1
        3: 3

answered Apr 3, 2012 at 20:41

rlemon

17.7k14 gold badges95 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sir Over a year ago

If i wanted to know if y:8 was occupied how would i be able to check because i couldn't know it was in array position [1] ?

Alexander · Accepted Answer · 2012-04-03 20:29:20Z

1

The resulting outputArray array is a collection of objects in the form { x: value, y: value}.

var inputArray = [ [1,7,2,2], ... ];
var outputArray = [];
for(var i = 0; i < inputArray.length; i++) {
    var item = {
      x: inputArray[i][0],
      y: inputArray[i][1],
      width: inputArray[i][2],
      height: inputArray[i][3]
    };
    for(var xx = 0; xx < item.width; xx++) {
        for(var yy = 0; yy < item.height; yy++) {        
            outputArray.push({
                x: item.x + xx,
                y: item.y + yy
            });
        }
    }
}

I added the x, y, width and height attributes to make it more understandable.

answered Apr 3, 2012 at 20:29

Alexander

23.5k11 gold badges65 silver badges74 bronze badges

Comments

ninjagecko · Accepted Answer · 2012-04-03 20:31:30Z

0

function range(a, b) {
    /*
        range(5) -> [0,1,2,3,4]
        range(1,4) -> [1,2,3]
    */
    if (b===undefined)
        var start=0, stop=a;
    else
        var start=a, stop=b;

    var R = [];
    for(var i=start; i<stop; i++)
        R.push(i);
    return R;
}

Then it's a two-liner:

range(x, x+width).map(function(x) {
    return range(y, y+height).map(function(y) {
        return {x:x, y:y}; // anything you'd like
    })
})

Result (obtained via JSON.stringify):

[
    [ {"x":1,"y":7}, {"x":1,"y":8} ],
    [ {"x":2,"y":7}, {"x":2,"y":8} ]
]

answered Apr 3, 2012 at 20:31

ninjagecko

91.5k24 gold badges144 silver badges153 bronze badges

Collectives™ on Stack Overflow

Creating a grid array of co ordinates

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related