-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
119 lines (85 loc) · 2.83 KB
/
index.html
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="manifest" href="manifest.json" />
<title>rotme</title>
<style>
html, body, canvas {
width: 100%;
height: 100%;
border: 0;
margin: 0;
overflow: hidden;
}
body {
background-color: black;
}
</style>
</head>
<body>
<script type="text/javascript" src="pixi.js"></script>
<script type="text/javascript">
//import { Application, Assets, Container, Sprite } from './pixi.js';
(async () =>
{
// Create a new application
const app = new PIXI.Application();
// Initialize the application
await app.init({ background: '#1099bb', resizeTo: window });
// Append the application canvas to the document body
document.body.appendChild(app.canvas);
// Create and add a container to the stage
const container = new PIXI.Container();
app.stage.addChild(container);
// Load the bunny texture
const texture = await PIXI.Assets.load('https://pixijs.com/assets/bunny.png');
console.debug(app);
// Create a 5x5 grid of bunnies in the container
for (let i = 0; i < 25; i++)
{
const bunny = new PIXI.Sprite(texture);
bunny.x = (i % 5) * 40;
bunny.y = Math.floor(i / 5) * 40;
container.addChild(bunny);
}
// Move the container to the center
container.x = app.screen.width / 2;
container.y = app.screen.height / 2;
// Center the bunny sprites in local container coordinates
container.pivot.x = container.width / 2;
container.pivot.y = container.height / 2;
let rs = 0.01;
// Listen for animate update
app.ticker.add((time) =>
{
// Continuously rotate the container!
// * use delta to create frame-independent transform *
container.rotation -= rs * time.deltaTime;
rs = rs / 1.004;
});
app.stage.eventMode = 'static';
app.stage.hitArea = app.screen;
app.stage.on('pointerup', onDragEnd);
app.stage.on('pointerupoutside', onDragEnd);
app.stage.on('pointerdown', onDragStart);
let starte = null;
function onDragStart(e){
console.debug('start',e);
starte = { x: e.client.x, y: e.client.y };
}
function onDragEnd(e){
console.debug('end', starte, e);
if (starte){
const dx = (e.client.x - starte.x) / app.renderer.view.screen.width;
const dy = (e.client.y - starte.y) / app.renderer.view.screen.width;
rs += Math.sqrt(dx*dx + dy*dy) / 5 * (dx < 0 ? -1 : 1);
console.debug(dx, dy, rs);
starte = null;
}
}
})();
</script>
</body>
</html>