How to make a grid of rhombuses?

Question

Mathematics

I have a task to make just such a grid


, it needs to be done using js canvas. And also each cell of the grid should be a separate rhombus (that is, I have to know x and y of each rhombus in the grid)

I can’t think of a way to create
it, I also wanted to say that I have a canvas center with coordinates 0, 0 and I need to place around them cells (for example, there may be coordinates 0, -50 or 100, 50)

I would be grateful for any answer!

Answer 1

To draw a separate rhombus, it will help to mentally draw the diagonals of the rhombus: such a stretched plus. The center of the plus is the center of the rhombus.
Let these xbe ythe "radii" of the rhombus. There are coordinates of the center (cx, cy), or, more conveniently, (0, 0)the coordinates of the vertices of the rhombus are clear: (-x, 0), (0, -y), (x, 0), (0, y)(clockwise).
Neighboring rhombus on the right: (0 + 2x, 0)(center).
Rhombus down right: (0 + x, 0 + y).
When drawing on canvas, it is convenient to remember the state in order to translate the coordinates later, making the center (0, 0) the center of the next rhombus. Draw a diamond, and then restore the state of the canvas coordinates from the saved one.