Exceptional Diagrams

Process Documentation

The exceptional aspect to these diagrams: human error!

I used Claude AI to help code an HTML program that draws lines between randomly generated colored nodes. I started with the Voronoi diagram, and originally wanted to create a fully working program that would correctly draw the diagram. The coding process went smoothly with creating nodes, drawing concentric circles around them, and drawing perpendicular lines where those circles intersected. After that, it fell apart.

I went back and forth with the AI model for a long time, trying to generate a working algorithm to:

1. generate the correct lines between the correct nodes

2. recognize where these lines intersected

3. cut off the lines in the correct spot when they collide

4. decide which line segments are the correct ones to keep

I decided I could do a better job myself of deciding where to keep the lines than the computer currently could, because I know what 'correct-looking' looks like, while the code does not. So I introduced an eraser tool; all possible boundary lines will now generate and extend to the edges of the screen, and you get to pick and choose which segments to keep for a good Vornoi diagram.

The program technically draws a correct diagram every single time - however, it is up to the user to find what 'looks correct' underneath all of the cluttered lines.

I generated the program for the Delunay triangulation after this was complete, which was a much more efficient process. I decided to keep the number of nodes in both programs set at 5, as this seemed to be just the right level of challenging.

As shown in the images above, this program allows for user error. In the Voronoi diagram, one of the correct boundary lines in the center has been erased, and the two sections are now separated by some wiggly leftover segments. In the Delunay triangulation, there was a correct line between the blue and orange nodes that was erased, and improper triangles are formed from the red-green line.

Try It Yourself!

Click and drag over the lines to erase them and make a Voronoi diagram. Refresh the page for a new set of random nodes.