[osflash] Different approaches for rendering a grid of elements/data

[João Saleiro]

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

	João Saleiro

Email/MSN: joao.saleiro at webfuel.pt <mailto:joao.saleiro at webfuel.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
> osflash at osflash.org
> http://osflash.org/mailman/listinfo/osflash_osflash.org
>   
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://osflash.org/pipermail/osflash_osflash.org/attachments/20080511/1184a93d/attachment.html 
-------------- next part --------------
A non-text attachment was scrubbed...
Name: logo.gif
Type: image/gif
Size: 4901 bytes
Desc: not available
Url : http://osflash.org/pipermail/osflash_osflash.org/attachments/20080511/1184a93d/attachment.gif