usePolygon

Composable for working with regular and irregular polygons. It is also aliased with preset parameters for all other regular polygon composables such as useSquare, usePentagon, useHexagon, etc.

Configuration

The usePolygon function accepts a single configuration object as an argument. There are two types of polygon configurations:

1. Regular polygon

Property	Default	Description
sides	4	The number of sides.
sideLength	100	The length of each side (optional).
size	0	Fit the shape to a circumscribed circle of a given diameter (optional).

TIP

When defining any regular polygon, you can specify either sideLength or size. If you define both, size will take precedence, and is defined as the diameter of the circumscribed circle around the polygon.

2. Irregular polygon

Property	Default	Description
vertices	[]	An array of three or more vertices. Will self-close (no need to repeat the first vertex)

extends Primitive Configuration

The following configuration parameters are applicable to all primitive shapes.

Property	Default	Description
position	{ x: 0, y: 0 }	A 2D vector representing the position of the primitive.
rotation	0	The rotation of the primitive (in degrees).
scale	1	The scale factor of the primitive.

Usage

import {usePolygon} from 'vuexyz'

const sides = ref(5)
const sideLength = ref(100)
const position = ref({x: 0, y: 0})
const {vertices, edges, faces} = usePolygon({sides, sideLength, position})

Returns

All primitive shapes return the following reactive members:

Property	Type Declaration	Description
vertices	ComputedRef<Vertex[]>	An array of all vertices.
edges	ComputedRef<Edge[]>	An array of all edges.
faces	ComputedRef<Face[]>	An array of all faces.
centroid	ComputedRef<Vertex[]>	The centroid (geometric center) of all vertices.
boundingBox	ComputedRef<BoundingBox>	The bounding box of the primitive, with properties x, y, width, height, maxX and maxY
svgPath	ComputedRef<string>	An SVG path representing the shape of the primitive.
drawToCanvas	(ctx: CanvasRenderingContext2D) => void	A method that draws the primitive to a canvas context.
threeShape	ComputedRef<THREE.Shape>	A THREE.Shape object representing the primitive's 2D face. Only applicable with closed shapes.
threeCurvePath	ComputedRef<THREE.CurvePath>	A THREE.CurvePath object representing the primitive's 2D edges. Can be used in three and tres.