• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

drawcall/Proton: Javascript particle animation library

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

drawcall/Proton

开源软件地址(OpenSource Url):

https://github.com/drawcall/Proton

开源编程语言(OpenSource Language):

JavaScript 84.7%

开源软件介绍(OpenSource Introduction):


Proton is a lightweight and powerful Javascript particle animation library. Use it to easily create a variety of cool particle effects.

Check out examples at http://drawcall.github.io/Proton/. The 3D version of the proton engine is here https://github.com/drawcall/three.proton/

Features

  • Easy to use It takes only a dozen lines of code to create a particle animation effect.
  • Multiple effects Use Proton to create flames, fireworks, bullets, explosions, and more.
  • Any scene You can use it in frameworks such as react, vue, angular, and pixi.js, Phaser, etc.
  • Efficient rendering Its rendering efficiency is very high, you can render tens of thousands of particles in the page.
  • Simulated physics Proton can simulate various physical properties including gravity and Brownian motion.
  • Several renderers Proton provides a variety of renderers, of course you can also customize your own renderer
    • CanvasRenderer - Proton's canvas renderer
    • DomRenderer - Proton's dom renderer, supporting hardware acceleration.
    • WebGLRenderer - Proton's webgl renderer.
    • PixelRenderer - Proton's pixel renderer, It can implement pixel animation.
    • EaselRenderer - Easeljs proton renderer.
    • EaselRenderer - Pixi.js proton renderer.
    • CustomRenderer - Use a custom renderer that can be applied to any scene.

Documentation

See detailed documentation please visit https://projects.jpeer.at/proton/. Thank you very much @matsu7089 for writing a good tutorial.

Installation

Install using npm

Note: NPM package-name has been changed from proton-js to proton-engine

npm install proton-engine --save
import Proton from "proton-engine";

OR include in html

<script type="text/javascript" src="js/proton.min.js"></script>

Usage

Proton is very simple to use, a dozen lines of code can create a particle animation.

const proton = new Proton();
const emitter = new Proton.Emitter();

//set Rate
emitter.rate = new Proton.Rate(Proton.getSpan(10, 20), 0.1);

//add Initialize
emitter.addInitialize(new Proton.Radius(1, 12));
emitter.addInitialize(new Proton.Life(2, 4));
emitter.addInitialize(new Proton.Velocity(3, Proton.getSpan(0, 360), "polar"));

//add Behaviour
emitter.addBehaviour(new Proton.Color("ff0000", "random"));
emitter.addBehaviour(new Proton.Alpha(1, 0));

//set emitter position
emitter.p.x = canvas.width / 2;
emitter.p.y = canvas.height / 2;
emitter.emit(5);

//add emitter to the proton
proton.addEmitter(emitter);

// add canvas renderer
const renderer = new Proton.CanvasRenderer(canvas);
proton.addRenderer(renderer);

Remarks

  • 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!

  • If you want to create wind, rain, or snow, etc, you can use the emitter.preEmit method to pre-render the scene.

  • Use Proton.Body and Proton.Color at the same time. I suggest you'd better use the WebGLRenderer not CanvasRenderer.

  • Added Proton.Cyclone behavior, you can make vortex effects with Cyclone. Demo please check here.

  • proton.fps In most cases, you don't need to set this property. You can set this property when the game engine has fixed fps or some browsers have a higher refresh rate.

  • Use Euler integration calculation is more accurate (default false) Proton.USE_CLOCK = false or true;.

Proton 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.

Building

node is a dependency, use terminal to install it with:

git clone git://github.com/drawcall/Proton.git

...
npm install
npm run build

And run example

npm start
//vist http://localhost:3001/example/

Changelog

Detailed changes for each release are documented in the release notes.

License

Proton is released under the MIT License. http://www.opensource.org/licenses/mit-license




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
chyyuu/os_course_exercise_library发布时间:2022-08-15
下一篇:
Netflix/archaius: Library for configuration management API发布时间:2022-08-15
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap