2 Dimensional array

For this next challenge I'm going to pose something a bit simpler in hopes that it will spark some participation.

Overview:

Lets say I have a 1 dimensional array of colors that looks like this:

[
 r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,
 r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,
 r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,
 r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,
 r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,
 r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,
 r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,
 r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,
 r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,
 r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a
]

where the values are:
r = red (0 - 255)
g = green (0 - 255)
b = blue (0 - 255)
a = alpha (opacity 0 - 255)

Can you implement a SetPixel(x,y,color) function to update the values in the array?

The color parameter can be either a Class instance, a Dictionary or an Array(). Whatever you prefer.

There is no code size limit, but you should be able to accomplish this function in about 7 - 10 lines.

So what in your function definition controls the alpha? Alpha is not generally considered to be part of the color specification.

I actually implemented this routine as part of a graphics Engine I built from scratch about a month ago. For lookup efficiency, the points were kept in a one dimensional array like this one.
The solution to this particular problem doesn't require any color implementation knowledge, just an algorithm to perform the array lookup.

In regards to color specification, this format is part of the CSS3 Color Module
If its just idle curiosity, the basic idea for implementation of opacity values  is to calculate a weighted average between the current pixel color and the pixel color
you are laying on top of, which gives the illusion of being see through.

Hi TNO,

I have problems to understand the problem. What should the function return? What
is the meaning of x and y? Is the array a flattened matrix?

Regards

ehvbs

P.S.

What about the/my tuples?

Hi ehvbs, let me explain it this way:

Imagine you have an image that is 10 x 10 in size. Each pixel in that image is defined by the color values R,G,B, A for Red Green Blue and Alpha. If I was to represent that picture in  an array it could be a 3 dimensional array like this:

             screen = [
                 [
                     [r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a]
                 ],
                 [
                     [r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a]
                 ],
                 [
                     [r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a]
                 ],
                 [
                     [r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a]
                 ],
                 [
                     [r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a]
                 ],
                 [
                     [r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a]
                 ],
                 [
                     [r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a]
                 ],
                 [
                     [r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a]
                 ],
                 [
                     [r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a]
                 ],
                 [
                     [r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a],[r,g,b,a]
                 ]
             ]

This would make it easy and intuitive for me to find and update the individual pixel colors:

screen[x][y][c] = red
screen[x][y][c + 1] = green
screen[x][y][c + 2] = blue
screen[x][y][c + 3] = alpha

But what if I want to do some image processing or filtering on my image? What if my image is 5000x5000 in size? That's a lot of pixels to touch. And alot of lookups on the array to find that x/y position.
So one of the things you can do to speed up access to the array is to use fewer look ups by changing your data representation, in this case flattening it down to 1 dimension:

screen = [
r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,
r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,
r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,
r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,
r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,
r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,
r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,
r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,
r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,
r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a
]

So your lookup can look like screen[..some expression resulting in an index number...]  In which that expression could be calculated before hand in whole or in part. So the main hurdle in my challenge is, what is that magic expression that will allow you to find any color in the array?

In other words, can you come up with the formula for P?

Sub SetPixel(x,y,c)
  Dim P : P = ???
  screen(P) = c("Red")
  screen(P +1) = c("Green")
  screen(P + 2) = c("Blue")
  screen(P + 3) = c("Alpha")
End Sub

In regards to the Tuples, I was hoping TomRiddle was going to take a shot at it. Maybe with something involving a regular expression approach to see if it can prove to be shorter.
My original solution to that challenge isn't in VBS, so I need to translate it over.

ORIGINAL: TNO

In regards to the Tuples, I was hoping TomRiddle was going to take a shot at it. Maybe with something involving a regular expression approach to see if it can prove to be shorter.
My original solution to that challenge isn't in VBS, so I need to translate it over.

 
Sorry TNO, I got side tracked by having to write a script for work, I did have a go at the tuples (which did my head in) then went on holidays, came back with an iMac and have been making home movies, playing Chess and watching Merlin S1 instead since. Completely lost scripting momentum.
 
