-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
70 lines (52 loc) · 1.82 KB
/
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import { Cube } from "./cube.js";
import { Point2D } from "./utils.js";
class App {
constructor() {
this.canvas = document.createElement("canvas");
document.body.appendChild(this.canvas);
this.ctx = this.canvas.getContext("2d");
this.pixelRatio = window.divicePixelRatio > 1 ? 2 : 1;
this.pointer = new Point2D(0, 0);
this.startPos = new Point2D(0, 0);
this.endPos = new Point2D(0, 0);
this.cube = new Cube(0, 0, 400, 200);
window.addEventListener("resize", this.resize.bind(this), false);
this.resize();
window.requestAnimationFrame(this.animate.bind(this));
document.addEventListener("pointerdown", this.onDown.bind(this), false);
document.addEventListener("pointerup", this.onUp.bind(this), false);
}
resize() {
this.stageWidth = document.body.clientWidth;
this.stageHeight = document.body.clientHeight;
this.canvas.width = this.stageWidth * this.pixelRatio;
this.canvas.height = this.stageHeight * this.pixelRatio;
this.ctx.scale(this.pixelRatio, this.pixelRatio);
}
animate() {
window.requestAnimationFrame(this.animate.bind(this));
this.ctx.clearRect(0, 0, this.stageWidth, this.stageHeight);
this.cube.rotateX(this.pointer.y * 0.0001);
this.cube.rotateY(-this.pointer.x * 0.0001);
this.cube.animate(this.ctx, this.stageWidth, this.stageHeight);
}
onDown(e) {
this.startPos.x = e.clientX;
this.startPos.y = e.clientY;
this.startTime = Date.now();
}
onUp(e) {
this.endTime = Date.now();
this.endPos.x = e.clientX;
this.endPos.y = e.clientY;
this.pointer.x =
((this.endPos.x - this.startPos.x) / (this.endTime - this.startTime)) *
200;
this.pointer.y =
((this.endPos.y - this.startPos.y) / (this.endTime - this.startTime)) *
200;
}
}
window.onload = () => {
new App();
};