Расставить ромбики в нужных координатах, ориентируясь на виртуальные координаты?

Question

[GineTik]

У меня есть коллекция ромбов которые имеют координаты вида {x: 0, y: 0} или {x: 3, y: -2} и так далее.

Размеры(диагонали) ромба 130 на 84.

вот пример чего я хочу

(ромбы должны прилегать друг к другу я нарисовал так для удобства)

пытался несколько дней но никак не получалось
буду благодарен за любой ответ!

Answer 1

[Александр]

Это называется изометрия. Можете посмотреть эти видео:

• Isometric - часть 1
  
• Isometric - часть 2
  

Answer 2

[Wataru]

Координаты центра ромба {x,y} - {130/2*(x-y), 84/2*(x+y)}

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

Далее надо найти координаты нескольких прямых и можно вывести формулу.

Второй вариант - через геометрию векторов (это линейная алгебра, или еще нет - как это в школе-то называется вообще?). Нарисуйте вектор из ромба {0,0} в ромбы {1,0} и {0,1}. Ясно, что ромб с координатами {x,y} можно получить сложив x раз первый вектор и y раз второй. Подставляя координаты получите ту же формулу.

Answer 3

[Сергей Соколов]

Можно трансформировать canvas: сжать по вертикали и повернуть на 45°. Теперь, если рисовать квадраты — получатся ромбики!

Только Y-координата идёт сверху вниз – тут уж сами разберётесь. Наклоните голову влево, чтобы сориентироваться )


А тут можно перемещаться стрелочками и A-S-D-W. Кликните внутри фрейма, чтобы клавиши заработали:

Comments

[Ivan Brezhnev]

красиво и очень хитро)

[Роман]

Ivan Brezhnev, и абсолютно непригодно для вот таких вот тайлов

https://assetstore.unity.com/packages/2d/environme...

[Сергей Соколов]

в вопросе ни намёка на игры и тайлы. Только геометрические фигуры на плоскости.

[Роман]

У меня есть коллекция ромбов ...

Сергей Соколов, ну коллекцию ромбов вашим методом тоже не нарисовать))))

[Сергей Соколов]

Роман, в фиддле с кнопками именно это и происходит: есть коллекция ромбов! : ) И она отрисовывается.

[Ivan Brezhnev]

Роман, какие есть варианты?

[Роман]

Сергей Соколов, вводите в заблуждение))

const rhombus = (x, y, fillStyle, strokeStyle, side = 40) => {
   ctx.save()
   ctx.translate(x * side, y * side);
   ctx.fillStyle = fillStyle || 'white';
   ctx.strokeStyle = strokeStyle || 'grey';
   ctx.fillRect(-side / 2, -side / 2, side, side);
   ctx.strokeRect(-side / 2, -side / 2, side, side);
   ctx.restore();
 }

разве это не квадрат при любом side?

ctx.fillRect(-side / 2, -side / 2, side, side);
ctx.strokeRect(-side / 2, -side / 2, side, side);

я же (как и автор вопроса) говорю про ромб изначально, например такой


Сможете вашим способом умостить этим спрайтом экран так, чтобы они стыковались так как это происходит с квадратами в вашем примере и считайте что лично меня вы убедили (только не стоит растягивать и поворачивать этот ромб трансформацией чтобы превратить его в квадрат))))

[Роман]

Ivan Brezhnev, самый верный вариант дал Wataru в своем ответе