Rounded cell painter

from Red Blob Games
21 Jun 2018, then 14 July 2019

I was intrigued by this question on stackoverflow[1] about creating blobby-looking regions based on points. I thought it might work well with the cellular structure I’ve been playing with[2]. (I’m actually working on a tutorial on this topic right now, so this question was right up my alley.) These cells are related to Voronoi, but look much rounder. Voronoi uses the circumcenter of the Delaunay triangles. These cells use the centroid instead.

Click and drag to change the color of a region. (Mouse tracking isn’t exact for this demo, sorry)

For the curves, the idea is to draw the polygons from midpoint to midpoint. Then focus on the polygon vertices, where three regions meet. We’re drawing one wedge from the polygon on the left (marked with ):


Compare the owners of the neighboring two regions with the current region (owned by A):

I think this curve drawing logic is a little more convoluted than it should be, and I haven’t tested all the cases. I’m not sure what the best thing to do is when there are three different owners meeting at a point. I used a different rule for the demo at the top of the page — I leave a curved gap. On this project I made the curved borders thick enough that they covered the gap. Oskar Stalberg (Bad North) recommends focusing the logic on the triangles formed around each vertex. That triangle can be owned by one of the three neighboring polygons. Also see Chaikin Curves[3].

Source is in rounded-cell-painter.js but it’s relying on my dual mesh library to calculate the cells, so it’s probably not directly useful.

Email me at , or tweet to @redblobgames, or post a public comment: