Rounded cell painter

from Red Blob Games
21 Jun 2018

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:

  1. If all three regions have the same owner, we use two straight lines.
  2. If there are two or three different owners, we use a quadratic bezier from midpoint to midpoint, using the polygon’s corner as the control point. This forms the convex curve.
  3. If both neighbors have the same owner, we use that same quadratic bezier to fill in the gap left by step 2, but in the other neighbor’s color. This forms the concave curve.

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. (See this for a slightly different approach.) Yet another approach: Oskar Stalberg (Bad North Game) recommends focusing the logic on the triangles formed around each vertex. That triangle can be owned by one of the three neighboring polygons.

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: