started compartmentlising animations 0.1

2025-09-28 06:55:25 +00:00 · 2022-03-16 00:51:43 +13:00
parent 0be69ea7c3
commit 70421f763f
15 changed files with 1270 additions and 237 deletions
--- a/Catalogue/template.html
+++ b/Catalogue/template.html
@@ -1,44 +1,51 @@
 <!DOCTYPE html>
 <html>
-  <!-- ahhh -->
-  <body>
-    <canvas
-      id="myCanvas"
-      width="1920"
-      height="1080"
-      style="border: 1px solid #d3d3d3"
-    >
-      Your browser does not support the HTML5 canvas tag.</canvas
-    >
-    <script>
-      let c = document.getElementById("myCanvas");
-      let ctx = c.getContext("2d");
+<!-- ahhh -->
+
+<body style="margin:0;overflow: hidden;">
+  <canvas id="myCanvas" width="10" height="10"
+    style="display: block;box-sizing: border-box;">
+    Your browser does not support the HTML5 canvas tag.</canvas>
+  <script>
+    let c = document.getElementById("myCanvas");
+    let ctx = c.getContext("2d");
+    ctx.canvas.width = window.innerWidth;
+    ctx.canvas.height = window.innerHeight;
+
+    let deg_per_sec = 30;
+    let time = 120;
+    let fps = 60;
+
+    centerX = ctx.canvas.width / 2;
+    centerY = ctx.canvas.height / 2;
+
+    rotation = 0; //was = j = angle
+    currentFrame = 0; //was = i


-      let deg_per_sec = 30;
-      let time = 120;
-      let fps = 60;
-
-      centerX = 1920 / 2;
-      centerY = 1080 / 2;
-
-      j = 0;
-      i = 0;
+    function render() {
+      if (currentFrame < time / (1 / fps)) {
+        setTimeout(() => {
+          render();
+          render_clear();


-      function render() {
-        if (i < time / (1 / fps)) {
-          setTimeout(() => {
-            render();
-
-            render_clear();
-          }, 1000 / fps);
-          j += (deg_per_sec * 1) / fps; //What is this?
-          i += 1;
-        }
+        }, 1000 / fps);
+        rotation += deg_per_sec / fps; // was = j = angle, now = rotation
+        currentFrame += 1; // was = i
      }
+    }

-      render();
-    </script>
-  </body>
-</html>
+    render();
+
+
+    function render_clear() {
+      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+      ctx.fillStyle = "black";
+      ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+    }
+    
+  </script>
+</body>
+
+</html>