{"id":17743974,"url":"https://github.com/narigo/dripping-spray","last_synced_at":"2025-07-15T04:04:30.782Z","repository":{"id":40953152,"uuid":"131000725","full_name":"Narigo/dripping-spray","owner":"Narigo","description":"Finally a real spray can","archived":false,"fork":false,"pushed_at":"2022-12-06T14:51:41.000Z","size":2904,"stargazers_count":8,"open_issues_count":48,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-13T15:06:05.727Z","etag":null,"topics":["drawing-library","drops","graphics","spray"],"latest_commit_sha":null,"homepage":"https://narigo.github.io/dripping-spray/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Narigo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-04-25T12:09:21.000Z","updated_at":"2025-04-17T17:18:09.000Z","dependencies_parsed_at":"2023-01-24T02:15:34.358Z","dependency_job_id":null,"html_url":"https://github.com/Narigo/dripping-spray","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/Narigo/dripping-spray","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Narigo%2Fdripping-spray","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Narigo%2Fdripping-spray/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Narigo%2Fdripping-spray/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Narigo%2Fdripping-spray/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Narigo","download_url":"https://codeload.github.com/Narigo/dripping-spray/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Narigo%2Fdripping-spray/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265401824,"owners_count":23759023,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["drawing-library","drops","graphics","spray"],"created_at":"2024-10-26T06:22:30.265Z","updated_at":"2025-07-15T04:04:30.726Z","avatar_url":"https://github.com/Narigo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Dripping spray\n\n![Example picture of the spray in action](./example.png)\n\nMonorepo for simulating a real spray can that creates drips when used on the same spot for a bit.\n\n## Usage examples\n\nThere are multiple ways to use the spray. You can ...\n\n1.  use the `dripping-spray` module and receive shape data for you to draw it how you like or\n2.  use a `dripping-spray-*` drawer module.\n\nIf you want to draw on a canvas-DOM element, use the [dripping-spray-canvas](./packages/dripping-spray-canvas) module.\nIt will help you set up the spray and canvas. Same for [dripping-spray-pixijs](./packages/dripping-spray-pixijs) which\nuses PixiJS to draw on a canvas instead of a pure implementation.\n\nIf you want to draw on something different (for example write out SVGs or similar), you can create your own `Drawer`\nwith the underlying [dripping-spray](./packages/dripping-spray) module and let it generate abstract shapes for you that\nyou can draw.\n\n### Using a provided `createSpray()` method\n\nThe `dripping-spray-*` modules usually provide a `createSpray()` method to simplify drawing, using the animation frame,\netc. Please have a look in their documentation if such a short-cut exists. You can also see the guide below how to use\na `shapeDrawer` and have more control about when and how to animate the spray.\n\n### Using the generic `Spray`\n\nFirst of all, you need to decide what the spray should look like. There are a few customization options that you can\nprovide. Below you can see the default options, which will be set if you don't provide an object or leave out fields\ninside of it:\n\n```javascript\nconst Spray = require('./spray.js');\nconst options = {}; // You can customize the spray by providing [options](#customizing-spray-options)\nconst spray = new Spray(options);\n```\n\nFor the spray to know where to draw to, you need to select a drawer. With a drawer, the spray is able to draw on\nwhatever surface the drawer provides.\n\nIn our example case, we use the `CanvasDrawer` from [dripping-spray-canvas](./packages/dripping-spray-canvas) to draw\nshapes on a canvas DOM element.\n\n```javascript\nconst CanvasDrawer = require('./canvas_drawer.js');\nconst shapeDrawer = new CanvasDrawer(document.getElementById('myCanvas'));\n```\n\nTo be able to optimize our `requestAnimationFrame` calls, you need to call the `draw` method of the spray inside of it\nand tell it whether it needs to draw at a specific coordinate or should draw just because there might still be drips\nleft. The `draw` method will tell us, whether the spray has some drips left to render.\n\nA typical `requestAnimationFrame` could look like this:\n\n```\nlet spraying = true; // sprays at a specific coordinate (see render() method)\nlet currentCoords = { x : 0, y : 0 }; // the coordinates where to draw, if spraying\n\nfunction render() {\n  let stillDrawing = false;\n  if (spraying) {\n    stillDrawing = spray.draw(shapeDrawer, currentCoords);\n  } else {\n    stillDrawing = spray.draw(shapeDrawer); // it still might have to draw for another frame if there are running drips\n  }\n\n  if (stillDrawing) {\n    requestAnimationFrame(render);\n  }\n}\n```\n\n### Customizing spray options\n\nYou can customize most of how the spray works by changing the `options` parameter and provide them to the spray as \nmentioned in the usage examples. Here are the default values which will be set if you do not provide a field in your\n`options` object.\n\n```javascript\n{\n  color : {            // the color of the spray\n    r : 0,             // red\n    g : 0,             // green\n    b : 255            // blue\n  },\n\n  size : 5,            // the size of the center circle that will always be filled\n\n  splatterAmount : 10, // the amount of circles it draws in each step (usually during `requestAnimationFrame`)\n\n  splatterRadius : 20, // the radius of the spray\n\n  dripper : true,      // whether the spray drips (`true`) or not (`false`)\n\n  dripThreshold : 50,  // when the spray should start to drip - it accumulates the amount of spray inside of the size\n                       // and starts to drip when it reaches the threshold. Think of `dripThreshould / size` is the\n                       // amount of `requestAnimationFrame`-calls the spray would need to start dripping.\n\n  dripSpeed : 3        // how fast the drips should flow as soon as they started\n}\n```\n\n### Full example\n\n```javascript\nconst CanvasDrawer = require('dripping-spray-canvas');\nconst Spray = require('dripping-spray');\nconst spray = new Spray();\nconst shapeDrawer = new CanvasDrawer(document.getElementById('myCanvas'));\n\nlet myX, myY, spraying; // Saves state for coordinates and if spraying\n\ndocument.addEventListener('mousedown', startSpraying);\ndocument.addEventListener('mousemove', updateCoords);\ndocument.addEventListener('mouseup', stopSpraying);\n\nfunction startSpraying() {\n  spraying = true;\n  render();\n}\n\nfunction updateCoords(e) {\n  myX = e.pageX;\n  myY = e.pageY;\n}\n\nfunction stopSpraying() {\n  spraying = false;\n}\n\nfunction render() {\n  let stillDrawing = false;\n  if (spraying) {\n    stillDrawing = spray.draw(shapeDrawer, { x : myX, y: myY });\n  } else {\n    stillDrawing = spray.draw(shapeDrawer); // for drips only\n  }\n\n  if (stillDrawing) {\n    requestAnimationFrame(render);\n  }\n}\n\nrequestAnimationFrame(render);\n```\n\n## Contributing / building\n\nThe main commands to use:\n\n1. `npx lerna clean` - removes all `node_modules` and unlinks whatever is linked\n2. `npx lerna bootstrap` - installs all `node_modules` and links the packages\n3. `npx lerna run build` - builds all packages\n4. `npx lerna run test` - tests all packages\n5. `npx lerna exec \"npm outdated\"` - runs `npm outdated` in all packages to find outdated packages for possible updates\n6. `npx lerna exec \"npx updtr\"` - updates all packages\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnarigo%2Fdripping-spray","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnarigo%2Fdripping-spray","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnarigo%2Fdripping-spray/lists"}