polygen

A versatile library for generating equilateral polygons and stars.

Live Demo

Visit Polygen Playground to try it online.

Installation

npm install poly-generator

Usage

Polygen provides two ways to use: utility functions and the Polygon class.

Method 1: Using Utility Functions

Suitable for simple drawing scenarios, directly generate paths and draw:

import polygen from 'poly-generator';

// Generate paths
const paths = polygen.generate({
  npoints: 5,      // Number of points
  radius: 100,     // Radius
  cornerRadius: 0, // Corner radius
  rotation: 0      // Rotation angle
});

// Draw on Canvas
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

polygen.draw(paths, ctx, {
  strokeWidth: 2,
  fill: '#FFFFFF',
  stroke: '#000000'
});

You can also use it step by step:

// 1. Generate vertices
const vertices = polygen.generateVertices({
  npoints: 6,
  radius: 100,
  rotation: 30
});

// 2. Generate paths from vertices
const paths = polygen.generatePathsFromVertices(vertices, 10); // With corner radius 10

// 3. Draw
polygen.draw(paths, ctx, {
  fill: '#FFD056',
  stroke: '#6E66FF'
});

Method 2: Using Polygon Class

Suitable for scenarios where you need to maintain polygon state:

import { Polygon } from 'poly-generator';

const polygon = new Polygon({
  npoints: 6,
  radius: 100,
  cornerRadius: 10,
  rotation: 30
});

// Access polygon properties
console.log(polygon.points);  // Get vertices
console.log(polygon.paths);   // Get path segments

// Draw with custom styles
polygon.draw(ctx, {
  fill: '#FFD056',
  stroke: '#6E66FF',
  strokeWidth: 2
});

Generating Stars

Both methods support generating stars by adding the innerRadius parameter:

// Using utility function
const starPaths = polygen.generate({
  npoints: 5,        // Number of points
  radius: 100,       // Outer radius
  innerRadius: 50,   // Inner radius
  cornerRadius: 0,   // Corner radius
  rotation: 0        // Rotation angle
});

// Or using Polygon class
const star = new Polygon({
  npoints: 5,
  radius: 100,
  innerRadius: 50,
  cornerRadius: 10
});

API Documentation

PolygonConfig Options

| Parameter | Type | Default | Description | |-----------|------|---------|-------------| | npoints | number | - | Number of vertices | | radius | number | - | Outer radius | | innerRadius | number | - | Inner radius (for stars only) | | cornerRadius | number | 0 | Corner radius | | rotation | number | 0 | Rotation angle (0-360) | | x | number | 0 | Center x coordinate | | y | number | 0 | Center y coordinate |

Drawing Style Options

| Parameter | Type | Default | Description | |-----------|------|---------|-------------| | fill | string | 'white' | Fill color | | stroke | string | 'black' | Stroke color | | strokeWidth | number | 2 | Stroke width | | lineDash | number[] | [] | Line dash pattern | | shadowColor | string | 'transparent' | Shadow color | | shadowBlur | number | 0 | Shadow blur | | shadowOffsetX | number | 0 | Shadow X offset | | shadowOffsetY | number | 0 | Shadow Y offset |

License

MIT