This challenge looks interesting though

   ' given an 2 x 3 x 4 sized array
   Dim aTest( 1, 2, 3 )
   ' filled with consecutive numbers
   Dim nIdx1, nIdx2, nIdx3
   Dim nVal : nVal = 0
   For nIdx1 = 0 To UBound( aTest, 1 )
       WScript.Stdout.Write "{ "
       For nIdx2 = 0 To UBound( aTest, 2 )
           WScript.Stdout.Write "["
           For nIdx3 = 0 To UBound( aTest, 3 )
               aTest( nIdx1, nIdx2, nIdx3 ) = nVal
               nVal = nVal + 1
               WScript.Stdout.Write padR4( aTest( nIdx1, nIdx2, nIdx3 ) )
           Next
           WScript.Stdout.Write " ]"
       Next
       WScript.Stdout.WriteLine " }"
   Next
   ' the number of elms must be 2 x 3 x 4 = 24
   WScript.Echo "# elms: 24 =>", nVal
   ' the last value must be 24 - 1 = 23
   WScript.Echo "last val: 23 =>", aTest( 1, 2, 3 )
   ' the value at 0, 1, 2 must be 0 * (4 * 3 * 1) + 1 * (4 * 1) + 2 * (1)
   '                                   12                4             1
   WScript.Echo "aTest( 0, 1, 2 ):", aTest( 0, 1, 2 ), "=>", 0 * (4 * 3 * 1) + 1 * (4 * 1) + 2 * (1)
   ' to compute this for arbitrary arrays you need
   Dim aMeta : aMeta = getArrayMetaInfo( aTest )
 
   For nIdx1 = 0 To UBound( aTest, 1 )
       For nIdx2 = 0 To UBound( aTest, 2 )
           For nIdx3 = 0 To UBound( aTest, 3 )
               Dim nFlatIdx : nFlatIdx = getFlatIdx( aMeta, Array( nIdx1, nIdx2, nIdx3 ) )
               Dim aMDIdxs  : aMDIdxs  = getMDIdxs( aMeta, nFlatIdx )
               WScript.Echo Join( Array( _
                      nIdx1, nIdx2, nIdx3 _
                    , "=>" _
                    , nFlatIdx _
                    , "==" _
                    , aTest( nIdx1, nIdx2, nIdx3 ) _
                    , ">>" _
                    , Join( aMDIdxs, " " ) _
                                       ), " " )
           Next
       Next
   Next
 
 Function getArrayMetaInfo( aX )
   Dim nDims    : nDims    = getArrayDimensions( aX )
   Dim nDimsUB  : nDimsUB  = nDims - 1
   Dim aUBounds : aUBounds = getArrayUBounds( aX, nDims )
 
   ReDim aSizes( nDimsUB )
   Dim nDim
   For nDim = 0 To nDimsUB
       aSizes( nDim ) = aUBounds( nDim ) + 1
   Next
 
   ReDim aDivs( nDimsUB )
   Dim nFak : nFak = 1
   For nDim = nDimsUB To 0 Step -1
       aDivs( nDim ) = nFak
       nFak          = nFak * aSizes( nDim )
   Next
 
   WScript.Echo "nDims", nDims
   WScript.Echo "nDimsUB", nDimsUB
 
   WScript.Echo "UBounds", Join( aUBounds, " " )
   WScript.Echo "Sizes"  , Join( aSizes  , " " )
   WScript.Echo "Divs"   , Join( aDivs   , " " )
 
   getArrayMetaInfo = Array( nDims, nDimsUB, aUBounds, aSizes, aDivs )
 End Function
 
 Function getArrayDimensions( aX )
   Dim nDims : nDims = 0
   Do While True
     On Error Resume Next
      Dim nUB : nUB = UBound( aX, nDims + 1 )
      If 0 <> Err.Number Then Exit Do
      nDims = nDims + 1
     On Error GoTo 0
   Loop
   getArrayDimensions = nDims
 End Function
 
 Function getArrayUBounds( aX, nDims )
   ReDim aRVal( nDims - 1 )
   Dim nDim
   For nDim = 0 To UBound( aRVal )
       aRVal( nDim ) = UBound( aX, nDim + 1 )
   Next
   getArrayUBounds = aRVal
 End Function
 
 Function padR4( vVal )
   padR4 = Right( Space( 4 ) & vVal, 4 )
 End Function
 
 Function getFlatIdx( aMeta, aIdxs )
   Dim nRVal : nRVal = 0
   Dim nDim
   For nDim = 0 To aMeta( 1 )
       nRVal = nRVal + aIdxs( nDim ) * aMeta( 4 )( nDim )
   Next
   getFlatIdx = nRVal
 End Function
 
 Function getMDIdxs( aMeta, nFlatIdx )
   ReDim aRVal( aMeta( 1 ) )
   Dim nDim
   For nDim = 0 To aMeta( 1 )
       aRVal( nDim ) = (nFlatIdx \ aMeta( 4 )( nDim )) Mod aMeta( 3 )( nDim )
   Next
   getMDIdxs = aRVal
 End Function
 

 justCalc02 - just calc idx for arrays (02)
 -------------------------------------------------------------------
 { [   0   1   2   3 ][   4   5   6   7 ][   8   9  10  11 ] }
 { [  12  13  14  15 ][  16  17  18  19 ][  20  21  22  23 ] }
 # elms: 24 => 24
 last val: 23 => 23
 aTest( 0, 1, 2 ): 6 => 6
 nDims 3
 nDimsUB 2
 UBounds 1 2 3
 Sizes 2 3 4
 Divs 12 4 1
 0 0 0 => 0 == 0 >> 0 0 0
 0 0 1 => 1 == 1 >> 0 0 1
 0 0 2 => 2 == 2 >> 0 0 2
 0 0 3 => 3 == 3 >> 0 0 3
 0 1 0 => 4 == 4 >> 0 1 0
 0 1 1 => 5 == 5 >> 0 1 1
 0 1 2 => 6 == 6 >> 0 1 2
 0 1 3 => 7 == 7 >> 0 1 3
 0 2 0 => 8 == 8 >> 0 2 0
 0 2 1 => 9 == 9 >> 0 2 1
 0 2 2 => 10 == 10 >> 0 2 2
 0 2 3 => 11 == 11 >> 0 2 3
 1 0 0 => 12 == 12 >> 1 0 0
 1 0 1 => 13 == 13 >> 1 0 1
 1 0 2 => 14 == 14 >> 1 0 2
 1 0 3 => 15 == 15 >> 1 0 3
 1 1 0 => 16 == 16 >> 1 1 0
 1 1 1 => 17 == 17 >> 1 1 1
 1 1 2 => 18 == 18 >> 1 1 2
 1 1 3 => 19 == 19 >> 1 1 3
 1 2 0 => 20 == 20 >> 1 2 0
 1 2 1 => 21 == 21 >> 1 2 1
 1 2 2 => 22 == 22 >> 1 2 2
 1 2 3 => 23 == 23 >> 1 2 3
 ===================================================================
 xpldata.vbs: Erfolgreich beendet. (0) [ 0,00000 secs ]
 

That's a lot more code than I expected, but I do enjoy the verbose output.
The following is the solution to my previous post:

Sub SetPixel(x,y,c)
Dim P : P = x * 4 + y * dw
screen(P) = c("Red")
screen(P +1) = c("Green")
screen(P + 2) = c("Blue")
screen(P + 3) = c("Alpha")
End Sub

where the following applies:
x = horizontal pixel position you are looking for
y = vertical position
dw = the number of pixels per row. (the width)

the number 4 is used to offset to the beginning of the color value. Adjusting that will let you manipulate arrays of different color adjustments. (for example, instead of RGBA color, it could just be RGB by setting the number to 3)

@ehvbs:
you never told me what IDE you used to for your VBS. I'm truly curious to how you cope with the language verbosity.

Hi TNO,

I use Ultraedit, Komodo, or Crimson (depending on availability); but the
formatting could be done with any editor that is able to insert blanks.

Regards

ehvbs

is this
 
Dim Screen(dh,dw,3)
r=Screen(x,y,0)
g=Screen(x,y,1)
b=Screen(x,y,2)
a=Screen(x,y,3)
 
realy slower than this

Dim Screen(dh*dw*4)
'your formula
 
?

When you are talking about very extreme performance tuning, you need to take into account things you usually wouldnt think of. Every property and array lookup takes time, by reducing those lookups you can pull out a few milliseconds here and there. In the case of graphics/game programming milliseconds really count. Of course in this particular example I wasn't using VBScript, but JavaScript + HTML Canvas, but the same underlying tricks apply. Now that JavaScript is JIT compiled by every browser except Internet Explorer, quite a number of graphical applications can be performed that weren't possible before due to bad implementations.

As a more direct answer to your question, lets compare:

screen(x)(y)(c + 1) = green

If I want to update the color green for example to a new value, I told VBScript to perform 3 searches,1 addition operation and 1 assignment operation.

In my solution:

screen(P +1)  = green

The extra lookups have been removed so that I only told VBScript to perform 1 search, 1 addition operation and 1 assignment.

Ok, but you gave as an example working on a 5000x5000 pixels picture, each pixels contaiing 4 color informations. That makes a total of 100,000,000 numbers(5000*5000*4).
On a single dimensional array, the single search would have to be made throughout one hundred million cells.
Whilst on the tridimensional array it would take 2 searches on 5000 cells each, and a third on only 4.
The maximum of negative checks on a tridimensional array is 10,004 versus 100 million on a unidimensional array.
 
I don't know how the computer is looking into the arrays, but if it has to count from 0 to 100 million to find the pixel on top right of the picture (or to 50 million on avarage), IMO it may be faster to look 3 times through much smaller arrays.

Hi Fredledingue,

the nice feature of arrays (in contrast to (linked) lists) is that they have O(1)/random access - the
size of the array doesn't matter. There is no searching at all.

Hi TNO,

but that does not mean, that a( 1 ) is faster than a( 1, 1, 1 ). At least my (interpretation
of my) test code:

   Const cnCnt = 5000000
   Dim aUBs : aUBs = Array(      _
          Array(   10,   10, 5 ) _
        , Array(  100,  100, 5 ) _
        , Array( 1000, 1000, 5 ) _
                          )
   Dim aUB
   For Each aUB In aUBs
       Dim nElms : nElms = aUB( 0 ) * aUB( 1 ) * aUB( 2 )
       WScript.Echo "Size:", Join( aUB, " " ), " ", nElms
       ReDim aData3( aUB( 0 ),  aUB( 1 ),  aUB( 2 ) )
       aData3( aUB( 0 ),  aUB( 1 ),  aUB( 2 ) ) = nElms
       ReDim aData1( nElms )
       aData1( nElms ) = nElms
 
       Dim nStart
       Dim nCnt
 
       nStart = Timer()
       For nCnt = 1 To cnCnt
           If aData3( aUB( 0 ),  aUB( 1 ),  aUB( 2 ) ) <> nElms Then
              WScript.Echo "aData3 - Bingo!"
              WScript.Quit 1
           End If
       Next
       WScript.Echo cnCnt, "aData3 reads", Timer() - nStart
 
       For nCnt = 1 To cnCnt
           If aData1( nElms ) <> nElms Then
              WScript.Echo "aData1 - Bingo!"
              WScript.Quit 1
           End If
       Next
       WScript.Echo cnCnt, "aData1 reads", Timer() - nStart
 
   Next
 

output:

 VBScript 5.6.6626 * cscript 5.6 * WIN 2K * W2K * eh * 17.06.2009 11:01:07
 ===============================================================================
 testArrAccess - test/time array access
 -------------------------------------------------------------------------------
 Size: 10 10 5   500
 5000000 aData3 reads 5,3125
 5000000 aData1 reads 8,203125
 Size: 100 100 5   50000
 5000000 aData3 reads 5,3125
 5000000 aData1 reads 8,3125
 Size: 1000 1000 5   5000000
 5000000 aData3 reads 5,28125
 5000000 aData1 reads 8,25
 ===============================================================================
 xpldata.vbs: Erfolgreich beendet. (0) [ 25,87500 secs ]
 

