‚̧Necrotizing Pineapple Music
Have ideas to improve npm?Join in the discussion! ¬Ľ

@harmonograph/svg

0.2.0¬†‚Äʬ†Public¬†‚Äʬ†Published

@harmonograph/svg

ūüĎ©‚Äćūüé® Draw and animate a harmonograph in SVG

Install

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

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:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 700"><rect fill="#444" width="100%" height="100%"></rect><path stroke="#000" stroke-width="1" fill="none" d="M 679.068 646.723 C 646.36 628.881, 417.218 495.899, 249.676 392.849 S -28.969 212.083, 9.448 201.383 229.928 241.52, 402.486 287.403 712.231 363.501, 699.031 350.759 524.344 287.226, 350.469 262.826 16.412 251.089, 4.27 315.364 129.74 490.425, 301.232 560.133 652.343 645.958, 689.393 576.041 615.481 354.027, 450.006 221.669 89.434 -8.64, 28.434 0.66 49.576 125.994, 205.543 266.677 567.831 557.749, 651.306 617.899 683.011 644.863, 539.811 559.696 183.558 350.442, 79.541 279.709 -3.948 196.458, 123.519 225.983 466.178 316.111, 588.361 340.053 721.459 346.467, 612.334 310.892 290.483 232.23, 152.891 243.93 -26.608 327.129, 62 417.687 356.315 606.371, 506.257 624.646 727.936 574.222, 661.594 451.855 400.89 165.032, 241.915 75.065 -16.861 -19.959, 25.981 64.799 247.753 314.759, 412.286 443.909 702.305 653.591, 683.688 641.708 505.273 531.422, 338.765 432.805 23.99 247.771, 18.19 225.929 149.785 243.301"></path></svg>

Create randomised harmonograph SVG

To create a randomised harmonograph, do not add the pendulums.

const generateHarmonographSVG = require('@harmonograph/svg');
 
const harmonograph = generateHarmonographSVG({
  size: 700,
  strokeWidth: 1,
  strokeColor: '#000',
  pendulumTime: 150,
});

Animate the path of the harmonograph SVG

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

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

Install

npm i @harmonograph/svg

DownloadsWeekly Downloads

8

Version

0.2.0

License

MIT

Unpacked Size

11.7 kB

Total Files

4

Last publish

Collaborators

  • avatar