add matrix_stack demo

Nightre · Feb 24, 2024 · f0d72b8 · f0d72b8
1 parent d3f8f4e
commit f0d72b8
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 1 deletion.
diff --git a/demo/index.html b/demo/index.html
@@ -8,6 +8,9 @@
         #game {
             border: 2px solid #000;
         }
+        img {
+            border: 2px solid #000;
+        }
     </style>
 </head>
 <body>
@@ -16,7 +19,13 @@
     <canvas id="game" width="500" height="500"></canvas>
     <script type="module" src="./index.js"></script>
     <p id="sprite-count"></p>
-    <p>2 textures</p>
+    <p>2 textures:</p>
+    <img src="./cat.png" alt="">
+    <img src="./plane.png" alt="">
+
     <p>Please click on the canvas</p>
+    <a href="./demo.html">main demo</a>
+    <a href="./matrix_stack.html">matrix_stack demo</a>
+
 </body>
 </html>
diff --git a/demo/matrix_stack.html b/demo/matrix_stack.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        #game {
+            border: 2px solid #000;
+        }
+        img {
+            border: 2px solid #000;
+        }
+    </style>
+</head>
+<body>
+    <script src="./stats.js"></script>
+
+    <canvas id="game" width="500" height="500"></canvas>
+    <script type="module" src="./matrix_stack.js"></script>
+    <p id="sprite-count"></p>
+    <p>2 textures:</p>
+    <img src="./cat.png" alt="">
+    <img src="./plane.png" alt="">
+
+    <p>Please click on the canvas</p>
+    <a href="./demo.html">main demo</a>
+    <a href="./matrix_stack.html">matrix_stack demo</a>
+
+</body>
+</html>
diff --git a/demo/matrix_stack.js b/demo/matrix_stack.js
@@ -0,0 +1,73 @@
+import { Color, Rapid } from "../dist/rapid.js"
+let rapid = new Rapid({
+    canvas: document.getElementById("game"),
+    backgroundColor: Color.fromHex("FFFFFF")
+})
+const cat = await rapid.texture.textureFromUrl("./cat.png")
+const plane = await rapid.texture.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);