# useSquare

Composable for working with squares.

## Configuration

Property | Default | Description |
---|---|---|

`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.

`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

ts

```
import { useSquare } from 'vuexyz'
const sideLength = ref(50)
const position = ref({ x: 0, y: 0 })
const { vertices, edges, faces } = useSquare({ 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` . |