Different approaches for rendering a grid of elements/data

Thread: Different approaches for rendering a grid of elements/data

2008-05-11 09:41:33

Hello,

I've been doing some study on how to create a grid-like representation of flat-based arrays.

Considering you are working with a data backend that will server you a one-dimensional array like this:

var arr = [1,2,3,4,5,6,7,8,9,0]

And you would like to render in in your flash applications (or whatever) like a grid/matrix:

1,2,3,4
5,6,7,8
9,0

The way I do it currently:

<as2 code>

//First I decide on a condition to when I will "reset the column pointer and do a line break";

var MAX_COLS = 4;

for (i=0; i < arr.length; i++)
{
  if (i % MAX_COLS == 0 && i != 0)
;   {
    ; rows++;
    }

  var thumb_mc.x = i*(thumb_mc.width) + offset;
    var thumb_mc-y = rows*(thumb_mc.height) + offset;

}

</as2 code>

Not that this is pseudo-code, I haven't actually tested it, but you can get the idea.

I could have used a cols variable in the place of using the i counter and just replace the condition with the modulus with a "if cols > MAX_COLS", since I would be reseting (cols = 0) this var when this condition were true:

if (cols >= MAX_COLS)
{
cols = 0;
rows++
}

Now, what bothering me is the two dimensional array usually used in tile-based games.

I was thinking this morning that maybe it would be easier to just convert the flat-based array to a two dimensional one beforehand, like this:

var arr = [[1,2,3,4],[5,6,7,8],[9,0]];

and then use a loop like:

for (i = 0; i < arr.length; i ++) {
for (j = 0; j < arr[i].lentgh; j++) {
    thumb_mc.x = i*thumb_mc.width + offset;
    thumb_mc.y = j*thumb_mc.height + offset;
}
}

Please, correct me if I'm wrong on any of these points/code.

What do you think?

Thanks in advance,

PS.: Btw, is there a book or something that has recipes/patterns for such problems ? (like:  ways to render data in a grid-based fashion).

Marcelo.

Re: Different approaches for rendering a grid of elements/data

2008-05-11 10:15:03

I think it's better to keep data as clean as possible.
You could make a copy of the data array and format it as a
2D array,
but then you're just moving the "break-the-lines"
code to a different
place; I don't see any advantages in doing that.

-- 
Eduardo Omine
http://blog.omine.net/
http://www.omine.net/

_______________________________________________
osflash mailing list
osflashosflash.org
http://osflash.org/mailman/listinfo/osflash_osflash.org

Re: Different approaches for rendering a grid of elements/data

Portugal

2008-05-11 10:27:39

Data is one thing, data visualization is another. Data format should be independent of the way data is shown on screen.

I normally do it like this:
   
    private static const ELEMENTS_PER_LINE:Number = 3;

      private function getGridPosition(i:Number):Point
    {
   ;     var p:Point = new Point();
     
      p.y = Math.floor(i / ELEMENTS_PER_LINE);
      p.x = i % ELEMENTS_PER_LINE;
  ;    
      return p;
;     }  

      public function addElements(elements:Array):void
    {
   ;     for (var i:Number = 0; i < elements.length; ++i)
        {
   ;       var obj:Object = elements[i];
   ;      
        var instance:MyClass= new MyClass(obj);
;         addChild(instance);
             
        var p:Point = getGridPosition(i);
       
        instance.x = (instance.width * p.x);
          instance.y = (instance.height * p.y); ;      
      }
   ;   }

Hope it helps.

Joã;o Saleiro

Untitle<wbr>d Document

webfuel.pt" height="70" width="244">

João Saleiro

Email/MSN: joao.saleiro

webfuel.pt" class="style2">joao.saleiro

webfuel.pt
Skype: joao.saleiro
Tel: +351 916 077 097 / +351 968 203 370
WWW: http://www.webfuel.pt

Marcelo de Moraes Serpa wrote:

mail.gmail.com" type="cite">Hello,

I've been doing some study on how to create a grid-like representation of flat-based arrays.

Considering you are working with a data backend that will server you a one-dimensional array like this:

var arr = [1,2,3,4,5,6,7,8,9,0]

And you would like to render in in your flash applications (or whatever) like a grid/matrix:

1,2,3,4
5,6,7,8
9,0

The way I do it currently:

<as2 code>

//First I decide on a condition to when I will "reset the column pointer and do a line break"

var MAX_COLS = 4;

for (i=0; i < arr.length; i++)
{
  if (i % MAX_COLS == 0 && i != 0)
;   {
   ;     rows++;
  ;   }

  var thumb_mc.x = i*(thumb_mc.width) + offset;
  ; var thumb_mc-y = rows*(thumb_mc.height) + offset;

}

</as2 code>

Not that this is pseudo-code, I haven't actually tested it, but you can get the idea.

I could have used a cols variable in the place of using the i counter and just replace the condition with the modulus with a "if cols > MAX_COLS", since I would be reseting (cols = 0) this var when this condition were true:

if (cols >= MAX_COLS)
{
  cols = 0;
; rows++
}

Now, what bothering me is the two dimensional array usually used in tile-based games.

I was thinking this morning that maybe it would be easier to just convert the flat-based array to a two dimensional one beforehand, like this:

