Solution to the 12th problem

Small device detected! While I've tried to make an effort to make the visualization of this problem as responsive as possible, I stronhly recommend viewing this visualization in larger screens, or in horizontal mode!

This visualization is not adapted to small devices and the output may not be correctly visualized. The recommended minimum width for this visualization is 1024px.

This problem is solved using a flood fill algorithm. The algorithm works by starting at a given point and then checking all the points around it and checking if they are part of the same group. If they are, then they are added to the group and the algorithm continues. If they are not, then they are added to a new group and the algorithm continues. This process continues until all the points are checked and added to a group.

Canvas Version: This version uses the Canvas API for improved rendering performance compared to the DOM-based approach.

Code for this solution: d12.rs
Problem statement

Visualization

Cost: 0