❀N00b's Programming Machine

    @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

    7

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    11.7 kB

    Total Files

    4

    Last publish

    Collaborators

    • alexpage