Implementing a self-organizing map, part 3: Helpers for drawing
2025-03-12
While we do have a fully working SOM implemented now, we have no way to observe it in action yet. To remedy that we'll build an application that creates the map, trains it with a ROYGBIV dataset and draws it into a window. We'll save a snapshot of the state of the SOM nodes after initialization and after each training epoch so that we can cycle through the states one by one, which illustrates how the SOM functions quite well in my opinion.
To get started we need to include raylib and raygui.
#define RAYGUI_IMPLEMENTATION
#include <raygui.h>
#include <raylib.h>
#include <raymath.h>
Next we'll need some constants for the window size and the sizes and positions of various elements that will be drawn. The bulk of the window will of course be taken up by the map itself, but we'll also have a sidebar on the left that will display the current training epoch, two buttons to control it and some information on the currently selected node, if any. A node can be selected by hovering over it with the mouse. We'll use Vector2 from raylib since the raylib API supports it well.
constexpr int kWindowWidth = 1920;
constexpr int kWindowHeight = 1080;
constexpr Vector2 kWindowMiddle = Vector2(kWindowWidth / 2, kWindowHeight / 2);
constexpr Vector2 kSidebarPos = Vector2(0, 0);
constexpr Vector2 kSidebarSize = Vector2(kWindowWidth / 5, kWindowHeight);
constexpr float kSidebarRowHeight = 70.0;
constexpr float kSidebarPadding = 20.0;
constexpr Vector2 kHexSize = Vector2(70, 70);
constexpr Vector2 kMapOrigin = Vector2(kWindowMiddle.x + kSidebarSize.x / 2,
kWindowMiddle.y - kHexSize.y / 2);
Now we can get cracking on the main function, which will start by doing some raylib initialization. After that we'll also instantiate some helper objects to manage the drawing of the map grid and the sidebar.
void SetUpRaylibWindow(int window_width, int window_height) {
InitWindow(window_width, window_height, "SOM");
SetTargetFPS(30);
GuiSetStyle(DEFAULT, TEXT_SIZE, 40);
SetTextureFilter(GetFontDefault().texture, ICON_FILTER_POINT);
}
...
int main(void) {
SetUpRaylibWindow(kWindowWidth, kWindowHeight);
HexGridDrawer hex_grid(kMapOrigin, kHexSize);
SidebarDrawer sidebar(kSidebarPos, kSidebarSize);
...
}
Drawing the hex grid
HexGridDrawer is a helper class for managing the drawing of the hexes that make up the map grid. It's instantiated with the origin point around which the hexes should be drawn and the size of a single hex in pixels, and has methods to draw and to highlight a given Hex. A hex will be highlighted with a black border when it's being hovered over with the mouse, at which point the values of the highlighted hex's weight vector will also appear in the sidebar, which allows you to follow how they change over time.
class HexGridDrawer {
private:
Vector2 origin_;
Vector2 size_;
public:
HexGridDrawer(Vector2 origin, Vector2 size) : origin_(origin), size_(size) {}
bool DrawHex(const Hex& hex, Color color) {
auto center = ToPixel(hex);
auto corners = GetCorners(hex);
bool hex_is_selected = false;
for (int i = 0; i < 6; ++i) {
auto corner_a = corners[i];
auto corner_b = corners[(i + 1) % 6];
DrawTriangle(center, corner_b, corner_a, color);
Vector2 mouse_pos = Vector2(GetMouseX(), GetMouseY());
if (!hex_is_selected) {
hex_is_selected =
CheckCollisionPointTriangle(mouse_pos, center, corner_a, corner_b);
}
}
return hex_is_selected;
}
void HighlightHex(const Hex& hex) {
auto corners = GetCorners(hex);
for (int i = 0; i < 6; ++i) {
auto corner_a = corners[i];
auto corner_b = corners[(i + 1) % 6];
DrawLineEx(corner_a, corner_b, 5.0, BLACK);
}
}
...
};
DrawHex() manages it's task by iterating through the six pairs of consecutive corners of the given hex and drawing the triangles that these form with the center. These triangles are also how the method checks if the drawn hex is being hovered over by the mouse. A boolean is returned based on whether any of these checks pass. HighlightHex() just draws a line between each pair of consecutive corners.
Both of these drawing methods use ToPixel() to get the middle pixel of a given hex and GetCorners() to get the six pixels that make up it's corners. I won't go into the details of how these work since we have quite a lot of other stuff to cover still, but you can check this excellent guide on the topic.
class HexGridDrawer {
...
private:
Vector2 ToPixel(const Hex& hex) const {
static std::array<double, 4> f = {3.0 / 2.0, 0.0, std::sqrt(3.0) / 2.0,
std::sqrt(3.0)};
double x = (f[0] * hex.q + f[1] * hex.r) * size_.x + origin_.x;
double y = (f[2] * hex.q + f[3] * hex.r) * size_.y + origin_.y;
return Vector2(x, y);
}
Vector2 CornerOffset(int corner) const {
double angle = 2.0 * std::numbers::pi * corner / 6;
return Vector2(size_.x * std::cos(angle), size_.y * std::sin(angle));
}
std::vector<Vector2> GetCorners(const Hex& hex) const {
std::vector<Vector2> corners;
Vector2 center = ToPixel(hex);
for (int i = 0; i < 6; ++i) {
Vector2 offset = CornerOffset(i);
corners.push_back(Vector2Add(center, offset));
}
return corners;
}
};
Drawing the sidebar
SidebarDrawer takes care of what may be the most exciting part of our little application here: drawing a gray box and some text. As this is GUI code it's of course a lot longer and less tidy than you'd like it to be. The constructor takes the top-left position and the size of the sidebar to be drawn and there's a single public method Draw() to do the actual drawing on each frame.
class SidebarDrawer {
private:
const Vector2 pos_;
const Vector2 size_;
public:
SidebarDrawer(const Vector2& pos, const Vector2& size)
: pos_(Vector2AddValue(pos, kSidebarPadding)),
size_(Vector2SubtractValue(size, 2 * kSidebarPadding)) {}
void Draw(unsigned& epoch, Node* selected_node) {
DrawRectangleV(Vector2SubtractValue(pos_, kSidebarPadding),
Vector2AddValue(size_, 2 * kSidebarPadding), LIGHTGRAY);
int row = 0;
DrawLabel(row++, "Epoch " + std::to_string(epoch));
DrawEpochButtons(row++, epoch);
if (selected_node != nullptr) {
row++;
auto hex = selected_node->hex;
DrawLabel(row++, "Node (" + std::to_string(hex.q) + "," +
std::to_string(hex.r) + ")");
auto weight = selected_node->weight;
DrawLabel(row++, "\tr: " + std::to_string(weight[0]));
DrawLabel(row++, "\tg: " + std::to_string(weight[1]));
DrawLabel(row++, "\tb: " + std::to_string(weight[2]));
}
}
...
};
The code in Draw() speaks for itself: first we draw a rectangle to house the content of the sidebar, after which we display some text for the current epoch number and some buttons to control it. If a node is currently selected, we also display it's grid coordinates (ignoring the s coordinate since it's redundant) and the R, G and B values of it's weight vector. The method employs some private helpers that we'll have a look at next.
class SidebarDrawer {
...
private:
void DrawLabel(int row, std::string&& text) {
Rectangle pos = {pos_.x, pos_.y + row * kSidebarRowHeight, size_.x,
kSidebarRowHeight};
GuiLabel(pos, text.c_str());
}
void DrawEpochButtons(int row, unsigned& value) {
float width = size_.x / 2;
Rectangle prev_pos = {pos_.x, pos_.y + row * kSidebarRowHeight, width,
kSidebarRowHeight};
Rectangle next_pos = {pos_.x + width, pos_.y + row * kSidebarRowHeight,
width, kSidebarRowHeight};
if (GuiButton(prev_pos, "-1")) {
if (value > 0) {
value -= 1;
}
} else if (GuiButton(next_pos, "+1")) {
if (value < Som::kTrainingEpochLimit) {
value += 1;
}
}
}
};
DrawLabel() and DrawEpochButtons() are mostly there to just move the position calculations of these elements out of Draw(). Both methods take a row number for the element to draw which is used to calculate the y-coordinate of the position.
Now we have all the pieces that we need to create our SOM application. Part 4 will continue with the main() function, where we'll instantiate the SOM, train it and draw the results.