indicates, that some magic of implementation makes more-dimensional array access faster.

Regards

ehvbs

Hi ehvbs,
How does that translate materialy? That a given array number leads directly to a memory location?
At some point there should a process to translate the array number into a memory address. With multidimensional array there is perhaps a "mapping" of the memory which make it slightly faster.

Implementation magic is indeed key for many interpreters/compilers but in my experience with C++/C# and modern JavaScript (not JScript), the numbers do paint a different picture.
Ultimately the point is that you're cutting out the middle man of Getter/Setter checks and normal desugaring that occurs in this process.

A few references I came across on some of the implementation details:

http://www.gamedev.net/community/forums/topic.asp?topic_id=412199
http://webster.cs.ucr.edu/AoA/Windows/HTML/Arraysa2.html
http://social.msdn.microsoft.com/Forums/en-US/vbgeneral/thread/8105b864-ec8a-4f81-a239-21365f225797

I'm surprised that documentation on this is so scarce

You'll have to do the "same" calculations to determine the offset in the 1D array based on your 2 coordinates as the compiler would - however the compiler will likely optimized it's own offset calculations because it knows the meaning behind them. Your offset calculations however will go through a generic optimizer - the compiler might generate the same assembly code for both, but if there is a difference you can bet it's the compiler 2D array code that will run faster.

http://www.gamedev.net/community/forums/topic.asp?topic_id=412199
 
So, sort of it's equal.

ORIGINAL: Fredledingue

You'll have to do the "same" calculations to determine the offset in the 1D array based on your 2 coordinates as the compiler would - however the compiler will likely optimized it's own offset calculations because it knows the meaning behind them. Your offset calculations however will go through a generic optimizer - the compiler might generate the same assembly code for both, but if there is a difference you can bet it's the compiler 2D array code that will run faster.

http://www.gamedev.net/community/forums/topic.asp?topic_id=412199

So, sort of it's equal.

It very much depends on the context of the calculation. Are there getters/setters involved? How many variable references are you using in this lookup? How far do you have to go up that lookup chain? Are they late bound types?

So yes, obviously before you go and convert all your arrays into flat 1 Dimensional lookups, play with a reduced test case in your application to see if that trade off will do it. You may indeed get the speed benefits mentioned in the other threads ad in the graphical context I mentioned. The purpose of this post was to show you an alternative method for handling multi-dimensional lookups. With a slightly different algorithm, this could method could be expanded to even deeper dimensions.

Yes it's an interresting topic.
 
But I was wondering last night, why you do need to visualize the pixels in a 2D array? I mean maybe you need it, but perhaps the program doesn't need it.
The fastest would be to directly compute the images as a 1D string, and paint the screen directly by spraying your 1D strng of numbers at it.
The program would not even need that it works on a 2D picture. When painting the screen it would not think of x and y, but by assuming that the first 4 numbers (or the first 12 digits) are the first pixel, that from 5th to 8th it's the second pixel, etc
Thought that would work only when you redraw wntirely the screen. When changing only a part of the screen you could set a starting and an end point.
 

Strings are immutable constants that are handled by value instead of by reference. If I want to change a part of a string, I have to make an entirely new string copy with the updated portion. The memory consumed would be significant. There are of course ways to get around having to use strings by reference, but for the majority of languages this involves trickery with pointers, structs and other logic structures (which generally end up being worse for performance due to all the extra data structures anyway)

Edit: Heres a couple related topics :
http://www.ibm.com/developerworks/java/library/j-ropes/index.html
http://blogs.msdn.com/jscript/archive/2008/03/19/insight-into-string-concatenation-in-jscript.aspx

Sorry, I shouldn't have used the word string. I meant the flow of datas coming from the 1D array.
 
If an object has to be drawn on the screen, its position can be pointed with a x-y coordinate, but its image could then be drawn by a one-line flow (or stream or whatever metaphor) of numbers without any notion, at this point, of 2D. Like the beam of a cathodic tube if you will.