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
first commit
author
florian
date
(Jan 14, 2023, 7:44 PM +0100)
commit
e27529db
e27529db4094dcd25de1624f603828372e28eb0e
+81
+1
.gitignore
+1
.gitignore
···
1
+
/.prettierrc
+80
index.html
+80
index.html
···
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>