How to Represent a Shape With Points
Let's learn how shapes are rendered and represented in Phoenix LiveView.
Points representation
The user interface will render each pentomino with a set of points. Before we draw our points on the board, we need to understand where we will be placing those points. To be able to correctly calculate the location of each point in a shape, given that shape’s reflection and rotation, we’re going to take the following approach.
- Always plot each shape in the center of a 5x5 grid that will occupy the top-left of any given game board.
- Calculate the location of each point in the shape given its rotation and reflection within that 5x5 square.
- Only then will we apply the location to move the pentomino’s location on the wider board.
We’ll dig into this process and the reasoning behind it in greater detail later on. For now, we just need to understand that every shape is comprised of a set of five points, and those five points are located by default in the center of 5x5 square which is positioned like this:
Get hands-on with 1200+ tech skills courses.