Regular polygon

Stopped

Read as Markdown

Full-page experience · Open playground

Generate a regular shape with equal sides and angles from a center and exactly one size mode.

Try it

Compare the pentagon, hexagon, and square built from the three size modes.

What to learn

Choose circumradius, inradius, or sideLength as the one defining size.
Rotate a regular polygon without manually calculating its vertices.

Integration boundaries

RegularPolygon accepts exactly one of circumradius, inradius, or sideLength.
rotation is measured in radians from the default upward first vertex.

This is a Pibbl Canvas example. Its mount owns its runtime resources; call its controller’s dispose method when removing it. The preview starts automatically unless reduced motion is enabled; Stop disposes the mount. Preserve the source’s logical canvas size and aspect ratio. Native HTML is not captured by Canvas filters.

RegularPolygon

Complete source

Host setup for this source: use a canvas with width 720 and height 420, compile with jsx: "react-jsx" and jsxImportSource: "@pibbl/core", import its default mount, and call const controller = mount(canvas) after attaching the canvas. Call controller.dispose() before removing it.

regular-polygon.example.tsx

import {
  pibbl,
  Rectangle,
  RegularPolygon,
  type PibblController,
} from "@pibbl/core";

function RegularPolygonStudy() {
  return [
    <Rectangle
      style={{ left: 0, top: 0, width: 720, height: 420, fill: "#f7f0df" }}
    />,
    <RegularPolygon
      style={{
        sides: 5,
        cx: 150,
        cy: 210,
        circumradius: 112,
        fill: "#1f4bd8",
        stroke: "#17211d",
        strokeWidth: 5,
      }}
    />,
    <RegularPolygon
      style={{
        sides: 6,
        cx: 360,
        cy: 210,
        inradius: 96,
        rotation: Math.PI / 6,
        fill: "#f7c948",
        stroke: "#17211d",
        strokeWidth: 5,
      }}
    />,
    <RegularPolygon
      style={{
        sides: 4,
        cx: 570,
        cy: 210,
        sideLength: 138,
        rotation: Math.PI / 4,
        fill: "#74d3ae",
        stroke: "#17211d",
        strokeWidth: 5,
      }}
    />,
  ];
}

export default function mount(canvas: HTMLCanvasElement): PibblController {
  return pibbl(canvas, <RegularPolygonStudy />);
}

Documentation version

Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.