Cylinder with Elements from Periodic Table

Hi, i’ve been trying around the Periodic Table with three.js three.js css3d - periodic table (threejs.org)

I somehow struggling to create a cylinder with caps. I would like to fill the element tiles into both top and bottom caps of the cylinder. Is there a solution to do it?

Here is the current look of my cylinder with no caps.


It’s very similar to this topic: Form a circular cylinder by elements - #5 by jaelchua
So, I ask the same thing here: is there any reference/explanatory picture of the desired result?

Hi @prisoner849 , i have tried my best illustrate it. :sweat_smile: It should look something like this with bottom and top cap filled with element tiles.

If you write one yourself :slight_smile:
It’s not three.js specific question. It’s more about how to distribute rectangles in a circle, or how to determine which rectangles of a grid are inside of a circle, thus it’s more about Maths.

Having size of a cell, desired distance between cells, and circle’s radius, you can determine, if a cell is inside of the circle, by checking, that distance from the center of the circle to each cell’s corner is less than circle’s radius.