Let’s revisit a well-studied tiling — Episode 2.
This time, I’d like to introduce the cut-and-project method, which I used in my previous post.
Some of you might have noticed that when you look at a cube from one of its corners, it appears as a regular hexagon. That’s essentially a projection of a 3D cube onto a 2D plane.
Now, imagine doing the same with higher-dimensional shapes — like a 5D hypercube. Just as a 3D cube has 2³=8 vertices, including (0,0,0) and (1,1,1), a 5D hypercube has 2⁵=32 vertices, including (0,0,0,0,0) and (1,1,1,1,1).
If we extend it to an entire 5D grid, things get crowded quickly. But if we carefully select only the objects that lie close to a certain plane, we can obtain a clean tessellation.
Actually, that’s one way to derive the Penrose tiling — as a 2D projection of a 5D grid!
By the way, if you’re curious to try it yourself, check out the Cut and Project Tiling page (https://gglouser.github.io/cut-and-project-tiling/). It’s an interactive web page powered by their super efficient multigrid method.
Try playing around with the number of axes — you’ll see how versatile the resulting rhombuses are! Their angles are multiples of 180°/n. These rhombuses are quite common in tilings — a widely recognized and celebrated example is the Tokyo 2020 Olympic logo, designed by Asao Tokolo, which features a pattern of rectangles inscribed in rhombuses.
The images here come from 7D and 6D projections, which are natural generalizations of the Penrose tiling. The 6D one, in particular, was designed to match the proportions of the rectangles in the Olympic logo. I’m sharing it here solely for educational purposes — the original concept and design belong entirely to Tokolo.
Hope it sparks your curiosity!
All reactions:
11 comments
23 shares
Like
Comment
Share
関連度の高い順
Gael E Phillips
I loved the logo for the Tokyo Olympics, held later than 2020 due to Covid-19. I spent days trying to work it out. Just wonderful. Thank you for these Miki!
1'%3E%3Cpath d='M15.9963 8c0 4.4179-3.5811 7.9993-7.9986 7.9993-4.4176 0-7.9987-3.5814-7.9987-7.9992 0-4.4179 3.5811-7.9992 7.9987-7.9992 4.4175 0 7.9986 3.5813 7.9986 7.9992Z' fill='url(%23paint0_linear_15251_63610)'/%3E%3Cpath d='M15.9973 7.9992c0 4.4178-3.5811 7.9992-7.9987 7.9992C3.5811 15.9984 0 12.417 0 7.9992S3.5811 0 7.9986 0c4.4176 0 7.9987 3.5814 7.9987 7.9992Z' fill='url(%23paint1_radial_15251_63610)'/%3E%3Cpath d='M7.9996 5.9081c-.3528-.8845-1.1936-1.507-2.1748-1.507-1.4323 0-2.4254 1.328-2.4254 2.6797 0 2.2718 2.3938 4.0094 4.0816 5.1589.3168.2157.7205.2157 1.0373 0 1.6878-1.1495 4.0815-2.8871 4.0815-5.159 0-1.3517-.993-2.6796-2.4254-2.6796-.9811 0-1.822.6225-2.1748 1.507Z' fill='%23fff'/%3E%3C/g%3E%3Cdefs%3E%3CradialGradient id='paint1_radial_15251_63610' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='matrix(0 7.9992 -7.99863 0 7.9986 7.9992)'%3E%3Cstop offset='.5637' stop-color='%23E11731' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23E11731' stop-opacity='.1'/%3E%3C/radialGradient%3E%3ClinearGradient id='paint0_linear_15251_63610' x1='2.3986' y1='2.4007' x2='13.5975' y2='13.5993' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FF74AE'/%3E%3Cstop offset='.5001' stop-color='%23FA2E3E'/%3E%3Cstop offset='1' stop-color='%23FF5758'/%3E%3C/linearGradient%3E%3CclipPath id='clip0_15251_63610'%3E%3Cpath fill='%23fff' d='M-.001.0009h15.9992v15.9984H-.001z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E)
Chris M Thomasson
モデレーター
Very nice. Are you constructing these with an algorithm? Or, by hand like Ghee does?
Stuart Dubois
Aint got a dadgum clue about the math but I need a website that can generate stuff like that for my graphics. It's a bitch doing it manually.
View more comments
3 of 6