{"id":13409024,"url":"https://github.com/drawcall/Proton","last_synced_at":"2025-03-14T14:30:55.057Z","repository":{"id":9429943,"uuid":"11303194","full_name":"drawcall/Proton","owner":"drawcall","description":"Javascript particle animation library","archived":false,"fork":false,"pushed_at":"2025-02-11T14:09:43.000Z","size":15363,"stargazers_count":2445,"open_issues_count":14,"forks_count":275,"subscribers_count":56,"default_branch":"master","last_synced_at":"2025-03-11T18:38:37.490Z","etag":null,"topics":["canvas","js-particle","particle","particle-engine","particle-system","particles","particles-library","webgl"],"latest_commit_sha":null,"homepage":"https://drawcall.github.io/Proton/","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/drawcall.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2013-07-10T05:25:20.000Z","updated_at":"2025-03-07T02:38:23.000Z","dependencies_parsed_at":"2024-01-16T09:56:58.913Z","dependency_job_id":"b9dbc5df-7515-4e13-b634-a8c5cfb3aa92","html_url":"https://github.com/drawcall/Proton","commit_stats":{"total_commits":156,"total_committers":17,"mean_commits":9.176470588235293,"dds":0.6538461538461539,"last_synced_commit":"f44b1c8109762402e08c81ee218872c6d563c3bb"},"previous_names":["a-jie/proton"],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drawcall%2FProton","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drawcall%2FProton/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drawcall%2FProton/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drawcall%2FProton/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/drawcall","download_url":"https://codeload.github.com/drawcall/Proton/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243095793,"owners_count":20235549,"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":["canvas","js-particle","particle","particle-engine","particle-system","particles","particles-library","webgl"],"created_at":"2024-07-30T20:00:57.391Z","updated_at":"2025-03-14T14:30:55.016Z","avatar_url":"https://github.com/drawcall.png","language":"JavaScript","readme":"\u003cdiv align=center\u003e\u003cimg src=\"https://drawcall.github.io/Proton/images/logo/proton.png\"/\u003e\u003c/div\u003e\n\n---\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href='https://www.npmjs.com/package/proton-engine'\u003e\n    \u003cimg src='https://badge.fury.io/js/proton-engine.svg' alt='npm version' height='18'\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://npmjs.org/package/proton-engine\"\u003e\n  \u003cimg title=\"NPM downloads\" src=\"http://img.shields.io/npm/dm/proton-engine.svg\" alt='dm' height='18'\u003e\n  \u003c/a\u003e\n  \u003ca href='https://travis-ci.com/drawcall/Proton'\u003e\n    \u003cimg src='https://travis-ci.com/drawcall/Proton.svg?branch=master' alt='travis' height='18'\u003e\n  \u003c/a\u003e\n  \u003ca href='https://github.com/drawcall/Proton/issues'\u003e\n    \u003cimg src='https://img.shields.io/github/issues/drawcall/Proton.svg' alt='issues open' height='18'\u003e\n  \u003c/a\u003e\n  \u003ca href='https://cdnjs.com/libraries/proton-engine'\u003e\n    \u003cimg src='https://img.shields.io/cdnjs/v/proton-engine' alt='issues open' height='18'\u003e\n  \u003c/a\u003e\n  \u003ca href='#'\u003e\n    \u003cimg src='https://img.shields.io/npm/l/proton-engine.svg' alt='license:MIT' height='18'\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\nProton is a lightweight and powerful Javascript particle animation library. Use it to easily create a variety of cool particle effects.\n\nCheck out examples at [http://drawcall.github.io/Proton/](http://drawcall.github.io/Proton/). The **3D version** of the proton engine is here [here](https://github.com/drawcall/three.proton/). An available **react version** is [here](https://github.com/lindelof/particles-bg).\n\n## Features\n\n- **Easy to use** It takes only a dozen lines of code to create a particle animation effect.\n- **Multiple effects** Use Proton to create flames, fireworks, bullets, explosions, and more.\n- **Any scene** You can use it in frameworks such as `react`, `vue`, `angular`, and `pixi.js`, `Phaser`, etc.\n- **Efficient rendering** Its rendering efficiency is very high, you can render tens of thousands of particles in the page.\n- **Simulated physics** Proton can simulate various physical properties including gravity and Brownian motion.\n- **Several renderers** Proton provides a variety of renderers, of course you can also customize your own renderer\n  - `CanvasRenderer` - Proton's canvas renderer\n  - `DomRenderer` - Proton's dom renderer, supporting hardware acceleration.\n  - `WebGLRenderer` - Proton's webgl renderer.\n  - `PixelRenderer` - Proton's pixel renderer, It can implement pixel animation.\n  - `EaselRenderer` - Easeljs proton renderer.\n  - `EaselRenderer` - Pixi.js proton renderer.\n  - `CustomRenderer` - Use a custom renderer that can be applied to any scene.\n\n## Documentation\n\nSee detailed documentation please visit [https://projects.jpeer.at/proton/](https://projects.jpeer.at/proton/).\nThank you very much [@matsu7089](https://github.com/matsu7089) for writing a [good tutorial](https://qiita.com/matsu7089/items/dcb7d326e4ec1340eba6).\n\n## Installation\n\n#### Install using npm\n\n\u003e Note: NPM package-name has been changed from `proton-js` to `proton-engine`\n\n```shell\nnpm install proton-engine --save\n```\n\n```javascript\nimport Proton from \"proton-engine\";\n```\n\n#### OR include in html\n\n```html\n\u003cscript type=\"text/javascript\" src=\"js/proton.web.min.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\nProton is very simple to use, a dozen lines of code can create a particle animation.\n\n```javascript\nimport Proton, {\n  Emitter,\n  Rate,\n  Span,\n  Radius,\n  Life,\n  Velocity,\n  Color,\n  Alpha,\n  CanvasRenderer,\n} from \"proton-engine\";\n\nconst proton = new Proton();\nconst emitter = new Emitter();\n\n//set Rate\nemitter.rate = new Rate(new Span(10, 20), 0.1);\n\n//add Initialize\nemitter.addInitialize(new Radius(1, 12));\nemitter.addInitialize(new Life(2, 4));\nemitter.addInitialize(new Velocity(3, new Span(0, 360), \"polar\"));\n\n//add Behaviour\nemitter.addBehaviour(new Color(\"ff0000\", \"random\"));\nemitter.addBehaviour(new Alpha(1, 0));\n\n//set emitter position\nemitter.p.x = canvas.width / 2;\nemitter.p.y = canvas.height / 2;\nemitter.emit(5);\n\n//add emitter to the proton\nproton.addEmitter(emitter);\n\n// add canvas renderer\nconst renderer = new CanvasRenderer(canvas);\nproton.addRenderer(renderer);\n```\n\n## Remarks\n\n- `Proton.Span` (or `Proton.getSpan`) is a very important concept of the Proton engine, it's everywhere. If you understand its usage, you can create almost any desired effect!\n\n- If you want to create wind, rain, or snow, etc, you can use the `emitter.preEmit` method to pre-render the scene.\n\n- Use `Proton.Body` and `Proton.Color` at the same time. I suggest you'd better use the `WebGLRenderer` not `CanvasRenderer`.\n\n- Added `Proton.Cyclone` behavior, you can make vortex effects with Cyclone. Demo please check [here](https://codesandbox.io/s/proton-cyclone-rzweu).\n\n- `proton.fps` In modern browsers, if the FPS exceeds 60 and you want to maintain a stable 60 FPS, you need to set `proton.fps = 60`. You can set this property when the game engine has fixed fps or some browsers have a higher refresh rate.\n\n- Use Euler integration calculation is more accurate (default false) `Proton.USE_CLOCK = false or true;`.\n\nProton has now been upgraded to the **v4** version. Performance has been greatly improved and api also has some improvements. For more details, please check [here](https://github.com/drawcall/Proton/releases).\n\n## Building\n\n`node` is a dependency, use terminal to install it with:\n\n```javascript\ngit clone git://github.com/drawcall/Proton.git\n\n...\nnpm install\nnpm run build\n```\n\nAnd run example\n\n```javascript\nnpm start\n//vist http://localhost:3001/example/\n```\n\n## Changelog\n\nDetailed changes for each release are documented in the [release notes](https://github.com/drawcall/Proton/releases).\n\n## License\n\nProton is released under the MIT License. http://www.opensource.org/licenses/mit-license\n","funding_links":[],"categories":["JavaScript","Projects List","Repository","JS 动画"],"sub_categories":["Animation"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrawcall%2FProton","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdrawcall%2FProton","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrawcall%2FProton/lists"}