https://github.com/harrystevens/swoopy
Draw swoopy lines.
https://github.com/harrystevens/swoopy
Last synced: 18 days ago
JSON representation
Draw swoopy lines.
- Host: GitHub
- URL: https://github.com/harrystevens/swoopy
- Owner: HarryStevens
- License: mit
- Created: 2020-01-17T23:51:59.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-09-23T23:18:36.000Z (8 months ago)
- Last Synced: 2025-04-19T08:16:04.255Z (about 1 month ago)
- Language: JavaScript
- Size: 407 KB
- Stars: 7
- Watchers: 2
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# swoopy
Draw swoopy lines from one point to another. See it in action [here](https://observablehq.com/@harrystevens/hello-swoopy).
## Installation
### Web browser
In vanilla, a `swoopy` global is exported. You can use the latest version from unpkg.
```html
```
If you'd rather host it yourself, download the latest release from the [`build` directory](https://github.com/HarryStevens/swoopy/tree/master/build).
### npm
```bash
npm i swoopy -S
```
```js
const swoopy = require("swoopy");
```
## API
# swoopy.arc(a, b[, offset[, precision]]) · [Source](https://github.com/HarryStevens/swoopy/blob/master/src/arc.js "Source")
Returns an array of points representing a circular arc running between point a and point b, both of which must be passed as an array of two numbers representing the x- and y-coordinates of the points. You may pass an optional offset representing how round you want your arc to be. If an offset is not specified, it defaults to 1, which will return the points of a semicircle. An offset of 0 returns the points of a straight line segment. You may pass an optional precision representing how precisely to interpolate between the two points. A lower precision corresponds to more points interpolated along the curve. If a precision is not specified, it defaults to 0.1.
```js
const arc = swoopy.arc([0, 0], [10, 0]); // Returns the points of a semicircle between <0, 0> and <10, 0>.
```
# swoopy.cat(a, b[, offset[, precision]]) · [Source](https://github.com/HarryStevens/swoopy/blob/master/src/cat.js "Source")
Returns an array of points representing the [catenary curve](https://en.wikipedia.org/wiki/Catenary) running between point a and point b, both of which must be passed as an array of two numbers representing the x- and y-coordinates of the points. You may pass an optional offset representing how far perpendicularly from the midpoint of a and b to translate the control point of the Bézier curve. If an offset is not specified, it defaults to 0.5, or one-quarter the distance between a and b. You may pass an optional precision representing how precisely to interpolate between the two points. A lower precision corresponds to more points interpolated along the curve. If a precision is not specified, it defaults to 0.1.
```js
const cat = swoopy.cat([0, 0], [10, 0]); // Returns the points of a catenary curve between <0, 0> and <10, 0>, with an offset that is one-quarter the distance between <0, 0> and <10, 0>.
```
# swoopy.cubic(a, b[, offset[, precision]]) · [Source](https://github.com/HarryStevens/swoopy/blob/master/src/cubic.js "Source")
Returns an array of points representing the cubic Bézier curve running between point a and point b, both of which must be passed as an array of two numbers representing the x- and y-coordinates of the points. You may pass an optional offset representing how far perpendicularly from the midpoint of a and b to translate the control points of the Bézier curve. If an offset is not specified, it defaults to 0.5, or one-quarter the distance between a and b. You may pass an optional precision representing how precisely to interpolate between the two points. A lower precision corresponds to more points interpolated along the curve. If a precision is not specified, it defaults to 0.1.
```js
const cubic = swoopy.cubic([0, 0], [10, 0]); // Returns the points of a cubic Bézier curve between <0, 0> and <10, 0>, with offsets that are one-quarter the distance between <0, 0> and <10, 0>.
```
# swoopy.quad(a, b[, offset[, precision]]) · [Source](https://github.com/HarryStevens/swoopy/blob/master/src/quad.js "Source")
Returns an array of points representing the quadratic Bézier curve running between point a and point b, both of which must be passed as an array of two numbers representing the x- and y-coordinates of the points. You may pass an optional offset representing how far perpendicularly from the midpoint of a and b to translate the control point of the Bézier curve. If an offset is not specified, it defaults to 0.5, or one-quarter the distance between a and b. You may pass an optional precision representing how precisely to interpolate between the two points. A lower precision corresponds to more points interpolated along the curve. If a precision is not specified, it defaults to 0.1.
```js
const quad = swoopy.quad([0, 0], [10, 0]); // Returns the points of a quadratic Bézier curve between <0, 0> and <10, 0>, with an offset that is one-quarter the distance between <0, 0> and <10, 0>.
```