https://github.com/alex-page/harmonograph-svg
👩🎨 Draw and animate a harmonograph in SVG
https://github.com/alex-page/harmonograph-svg
algorithmic-design geometric-algorithms harmonograph javascript lissajous-curve nodejs svg
Last synced: 4 months ago
JSON representation
👩🎨 Draw and animate a harmonograph in SVG
- Host: GitHub
- URL: https://github.com/alex-page/harmonograph-svg
- Owner: alex-page
- License: mit
- Created: 2020-05-02T01:20:17.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2023-07-18T21:58:36.000Z (almost 2 years ago)
- Last Synced: 2024-04-30T23:02:52.148Z (about 1 year ago)
- Topics: algorithmic-design, geometric-algorithms, harmonograph, javascript, lissajous-curve, nodejs, svg
- Language: JavaScript
- Homepage: https://npmjs.com/package/@harmonograph/svg
- Size: 625 KB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @harmonograph/svg
> 👩🎨 Draw and animate a harmonograph in SVG
## Install
```shell
npm install @harmonograph/svg
```
## Get started
The harmonograph is a mechanical apparatus that uses pendulums to create a geometric image. This creates an SVG of a harmonograph.
### Create harmonograph SVG
```js
const generateHarmonographSVG = require('@harmonograph/svg');
const harmonograph = generateHarmonographSVG({
size: 700,
strokeWidth: 1,
strokeColor: '#000',
backgroundColor: '#444',
pendulumTime: 150,
pendulums: [{
amplitude: 200, frequency: 2.985, phase: 2.054, damping: 0.001
},
{
amplitude: 200, frequency: 3.006, phase: 1.820, damping: 0.008
},
{
amplitude: 200, frequency: 3.003, phase: 2.283, damping: 0.001
},
{
amplitude: 200, frequency: 1.994, phase: 1.155, damping: 0.001
}]
});
```
This returns an SVG of a drawn harmonograph:
```html
```
### Create randomised harmonograph SVG
To create a randomised harmonograph, do not add the pendulums.
```js
const generateHarmonographSVG = require('@harmonograph/svg');
const harmonograph = generateHarmonographSVG({
size: 700,
strokeWidth: 1,
strokeColor: '#000',
pendulumTime: 150,
});
```
### Animate the path of the harmonograph SVG
```js
const generateHarmonographSVG = require('@harmonograph/svg');
const harmonograph = generateHarmonographSVG({
size: 700,
strokeWidth: 1,
strokeColor: '#000',
pendulumTime: 150,
animatePath: true
});
```
### Animate the path of the harmonograph SVG with set duration and bezier curve
```js
const generateHarmonographSVG = require('@harmonograph/svg');
const harmonograph = generateHarmonographSVG({
size: 700,
strokeWidth: 1,
strokeColor: '#000',
pendulumTime: 150,
animatePath: {
duration: '10s',
easing: 'ease-in-out'
}
});
```
## Options
| Option | Description | Default value | Type |
| --- | --- | --- | --- |
| size | The size of the svg | `700` | _number_ |
| strokeWidth | The width of the line | `1` | _number_ |
| strokeColor | The color of the line | `#000` | _string_ |
| backgroundColor | The background color of the svg | `transparent` | _string_ |
| pendulumTime | How long the pendulum swings in seconds | `150` | _number_ |
| animatePath | How the path animates | `false` | _object_ or _boolean_ |
| animatePath.duration | The time for the animation to end | `15000ms` | _string_ |
| animatePath.easing | The speed curve of the animation | `linear` | _string_ |
| pendulum | Two pendulums require four items ( x, y and x, y ). Each X and Y value is an object that contains _amplitude_, _frequency_, _phase_, and _damping_ ( see pendulum options below ) | `random values` | _array_ |
## Pendulums object
| Parameter | Description | Default value | Type |
| --- | --- | --- | --- |
| pendulum.amplitude | How far a pendulum swings back and forth, must be from `0` - `360` degrees | `random number` | _number_ |
| pendulum.frequency | How fast a pendulum swings back and forth, for best results use decimal values around `2` and `3` | `random number` | _number_ |
| pendulum.phase | The rate that a pendulum loses its energy, or slows down, must be from `0` to `π` | `random number` | _number_ |
| pendulum.damping | The offset from the normal starting position of a pendulum, must be from `0` to `0.01` | `random number` | _number_ |
## Release History
* v0.2.0 - ✨ Remove `getPathLength` and use pathLength attribute
* v0.1.1 - 🎨 Replace rect fill with background color on svg style
* v0.1.0 - 📏 Add `getPathLength` to return the harmonograph path length
* v0.0.2 - ✋ Stop animation on last frame
* v0.0.1 - 🎨 Background color documentation
* v0.0.0 - 💥 Initial version