Creating a grid array of co ordinates

Go To StackoverFlow.com

0

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.

2012-04-03 20:11
by Sir
What you have done - Alexander 2012-04-03 20:14
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 2012-04-03 20:15
Take a look at this. It may help: http://stackoverflow.com/questions/2529865/javascript-multidimensional-arra - Diodeus - James MacFarlane 2012-04-03 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 2012-04-03 20:20


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
2012-04-03 20:41
by rlemon
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] - Sir 2012-04-03 20:50
sure... if occupied.y.indexOf(8) http://jsfiddle.net/rlemon/JeeV2/1 - rlemon 2012-04-03 20:54


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.

2012-04-03 20:29
by Alexander


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} ]
]
2012-04-03 20:31
by ninjagecko