Diagnostic Graphics

I'm at a point trying to write the next part of this series on colliding, overlapping, rectangles, where it is not enough to think about numbers.
This is good because it means I'm getting somewhere! It's tedious work, taking a picture and putting it unto a grid.
I needed to define all the memory I used at the beginning. Imagine 25 10*10 grids (indexed 0~99).



This is a really huge image. The intent of this blog post is to file it down. Also, every 10*10 grid is labelled with a row and column, rather than an index 0~24,
in memory I've put it into an int[25][]. I want to try and explain the translucent pink.

Start at the grid 1,1.
P = {0,1,2,3, 10,11,12,13, 20,21,22,23, 30,31,32,33} ~ P is a 4*4 square in the top right corner.
Currently, all of its points are inside 1,1.

P can be moved right by incrementing each of it's points by 1.
{0,1,2,3, 10,11,12,13, 20,21,22,23, 30,31,32,33} --> {1,2,3,4, 11,12,13,14, 21,22,23,24, 31,32,33,34}

This process can be repeated, but then P reaches the edge of 1,1. For brevity, I will just use the top row of P.
{1,2,3,4} ...-> {6,7,8,9} -> {7,8,9,10}
I left off my last post here. 10 reappears on the other side of 1,1 rather than going into 1,2.

To deal with this exception, every element % 10 (the length of the grid, 'b') that equals 0, ie every element that goes beyond the edge, will have b subtracted, so that
although it appears on the other side, it doesn't go down one square.

for ( int i = 0 ; i < P.length ; i++ ) {

if ( P [ i ] % b = = 0) { P [ i ] - = b ; }

}

It's helpful to imagine that there is an equivalent P in all the highlighted pink areas. There's the P in 1,1, but there's a P with equivalent
values in 0,1 , 1,0 , 1,2 , 2,1 , & 2,2.

I feel like I'm not making sense again, and that I need another two pictures.



When P moves, all the mirror images of P move. I really do need to downsize these images.
There's a list of equations to create grids. Imagine a staggered process of drawing a line then filling in a square.

I really feel that I'm not making sense.
The reason that you can have mirror images of P, although it is in 1,1 ~ is because it is only in that square to check collisions.

There aren't any walls to give examples with. Imagine at index 4 in 1,1 there's a wall, such that if P is moved right, the elements that define the 'right side' of P can be checked
to see if at their index there's a wall.

if(siii[P[3]] == 0 && siii[P[7]] == 0 && siii[P[11]] == 0 && siii[P[15]] == 0){return false;} else{return true;}

The pink grids, with the mirror images of P, are arrays called si, sii, siii, siv, sv, and svi (s for stage).
1,1 is siii, where P[0] is. P[0] can be in siii, but there can be elements of P that go into siv, sv, and svi.. P is contained within 1 grid, but the stages are changing to show a movement between those 25 arrays.