Рисование 2d изометрической сетки изображения

Question

Я пытался представить 2d-массив изображений в виде изометрической сетки в обработке, однако, похоже, я не могу правильно их разместить.

Изображения не помещаются рядом друг с другом (как и в случае с плитами, не касаются), хотя точки x и y, по-видимому, указывают, что они должны быть (по мере того, как декартовы представления работают, и уравнения изометрического преобразования кажутся чтобы быть верным).

Вот что я имею в виду:

Я думаю, что можно обрабатывать мои переводы и ротацию неправильно, но после нескольких часов прибегая к помощи я не могу найти, как.

Мой полный код для этой реализации можно увидеть here. Это полный код обработки и сложный, но более простую версию можно увидеть ниже.

color grass = color(20, 255, 20); //Grass tiles lay within wall tiles. These are usually images, but here they are colours for simplicity 
color wall = color(150, 150, 150); 

void setup() { 
size(600, 600); 
noLoop(); 
} 

void draw() { 
int rectWidth = 30; 
float scale = 2; //Used to grow the shapes larger 
float gap = rectWidth * scale; //The gap between each "tile", to allow tile s to fit next to each other 
int rows = 4, cols = 4; //How many rows and columns there are in the grid 

translate(300, 200); 

for (int row = 0; row < rows; row++) { 
    for (int col = 0; col < cols; col++) { 
    /* x and y calculations */ 
    float cartesianX = col * gap; //The standard cartesian x and y points. These place the tiles next to each other on the cartesian plane 
    float cartesianY = row * gap; 

    float isometricX = (cartesianX - cartesianY); //The isometric x and y points. The equations calculate it from the cartesian ones 
    float isometricY = (cartesianX + cartesianY)/2; 

    /* transformations and placement */ 
    pushMatrix(); //Pushes the transform and rotate matrix onto a stack, allowing it to be reset after each loop 

    translate(isometricX, isometricY); //Translate to the point that the tile needs to be placed. 
    scale(scale, scale/2); //Scale the tile, making it twice as wide as it is high 
    rotate(radians(45)); //Rotate the tile into place 

    //Work out what colour to set the box to 
    if (row == 0 || col == 0 || row == rows -1 || col == cols - 1) fill(wall); 
    else fill(grass); 

    rect(0, 0, rectWidth, rectWidth); 

    popMatrix(); 
    } 
} 
} 

Answer 1

Давайте посмотрим поближе на то, как вы используете два значения:

int rectWidth = 30; 

Это размер прямоугольников. Имеет смысл.

float gap = rectWidth * scale; 

Это расстояние между левыми сторонами прямоугольника. Другими словами, вы используете их для размещения прямоугольников. Когда это больше размера прямоугольников, у вас будет пространство между прямоугольниками. И так как вы умножаете rectWidth на scale (это 2), это будет больше, чем rectWidth.

Другими словами, если вы сделаете ваш gaprectWidth равно, вы не получаете никаких пробелов:

float gap = rectWidth; 

Конечно, это означает, что вы можете, вероятно, избавиться от вашей gap переменная целиком, но она может пригодиться, если вы хотите разместить прямоугольники, чтобы сделать их границы толще или что-то еще.