var arr = [[1,2,3,4],[5,6,7,8],[9,0]];

and then use a loop like:

for (i = 0; i < arr.length; i ++) {
for (j = 0; j < arr[i].lentgh; j++) {
   ; thumb_mc.x = i*thumb_mc.width + offset;
  ;   thumb_mc.y = j*thumb_mc.height + offset;
}
}

Please, correct me if I'm wrong on any of these points/code.

What do you think?

Thanks in advance,

PS.: Btw, is there a book or something that has recipes/patterns for such problems ? (like:  ways to render data in a grid-based fashion).

Marcelo.
_______________________________________________
osflash mailing list
osflash.org">osflashosflash.org
http://osflash.org/mailman/listinfo/osflash_osflash.org
  

View Original Image

Re: Different approaches for rendering a grid of elements/data

2008-05-11 10:36:09

Thank you Eduardo and João.

Data format should be independent of the way data is shown on screen.

Yes, this principle made things clearer. Since it is indeed a flat (1D) array, I shouldn9;t be converting it to a 2D array only to "pass" presentation logic to the data itself.

However, there are times of course that the data itself is of a 2D or 3D nature. And hey, I may even eventually want to render a 3D datum in a 2D fashion **but** I shouldn9;t touch the data

Cheers,

Marcelo.

On Sun, May 11, 2008 at 12:27 PM, João Saleiro < joao.saleiro

webfuel.pt">joao.saleiro

webfuel.pt> wrote:

Data is one thing, data visualization is another. Data format should be independent of the way data is shown on screen.

I normally do it like this:
   
    private static const ELEMENTS_PER_LINE:Number = 3;

      private function getGridPosition(i:Number):Point
    {
   ;     var p:Point = new Point();
     
      p.y = Math.floor(i / ELEMENTS_PER_LINE);
      p.x = i % ELEMENTS_PER_LINE;
  ;    
      return p;
;     }  

      public function addElements(elements:Array):void
    {
   ;     for (var i:Number = 0; i < elements.length; ++i)
        {
   ;       var obj:Object = elements[i];
   ;      
        var instance:MyClass= new MyClass(obj);
;         addChild(instance);
             
        var p:Point = getGridPosition(i);
       
        instance.x = (instance.width * p.x);
          instance.y = (instance.height * p.y); ;      
      }
   ;   }

Hope it helps.

João Saleiro

webfuel.pt" width="244" height="70"> João Saleiro

Email/MSN: joao.saleirowebfuel.pt" target="_blank">joao.saleirowebfuel.pt
Skype: joao.saleiro
Tel: +351 916 077 097 / +351 968 203 370
WWW: http://www.webfuel.pt

Marcelo de Moraes Serpa wrote:
Hello,

I've been doing some study on how to create a grid-like representation of flat-based arrays.

Considering you are working with a data backend that will server you a one-dimensional array like this:

var arr = [1,2,3,4,5,6,7,8,9,0]

And you would like to render in in your flash applications (or whatever) like a grid/matrix:

1,2,3,4
5,6,7,8
9,0

The way I do it currently:

<as2 code>

//First I decide on a condition to when I will "reset the column pointer and do a line break";

var MAX_COLS = 4;

for (i=0; i < arr.length; i++)
{
  if (i % MAX_COLS == 0 && i != 0)
;   {
   ;     rows++;
  ;   }

  var thumb_mc.x = i*(thumb_mc.width) + offset;
  ; var thumb_mc-y = rows*(thumb_mc.height) + offset;

}

</as2 code>

Not that this is pseudo-code, I haven't actually tested it, but you can get the idea.

I could have used a cols variable in the place of using the i counter and just replace the condition with the modulus with a "if cols > MAX_COLS", since I would be reseting (cols = 0) this var when this condition were true:

if (cols >= MAX_COLS)
{
  cols = 0;
; rows++
}

Now, what bothering me is the two dimensional array usually used in tile-based games.

I was thinking this morning that maybe it would be easier to just convert the flat-based array to a two dimensional one beforehand, like this:

var arr = [[1,2,3,4],[5,6,7,8],[9,0]];

and then use a loop like:

for (i = 0; i < arr.length; i ++) {
for (j = 0; j < arr[i].lentgh; j++) {
   ; thumb_mc.x = i*thumb_mc.width + offset;
  ;   thumb_mc.y = j*thumb_mc.height + offset;
}
}

Please, correct me if I'm wrong on any of these points/code.

What do you think?

Thanks in advance,

PS.: Btw, is there a book or something that has recipes/patterns for such problems ? (like:  ways to render data in a grid-based fashion).

Marcelo.
_______________________________________________
osflash mailing list
 osflashosflash.org" target="_blank">osflashosflash.org
http://osflash.org/mailman/listinfo/osflash_osflash.org
  
_______________________________________________
osflash mailing list
osflashosflash.org">osflashosflash.org
http://osflash.org/mailman/listinfo/osflash_osflash.org

View Original Image

Re: Different approaches for rendering a grid of elements/data

2008-05-11 11:43:44

You can see my gridManager class:

http://www.codigoabierto.net/funlabcms/?p=4

[1-5]

about | contact Other archives ( Real Estate discussion Medical topics )