-
Notifications
You must be signed in to change notification settings - Fork 0
/
matrix_stack.js
73 lines (65 loc) · 2.01 KB
/
matrix_stack.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
71
72
73
import { Color, Rapid } from "../dist/rapid.js"
let rapid = new Rapid({
canvas: document.getElementById("game"),
backgroundColor: Color.fromHex("FFFFFF")
})
const cat = await rapid.textures.textureFromUrl("./cat.png")
const plane = await rapid.textures.textureFromUrl("./plane.png")
// R G B A
const red = new Color(255, 0, 0, 255)
const blue = new Color(0, 0, 255, 255)
const yellow = new Color(255, 255, 0, 255)
const green = new Color(0, 255, 0, 255)
const drawGraphicDemo = () => {
rapid.startGraphicDraw()
const s = Math.sin(time)
rapid.addGraphicVertex(50 + s * 50, 100, red)
rapid.addGraphicVertex(200, 50, blue)
rapid.addGraphicVertex(200 + s * 100, 200, yellow)
rapid.addGraphicVertex(100, 300 + s * 100, green)
rapid.addGraphicVertex(50, 300, green)
rapid.endGraphicDraw()
}
const drawMatrixStackDemo = () => {
const s = Math.sin(time)
rapid.matrixStack.translate(150, 50)
rapid.save() // save matrixStack
rapid.matrixStack.rotate(s * 0.5 + 0.1)
rapid.renderSprite(cat, 0, 0, yellow)
rapid.matrixStack.translate(32, 32)
rapid.renderSprite(cat, 0, 0, green)
rapid.matrixStack.translate(32, 32)
rapid.save() // save matrixStack
rapid.renderSprite(plane)
rapid.matrixStack.translate(32, 32)
rapid.matrixStack.rotate(s)
rapid.matrixStack.scale(2 + 1 * s)
rapid.renderSprite(cat)
rapid.matrixStack.translate(32, 32)
rapid.renderSprite(plane)
rapid.restore()
rapid.matrixStack.translate(50, 50)
rapid.renderSprite(plane)
rapid.restore()
rapid.matrixStack.translate(50, 50)
rapid.renderSprite(cat,0,0,red)
}
let time = 0
const render = () => {
time += 0.1
rapid.startRender()
drawGraphicDemo()
drawMatrixStackDemo()
rapid.endRender()
}
// performance monitor
var stats = new Stats();
stats.showPanel(0);
document.body.appendChild(stats.dom);
function animate() {
stats.begin();
render()
stats.end();
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);