multidimensional array - Drawing 2d isometric image grid -

i've been trying represent 2d array of images isometric grid in processing, cannot seem placement right.

the images not placed next each other (as in, tiles not touch), though x , y points seem indicate should (as cartesian view works , isometric conversion equations seem correct).

here mean:

i think may treating translations , rotations wrong, after hours of googling cannot find how.

my full code implementation can seen here. full processing code , on complicated, simpler version can seen below.

color grass = color(20, 255, 20);  //grass tiles lay within wall tiles. these images, here colours simplicity color wall = color(150, 150, 150);  void setup() { size(600, 600); noloop(); }  void draw() {  int rectwidth = 30;  float scale = 2;  //used grow shapes larger  float gap = rectwidth * scale;  //the gap between each "tile", allow tile s fit next each other  int rows = 4, cols = 4;  //how many rows , columns there in grid   translate(300, 200);   (int row = 0; row < rows; row++) {   (int col = 0; col < cols; col++) {     /* x , y calculations */     float cartesianx = col * gap;  //the standard cartesian x , y points. these place tiles next each other on cartesian plane     float cartesiany = row * gap;      float isometricx = (cartesianx - cartesiany);  //the isometric x , y points. equations calculate cartesian ones     float isometricy = (cartesianx + cartesiany) / 2;      /* transformations , placement */     pushmatrix();  //pushes transform , rotate matrix onto stack, allowing reset after each loop      translate(isometricx, isometricy);  //translate point tile needs placed.     scale(scale, scale / 2);  //scale tile, making twice wide high     rotate(radians(45));  //rotate tile place      //work out colour set box     if (row == 0 || col == 0 || row == rows -1 || col == cols - 1)  fill(wall);     else fill(grass);      rect(0, 0, rectwidth, rectwidth);      popmatrix();   } } } 

let's closer @ how you're using 2 values:

int rectwidth = 30; 

this size of rectangles. makes sense.

float gap = rectwidth * scale; 

this distance between left sides of rectangle. in other words, you're using these place rectangles. when greater size of rectangles, you'll have space between rectangles. , since you're multiplying rectwidth scale (which 2), it's going greater rectwidth.

in other words, if make gap equal rectwidth, don't spaces:

float gap = rectwidth; 

of course, means can rid of gap variable entirely, might come in handy if want space rectangles out make borders thicker or something.