HELIO, a twelve-petal kinetic canopy concept, uses this approach. Its opening angle changes from 10° to 74°. The browser renders the shells, while a separate module projects their profile boundaries into an SVG plan and elevation.

Authorship: GPT-6 Astra generated this article and developed HELIO’s geometry and implementation under human creative direction. The explanations below were checked against the project files and its existing automated tests. This is an account of that implementation, not a claim of human-only authorship.

Cover: an actual render of the interactive model. The separate AI-generated concept illustration is not used as evidence of its geometry.

1. Define the coordinates before the views

The geometry module uses Y as up and virtual metres as its length unit. Each petal begins in local coordinates: s runs along its length, v runs across its tangent direction, and q describes its curved surface and thickness offset.

The angle alpha is measured outward from vertical. A second angle, phi, locates petal i around the central axis. Twelve equally spaced petals therefore have a 30° azimuth step.

The following is an exact excerpt from worldPoint in helio-geometry.mjs. Earlier lines validate the inputs and convert alpha into radians, stored in a:

  const phi = 2 * Math.PI * i / PARAMS.N;
  const sin = Math.sin(a), cos = Math.cos(a);
  const radial = PARAMS.r0 + explode * PARAMS.explodeRadial + s * sin + q * cos;
  const x = radial * Math.cos(phi) - v * Math.sin(phi);
  const y = PARAMS.h + explode * PARAMS.explodeHeight + s * cos - q * sin;
  const z = radial * Math.sin(phi) + v * Math.cos(phi);
  if (![x, y, z].every(Number.isFinite)) throw new RangeError('Transformed coordinates overflow.');
  return [x, y, z];

The sine and cosine terms rotate the length and normal directions around a tangent hinge axis. They do not stretch the petal. The explode terms add a display translation; they are not part of the assembled dimensions.

2. Reuse the boundary, then project it

petalShell samples the profile into a closed mesh with front and back surfaces, side edges, and end caps. The renderer creates a reusable shell from it and positions the twelve copies using the corresponding hinge basis.

The SVG module imports localPoint, worldPoint, and modelMetrics. It samples the same boundary at the same default resolution: 24 lengthwise segments. It also converts boundary coordinates to Float32, matching the mesh data format.

The projections are intentionally simple. Plan uses X and Z; elevation uses X and Y. The vertical SVG coordinate is inverted because screen coordinates increase downward. These are the actual projection functions:

  const plan = p => [planCenter[0] + p[0] * scale, planCenter[1] + p[2] * scale];
  const elevation = p => [elevationCenter + p[0] * scale, ground - p[1] * scale];

This is shared parametric geometry, not a screenshot trace or a guarantee of identical GPU floating-point results. The drawing shows assembled petal shells and omits supports. Its layered outlines are not a full hidden-line removal solution.

3. Measure the vertices you actually generate

A tip formula is tempting, but thickness, curvature, and width can place another vertex farther away. modelMetrics therefore evaluates the generated shell vertices and finds the largest hypot(x, z), plus minimum and maximum Y.

These bounds exclude scenery, the mast, the base, and exploded offsets. At 42°, the checked shell envelope radius is about 7.31 virtual metres and its maximum Y is 8.72. The drawing’s height dimension starts at Y = 0; it is not the shell bounding-box height.

4. Test invariants, then state the limits

The existing tests passed when rerun for this article. They check distances, thickness, and fixed hinge positions at 10°, 42°, and 74°. They also check twelvefold symmetry, finite unit normals, closed shell topology, and bounds that contain every generated shell vertex. Returning the explosion value to zero reproduces the assembled shell data.

These checks catch implementation inconsistencies. They do not establish actuator forces, collision clearance for every component, wind resistance, structural safety, fabrication feasibility, or weather protection.

To explore the relationship, open HELIO’s interactive model, change its angle, and compare the resulting SVG. For another project, keep geometry generation separate from both rendering and document layout, then test the relationships those outputs must preserve.

Discussion: Which invariant would you add to catch a mismatch between an interactive view and its exported drawing?