flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/pixi-particles. particle system for pixi.js
flo-bit.github.io/pixi-particles/
javascript
particle-system
particles
pixijs
2.6 kB
80 lines
1<html>
2 <head>
3 <meta charset="UTF-8" />
4 <meta
5 name="viewport"
6 content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
7 />
8 <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.1.0/pixi.min.js"></script>
9 </head>
10 <body style="overflow: hidden">
11 <script>
12 class PiXI_SCAFFOLD {
13 constructor() {
14 let w = window.innerWidth,
15 h = window.innerHeight;
16
17 this.app = new PIXI.Application({
18 width: w,
19 height: h,
20 antialias: true,
21 transparent: false,
22 resolution: 1,
23 });
24 this.keys = {};
25 document.addEventListener("keydown", this.keyDown.bind(this));
26 document.addEventListener("keyup", this.keyUp.bind(this));
27 window.addEventListener("resize", this.windowResized.bind(this));
28
29 this.setupScene();
30 this.app.view.style.position = "absolute";
31 this.app.view.style.top = "0px";
32 this.app.view.style.left = "0px";
33
34 document.body.appendChild(this.app.view);
35 let ticker = PIXI.Ticker.shared;
36 ticker.add(this.animate.bind(this));
37 }
38
39 setupScene() {
40 /* setup your scene here */
41 let radius =
42 Math.min(this.app.screen.width, this.app.screen.height) / 3;
43 /* START */
44 this.circle = new PIXI.Graphics();
45 this.circle.beginFill(0xaa0000);
46 this.circle.drawCircle(0, 0, radius / 5);
47 this.circle.endFill();
48 this.app.stage.addChild(this.circle);
49
50 this.circle.x = this.app.screen.width / 2 + radius * Math.cos(0);
51 this.circle.y = this.app.screen.height / 2 + radius * Math.sin(0);
52 /* END */
53 }
54 animate() {
55 /* Update your scene here */
56 let elapsed = PIXI.Ticker.shared.elapsedMS / 1000.0;
57 let total = PIXI.Ticker.shared.lastTime / 1000.0;
58
59 /* START */
60 let radius =
61 Math.min(this.app.screen.width, this.app.screen.height) / 3;
62 this.circle.x = this.app.screen.width / 2 + radius * Math.cos(total);
63 this.circle.y = this.app.screen.height / 2 + radius * Math.sin(total);
64 /* END */
65 }
66
67 windowResized() {
68 this.app.renderer.resize(window.innerWidth, window.innerHeight);
69 }
70 keyDown(event) {
71 this.keys[event.key] = true;
72 }
73 keyUp(event) {
74 this.keys[event.key] = false;
75 }
76 }
77 let app = new PiXI_SCAFFOLD();
78 </script>
79 </body>
80</html>