# useBezierCurve

Composable for working with Bézier curves.

## Configuration

The `useBezierCurve`

function accepts a single configuration object as an argument, where each property has a default value if not provided.

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

`start` | `{x: 0, y: 0, z: 0}` | A vertex representing the starting point of the curve. |

`c1` | `{x: 0, y: 0, z: 0}` | A vertex representing the first control point. |

`c2` | `{x: 0, y: 0, z: 0}` | A vertex representing the second control point. |

`end` | `{x: 0, y: 0, z: 0}` | A vertex representing the ending point of the curve. |

`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 {useBezierCurve} from 'vuexyz'
const start: Ref<Vertex> = ref({ x: -100, y: -100 })
const c1: Ref<Vertex> = ref({ x: -250, y: 0 })
const c2: Ref<Vertex> = ref({ x: 250, y: 0 })
const end: Ref<Vertex> = ref({ x: 100, y: 100 })
const {vertices, edges, faces} = useBezierCurve({start, c1, c2, end})
```

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