{"_id":"2d-canvas-image-particles","_rev":"6-0a145dcf29921c989cf089e5726b1103","name":"2d-canvas-image-particles","dist-tags":{"latest":"1.4.2"},"versions":{"1.0.4":{"name":"2d-canvas-image-particles","version":"1.0.4","description":"A simple lightweight 2D particle system using Canvas.","main":"dist/2d-canvas-image-particles.min.js","scripts":{"prepublish":"typings install","watch":"webpack --watch","build":"webpack --build --optimize-minimize"},"keywords":["canvas","particles"],"author":{"name":"Arkounay"},"license":"MIT","devDependencies":{"ts-loader":"^0.9.4","typescript":"^2.0.3","typings":"^1.4.0","webpack":"^1.13.2"},"gitHead":"5a1736ccda8fa5f61e9058bb086aa49bbe657c3e","_id":"2d-canvas-image-particles@1.0.4","_nodeVersion":"10.19.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-rsjhsbcb4ydyPb825R5mgZeq8PAydXTQU9eMZpI9HMsZMiqGyl1ILBCff4D9LEw2v8jjiiRK3FhJIot4GLmigg==","shasum":"4c5ca1bdf180e04cd73fdc8395acb2010112ef80","tarball":"https://registry.npmjs.org/2d-canvas-image-particles/-/2d-canvas-image-particles-1.0.4.tgz","fileCount":24,"unpackedSize":56913,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+hnsb/PsLUg2Q01ssQ7vsser9t6E5o/U/4QVzHxTirQIgNzTqE3/+rtCI6Vj7rls9wqgCsUlhVSkcc94v9n7K3YM="}]},"_npmUser":{"name":"arkounay","email":"arkanen@gmail.com"},"directories":{},"maintainers":[{"name":"arkounay","email":"arkanen@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/2d-canvas-image-particles_1.0.4_1634030397888_0.8881797816762675"},"_hasShrinkwrap":false},"1.0.6":{"name":"2d-canvas-image-particles","version":"1.0.6","description":"A simple lightweight 2D particle system using Canvas.","main":"dist/2d-canvas-image-particles.min.js","scripts":{"prepublish":"typings install","watch":"webpack --watch","build":"webpack --build --optimize-minimize"},"repository":{"type":"git","url":"git+https://github.com/Arkounay/2D-Canvas-Image-Particles.git"},"keywords":["canvas","particles"],"author":{"name":"Arkounay"},"license":"MIT","devDependencies":{"ts-loader":"^0.9.4","typescript":"^2.0.3","typings":"^1.4.0","webpack":"^1.13.2"},"gitHead":"676f90b2ce5fd1af3d56f417ea989c34d6c99846","bugs":{"url":"https://github.com/Arkounay/2D-Canvas-Image-Particles/issues"},"homepage":"https://github.com/Arkounay/2D-Canvas-Image-Particles#readme","_id":"2d-canvas-image-particles@1.0.6","_nodeVersion":"10.19.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-86vc13+34ys9bd5blTdfCB2MPGnfKuLRSIiBklSlwEI4+6pl9UXNFcDXpPqlQqWz5vep3S2ZuobAJSeEPx8Fyw==","shasum":"15c31f5660bb16116e8044f989abaca6e2ad626b","tarball":"https://registry.npmjs.org/2d-canvas-image-particles/-/2d-canvas-image-particles-1.0.6.tgz","fileCount":24,"unpackedSize":57554,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDPM32mgApKEiuQcB4fRdiVMcAqYJv4UtluBp2vm4u2lwIgf9WIfxdYAQxg3MeTMKFcwq0Z0V5sLgQIuPiIumekItE="}]},"_npmUser":{"name":"arkounay","email":"arkanen@gmail.com"},"directories":{},"maintainers":[{"name":"arkounay","email":"arkanen@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/2d-canvas-image-particles_1.0.6_1634032007729_0.7364536310168592"},"_hasShrinkwrap":false},"1.4.2":{"name":"2d-canvas-image-particles","version":"1.4.2","description":"A simple lightweight 2D particle system using Canvas.","main":"dist/2d-canvas-image-particles.min.js","scripts":{"prepublish":"typings install","watch":"webpack --watch","build":"webpack --build --optimize-minimize"},"repository":{"type":"git","url":"git+https://github.com/Arkounay/2D-Canvas-Image-Particles.git"},"keywords":["canvas","particles"],"author":{"name":"Arkounay"},"license":"MIT","devDependencies":{"ts-loader":"^0.9.4","typescript":"^2.0.3","typings":"^1.4.0","webpack":"^1.13.2"},"gitHead":"8d3fb1947776325e64010698f726c78b8387ef27","bugs":{"url":"https://github.com/Arkounay/2D-Canvas-Image-Particles/issues"},"homepage":"https://github.com/Arkounay/2D-Canvas-Image-Particles#readme","_id":"2d-canvas-image-particles@1.4.2","_nodeVersion":"10.19.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-UWwNYlu32jFz6Ra5AIB4lc6zRwW9ugpTozX5PH3HMaTjNOc5r9T0WKdPWFPWu6/zASm+pMsQiYoF9aMj1FoKGw==","shasum":"ecf06b01bdfd87c68b757bed54ef7b95c04ea0da","tarball":"https://registry.npmjs.org/2d-canvas-image-particles/-/2d-canvas-image-particles-1.4.2.tgz","fileCount":24,"unpackedSize":57554,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuebECRA9TVsSAnZWagAAT00P/13XMCRdduHCF3T699nM\nB67uAJcZFRJPnciMUf/H7QrnvR2P9knt9KXulkXQVwJaJ+54Q9xq1+hWy6P4\nuLjgfKsAKBbyt5hBy/urU0KlFYLTXUmigTxDKrZkUmBRVitqbT0F0K/Lq03D\nX4Xr5FFEinCY2bjLelg6qLT312bX3Nqs+0ArRzCdOdNplgpa9jEFw2X3jVjS\ncn7NSFYFFlXo4niqmV6xLJ0eg0+P+HVC25l9dx6LNjO/IYE25dbLgS52NsSf\n6SS/ZqPHq8G9Os36pyKaTYVwBMYVtFCu2o6/RkjwRrwwDoUjdV7zlSiloDme\nyb9CaK3tPgG2b6ATWN5bLRm4nRn5UhLkevorvltY9MIGOBu4f5aKsESlo5xX\n/BeN8xYHCNyb2rQNKbFhBdXZRWjMTsbDgEFj7o1uO+1GalIF/ziHmvoKQM6a\niYvU4pDY1uUcpkO+vtT9AllKIyqnLP09VsnyYoIOm6xFucvdSRsX5IkfqCwq\nKYdY8uB2M8pKqgpbjUrFTcRNJ/MjDUD0oOiZoeHER93W56fw6opb0I97I0dT\nSFo5xPbI19vnDjJutIGPL+6JV/6Sy11DFj5/YG29VtZiBrDdECesAMmmMKtC\nVLVW8hC4elxvG13zYtX5KPgbT7RUDxWBqO43tgSjHZeI8VGNtKIZGT2VU3df\nxONi\r\n=u+Un\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtBWMYS8D2eiIzdr+Ol3LdM2cJNHu0xnTQWRGHx0Kx0gIgcvP1KK4nV+TS96MOUwmRL8T7cwKnc+esBmFZpmi1JOU="}]},"_npmUser":{"name":"arkounay","email":"arkanen@gmail.com"},"directories":{},"maintainers":[{"name":"arkounay","email":"arkanen@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/2d-canvas-image-particles_1.4.2_1634033113792_0.2254111628421258"},"_hasShrinkwrap":false}},"time":{"created":"2021-10-12T09:19:57.887Z","1.0.4":"2021-10-12T09:19:58.030Z","modified":"2022-04-04T10:18:52.847Z","1.0.5":"2021-10-12T09:41:55.821Z","1.0.6":"2021-10-12T09:46:48.120Z","1.4.2":"2021-10-12T10:05:13.989Z"},"maintainers":[{"name":"arkounay","email":"arkanen@gmail.com"}],"description":"A simple lightweight 2D particle system using Canvas.","keywords":["canvas","particles"],"author":{"name":"Arkounay"},"license":"MIT","readme":"# 2D Particle System using Canvas\n\nA simple lightweight 2D particle system using Canvas.\n\n- Multiple particle systems can be bound to the same canvas\n- Particles speed remain the same regardless of the refreshing rate\n- Less than 10 KB\n- Refresh rate independant : particles have the same behaviour between 60hz / 144hz monitors\n\n[Check the demo page](https://arkounay.github.io/2D-Canvas-Image-Particles/)\n\n## Usage\n- Create a canvas \n- Import dist/2d-canvas-image-particles.min.js\n- Create a new ParticleSystem : `new ParticleSystem(canvas_id, image_path, options);`\n\n### Example\n    <canvas id=\"js-canvas\"></canvas>\n    \n    <script src=\"dist/2d-canvas-image-particles.min.js\"></script>\n    <script>\n        new ParticleSystem('js-canvas', 'images/default-particle.png', {\n            cursorMode: CursorMode.Zoom\n        });\n    </script>\n    \nYou can check the [demo page](https://arkounay.github.io/2D-Canvas-Image-Particles/)'s sources for more examples.\nYou can also use an HTMLCanvasElement instead of an id.\n\n### Usage with npm / Yarn\n\n`npm install 2d-canvas-image-particles` or `yarn add 2d-canvas-image-particles`.\n\nThen you can import it and use it\n\n```js\nimport '2d-canvas-image-particles';\n// ...\nnew ParticleSystem('id', 'images/default-particle.png', {\n    cursorMode: CursorMode.Zoom\n});\n```\nYou will need to specify your own images.\n\n\n### Options\n    {\n        maxParticles: number,\n        velocityAngle: [min, max],\n        speed: [min, max],\n        rotationStartAngle: [min, max],\n        cursorMode: CursorMode,     // (CursorMode.Bounce, CursorMode.Zoom, CursorMode.Light, CursorMode.Follow),\n        rotationMode: RotationMode, // (RotationMode.None, RotationMode.Random, RotationMode.FollowVelocity)\n        rotationSpeed: [min, max],\n        rotationSpeedSizeScale: number\n        minimumRotationSpeed: number // if min is negative and max is positive\n        tints: [new Tint('#hexColor', opacity)],\n        width: [min, max],\n        height: [min, max],\n        addOnClickNb: number,\n        density: number,\n        cursorRadius: number\n    }\n\n\n#### Cursor Modes\n* CursorMode.**Bounce**: particles will bounce off the cursor.\n* CursorMode.**Zoom**: the closer the cursor is, the bigger the particles are.\n* CursorMode.**Light**: works with Tint. Particles will enlight when cursor is close.\n* CursorMode.**Follow**: generates particles that are following the cursor.\n\n#### Rotation Modes\n* RotationMode.**None**\n* RotationMode.**Random**\n* RotationMode.**FollowVelocity**: Will follow the specified velocity (use it with _CursorMode.Bounce_ so the particles go back to their base velocity, this is used for the rain example)\n    \n## Build from sources\n- `npm install`\n- `npm run build`\n\n## IE Support\n- IE9+ ","readmeFilename":"README.md","homepage":"https://github.com/Arkounay/2D-Canvas-Image-Particles#readme","repository":{"type":"git","url":"git+https://github.com/Arkounay/2D-Canvas-Image-Particles.git"},"bugs":{"url":"https://github.com/Arkounay/2D-Canvas-Image-Particles/issues"}}