Home▸Generative Art & Algorithmic Patterns▸Superformula 3D

🌸 Superformula 3D

Generate stunning 3D supershapes from Johan Gielis's superformula. Tweak eight parameters live to morph flowers, stars, crowns and organic forms.

Generative Art & Algorithmic Patterns3DModerate60 FPS

About this simulation

This scene is built from Johan Gielis's superformula, r(φ) = (|cos(mφ/4)/a|^n2 + |sin(mφ/4)/b|^n3)^(−1/n1), evaluated twice per vertex — once along longitude (r1: m1, n11, n21, n31) and once along latitude (r2: m2, n12, n22, n32) — then combined into a single spherical mesh. Because the two radii are independent, one formula can sculpt spheres, stars, crowns, flowers and organic blobs just by nudging eight numbers.

🔬 What it shows

A live Three.js BufferGeometry rebuilt every time a slider moves. Each of the two superformula channels controls a different "direction" of the shape, so symmetry order (m) and roundness (n1/n2/n3) can be tuned separately for the equator and the poles.

🎮 How to use

Pick a preset from the dropdown (Sphere, Star, Twisted Donut, Crown, Pillow, Diamond, Flower, Mushroom) or drag the r1/r2 sliders (m, n1, n2, n3) yourself. Tessellation controls mesh density, the color swatch and Matte/Metallic/Wireframe buttons change the material, Auto-rotate spins the model, and Save PNG exports the current view.

💡 Did you know?

The superformula was published by Johan Gielis in 2003 as a generalisation of the superellipse, and the same equation can trace shapes found in diatoms, flowers, starfish and even bamboo cross-sections just by changing m and the three n exponents.

Frequently asked questions

What is the superformula?

It is a single equation, r(φ) = (|cos(mφ/4)/a|^n2 + |sin(mφ/4)/b|^n3)^(−1/n1), created by botanist-engineer Johan Gielis. Depending on the parameters it can trace circles, polygons, stars and countless natural shapes.

What do m1/m2 control?

m sets the rotational symmetry — how many "lobes" or points appear around the shape. m1 governs the longitude direction (r1) and m2 the latitude direction (r2), so a Star preset uses m1=m2=5 for five-fold symmetry.

What do n1, n2 and n3 do?

They control how sharp or rounded each lobe is. Small n1 values with large n2/n3 produce spiky, star-like points (as in the default Star preset), while n1=n2=n3=1 gives a plain sphere.

Why are there two separate parameter groups?

The mesh is a product of two superformula curves: r1 sweeps around the equator (longitude φ) and r2 sweeps from pole to pole (latitude θ). Using different m/n values for each lets you combine, say, a spiky equator with a smooth pole-to-pole profile, which is how presets like Crown and Mushroom get their asymmetric look.

What does the Tessellation slider affect?

It sets the grid resolution (from 50 to 300 divisions) used to sample the superformula, which directly changes the vertex and triangle counts shown in Stats. Higher tessellation gives smoother surfaces but costs more GPU work per frame.

⚙ Under the hood

Gielis's superformula r(φ) modulates a sphere along two axes to produce stars, flowers, twisted donuts and crystals. Live BufferGeometry rebuilds as you slide eight parameters.

Three.jsBufferGeometrySuperformulaProceduralParametric

3D · Three.js / WebGL renderer · 60 FPS target · runs fully client-side, no install