{"_id":"@aquestsrl/sine-waves","_rev":"3-b3dc96953263c0ee673d5608792ee80a","name":"@aquestsrl/sine-waves","dist-tags":{"latest":"0.3.0"},"versions":{"0.3.0":{"name":"@aquestsrl/sine-waves","version":"0.3.0","description":"Generate multiple configurable sine waves","homepage":"https://github.com/isuttell/sine-waves","repository":{"type":"git","url":"git+https://github.com/isuttell/sine-waves.git"},"scripts":{"test":"grunt test"},"contributors":[{"name":"Isaac Suttell","email":"isaac@isaacsuttell.com"}],"devDependencies":{"codeclimate-test-reporter":"0.0.4","coveralls":"^2.11.2","grunt-asciify":"^0.2.2","grunt-cli":"~0.1.13","grunt-contrib-concat":"^0.5.0","grunt-contrib-jshint":"~0.10.0","grunt-contrib-uglify":"~0.6.0","grunt-contrib-watch":"^0.6.1","grunt-flow-type-check":"^0.4.1","grunt-jscs":"^1.0.0","grunt-jsvalidate":"^0.2.2","grunt-karma":"~0.9.0","jasmine-core":"^2.1.2","jit-grunt":"^0.9.0","karma":"~0.12.24","karma-chrome-launcher":"^0.1.5","karma-coverage":"~0.2.6","karma-firefox-launcher":"^0.1.3","karma-html-reporter":"^0.2.4","karma-jasmine":"^0.3.0","karma-phantomjs-launcher":"~0.1.4","karma-safari-launcher":"^0.1.1","karma-story-reporter":"~0.2.2"},"bugs":{"url":"https://github.com/isuttell/sine-waves/issues"},"main":"sine-waves.js","directories":{"example":"examples","test":"tests"},"keywords":["canvas","sine","sine wave"],"author":{"name":"Isaac Suttell","email":"isaac@isaacsuttell.com"},"license":"MIT","gitHead":"b47462977f19f37bf8c6d01e9e7d7a28b3956f19","_id":"@aquestsrl/sine-waves@0.3.0","_npmVersion":"6.1.0","_nodeVersion":"10.1.0","_npmUser":{"name":"aquestdigital","email":"acquisti@aquest.it"},"dist":{"integrity":"sha512-rid81W65WGrfhc5Zek+rLSfqj9MvKba1BtsxRFB9iSx2t+LCPlfE2h+iLTksa9hxshIAkGraSt7HsYBZoFmRsA==","shasum":"4e49566f9e003e298b3e155a6f2d43211b31a4b9","tarball":"https://registry.npmjs.org/@aquestsrl/sine-waves/-/sine-waves-0.3.0.tgz","fileCount":49,"unpackedSize":612460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbOzp/CRA9TVsSAnZWagAAxGIQAISaM1LfhrgnvuJ3Ju0x\nvNG+vanafZoUcqlxBsZPwrJAo+4YajKllyTE9bO5fGe2Hw1WLonjElOgGYiT\nx8yRlxEjJQmsZbaR/dgWNlsbWEs7kkJW3rpUUMsDzQ0wFwlMTyu+WrheU/5B\ncpFpg8St9Qo7MQ38hwM47rmHjBcZMZ3r9BXI0hw3F7piaPbfLsN4rUiDtEh7\nKXkZc0nlIfIiBttOmPAnRPmBPXLpCzZSsKeDbkU9cCdlb1uujWG+/PoO3un9\nSx2HWkUbrtZEniPv2zlOGiwwX44h6pcptAZTjugd9xEhiuU6C033uUxQR2CA\nSszWh+xogtmtWw728hB3MekNrT33bGX9ogD3ix46ld4txSXa8RZiDRhcr7cW\nJSzK4mAogb/f0ne679kmmRq3cQ0oC+NbbaoF/pPcXWxNZlBdMJgkZZVbC6qA\nipcDIoNUP89f7byNPLFzZMQveQcPapohDOmu06Fg7lD86FS6Cu6AcQWJ/WXR\nF8HseYfDId8HU8RN6bO3JhKAyB1WQ+Jx00gLkZJk7GZ66bbY8q8UzREWBg1M\nWqI0t7JLjtODQgyLvesLEd62E2FflnYJ0Vftb8XNI5MYy28nqqXNXSerrbQ+\nyGAdcNgvlWVnWOK1ZFlkd2HNEA1DdcJjv7EMkW6GL1cfnusBym9tfcy8EYgU\nO0Xu\r\n=wd7L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHHp//eZCuxWCtibeVxl2BaVARsWslO3Tc1CaaC9Q3L4AiAx9XXy/O1i9HCZfieX2WNWb57REfiYeg31HntUj+IoLQ=="}]},"maintainers":[{"name":"aquestdigital","email":"acquisti@aquest.it"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/sine-waves_0.3.0_1530608255156_0.08112426285294805"},"_hasShrinkwrap":false}},"time":{"created":"2018-07-03T08:57:35.155Z","0.3.0":"2018-07-03T08:57:35.354Z","modified":"2022-04-04T15:14:04.427Z"},"maintainers":[{"email":"acquisti@aquest.it","name":"aquestdigital"}],"description":"Generate multiple configurable sine waves","homepage":"https://github.com/isuttell/sine-waves","keywords":["canvas","sine","sine wave"],"repository":{"type":"git","url":"git+https://github.com/isuttell/sine-waves.git"},"contributors":[{"name":"Isaac Suttell","email":"isaac@isaacsuttell.com"}],"author":{"name":"Isaac Suttell","email":"isaac@isaacsuttell.com"},"bugs":{"url":"https://github.com/isuttell/sine-waves/issues"},"license":"MIT","readme":"# sine-waves.js\n\nGenerate multiple configurable sine waves using a `canvas` element\n\n[![Build Status](http://img.shields.io/travis/isuttell/sine-waves/master.svg?style=flat)](https://travis-ci.org/isuttell/sine-waves)\n[![Coverage Status](https://img.shields.io/coveralls/isuttell/sine-waves/master.svg?style=flat)](https://coveralls.io/r/isuttell/sine-waves)\n[![Codacy Badge](https://img.shields.io/codacy/a52fd69032474c0ca88dc06ab69a9839.svg?style=flat)](https://www.codacy.com/public/isuttell/sine-waves)\n[![Dev Dependencies](http://img.shields.io/david/dev/isuttell/sine-waves.svg?style=flat)](https://david-dm.org/isuttell/sine-waves?type=dev)\n[![Release](https://img.shields.io/npm/v/sine-waves.svg?style=flat)](https://www.npmjs.com/package/sine-waves)\n\n\n## NPM\n\n```shell\nnpm install sine-waves --save\n```\n\n## Basic Usage\n```js\nvar waves = new SineWaves({\n  // Canvas Element\n  el: document.getElementById('waves'),\n\n  // General speed of entire wave system\n  speed: 8,\n\n  // How many degress should we rotate all of the waves\n  rotate: 0,\n\n  // Ease function from left to right\n  ease: 'Linear',\n\n  // Specific how much the width of the canvas the waves should be\n  // This can either be a number or a percent\n  waveWidth: '95%',\n\n  // An array of wave options\n  waves: [\n    {\n      timeModifier: 1,   // This is multiplied againse `speed`\n      lineWidth: 3,      // Stroke width\n      amplitude: 150,    // How tall is the wave\n      wavelength: 200,   // How long is the wave\n      segmentLength: 20, // How smooth should the line be\n      strokeStyle: 'rgba(255, 255, 255, 0.5)', // Stroke color and opacity\n      type: 'sine'       // Wave type\n    },\n    {\n      timeModifier: 1,\n      lineWidth: 2,\n      amplitude: 150,\n      wavelength: 100,\n      strokeStyle: 'rgba(255, 255, 255, 0.3)'\n    }\n  ],\n\n  // Perform any additional initializations here\n  initialize: function (){},\n\n  // This function is called whenver the window is resized\n  resizeEvent: function() {\n\n    // Here is an example on how to create a gradient stroke\n    var gradient = this.ctx.createLinearGradient(0, 0, this.width, 0);\n    gradient.addColorStop(0,\"rgba(0, 0, 0, 0)\");\n    gradient.addColorStop(0.5,\"rgba(255, 255, 255, 0.5)\");\n    gradient.addColorStop(1,\"rgba(0, 0, 0, 0)\");\n\n    var index = -1;\n    var length = this.waves.length;\n      while(++index < length){\n      this.waves[index].strokeStyle = gradient;\n    }\n  }\n});\n```\n\n## Easing\nThe default easing is `Linear` which means the waves are not modified from left to right. Additionally you can specify one of the following easing functions to the waves to modify the amplitude of each wave throughout the width of the canvas.\n\n* `Linear`\n* `SineIn`\n* `SineOut`\n* `SineInOut`\n\nAlternatively you can pass a function directly to the `ease` option when creating a SineWaves instance.\n\n```js\n  // Example of linear growth\n  ease: function(percent, amplitude) {\n    return amplitude * percent;\n  },\n```\n\n## Wave Types\nIn addition to the default Sine wave can also generate, `Square`, `Sawtooth`, and `Triangle` waves.\n\n```js\n  waves: [\n    {\n      type: 'Square'\n      segmentLength: 1, // The smaller the smoother\n    },\n    {\n      type: 'Sawtooth'\n      segmentLength: 1,\n    },\n    {\n      type: 'Triangle'\n      segmentLength: 1,\n    }\n  ],\n```\n\n## Custom Waves\nYou can also specify your own wave function by supplying a function to the type parameter. This function has two arguments: `x` and `waves`. `x` is the location of a point on the x axis and `waves` a helper object with the following functions in it:\n\n* `waves.sine(x)`\n* `waves.sign(x)`\n* `waves.square(x)`\n* `waves.sawtooth(x)`\n* `waves.triangle(x)`\n\n```js\n  waves: [\n    {\n      timeModifier: 1,\n      lineWidth: 2,\n      amplitude: 150,\n      wavelength: 200,\n      segmentLength: 10,\n      strokeStyle: 'rgba(255, 255, 255, 0.5)',\n      type: function(x, waves) {\n        return Math.sin(x) * waves.sawtooth(x); // Combine two together\n      }\n    },\n    // Additional waves\n  ],\n```\n\n## Examples on Codepen\n\n* [The Basics](http://codepen.io/isuttell/pen/vENOZw)\n* [Animated Borders](http://codepen.io/isuttell/pen/PwPqOw)\n* [Rotate](http://codepen.io/isuttell/pen/xbwrxB)\n* [Alternative Wave Types](http://codepen.io/isuttell/pen/MYaoKX)\n\n## Mobile\nCanvas is supported on most devices however the due limited processing power complex animations may appear choppy. You can either create simplier animations for mobile or disable the animation by setting the `running` property to `false`. Running the `update()` method will update the animation one frame while paused.\n\n```js\nvar waves = new SineWaves({\n  // Canvas Element\n  el: document.getElementById('waves'),\n\n  running: false,\n\n  waves: [{}]\n});\n\n// or\nwaves.running = false;\n\n// And then update the animation one frame\nwaves.update();\n```\n\n## License\nSineWaves is open-sourced software licensed under the MIT license\n\n## Release History\n- v0.3.0 - Refactor, added custom waves, and bug fixes\n- v0.2.0-alpha - Added rotate, ease, wavesWidth and wave types options\n- v0.1.0-alpha - Initial Release\n","readmeFilename":"README.md"}