catalogued triangle twist

2025-09-28 06:55:25 +00:00 · 2022-03-16 19:33:42 +13:00
parent 70421f763f
commit ec6314dae2
8 changed files with 325 additions and 365 deletions
--- a/Catalogue/foral
+++ b/Catalogue/foral
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html>
+  <!-- ahhh -->
+
+  <body style="margin: 0;">
+    <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
+
+      function render() {
+        if (currentFrame < time / (1 / fps)) {
+          setTimeout(() => {
+            render();
+            render_clear();
+
+            draw_floral(11, 200, rotation *0, centerX, centerY, "red"); //used as an example
+            draw_shape_sub(11, 200, 0, centerX, centerY, "blue");
+          }, 1000 / fps);
+          rotation += deg_per_sec / fps; // was = j = angle, now = rotation
+          currentFrame += 1; // was = i
+        }
+      }
+
+      render();
+
+      function draw_shape_sub(sides, radius, rotation, x, y, colour) {
+        var denominator = sides - 2;
+        //var rot = Math.round((sides - 2) * 180 / sides * 2)
+        var rot =
+          Math.round((((sides - 2) * 180) / sides) * 2) * (1 / denominator);
+        var piv = 360 / sides;
+        var l = 1;
+        var stt = 0.5 * Math.PI - rad(rot) * l + rad(rotation);
+        var end = 0;
+
+        for (let i = 1; i < sides + 1; i++) {
+          end = stt + rad(rot);
+          ctx.beginPath();
+          ctx.arc(
+            x + Math.cos(rad(90 + piv * i + rotation)) * radius,
+            y + Math.sin(rad(90 + piv * i + rotation)) * radius,
+            radius,
+            stt,
+            end,
+            0
+          );
+          ctx.strokeStyle = colour;
+          ctx.stroke();
+
+          ctx.beginPath();
+          ctx.arc(
+            x + Math.cos(rad(90 + piv * i + rotation)) * radius,
+            y + Math.sin(rad(90 + piv * i + rotation)) * radius,
+            radius,
+            stt - rad(rot) * l,
+            end - rad(rot) * l,
+            0
+          );
+          ctx.strokeStyle = colour;
+          ctx.stroke();
+
+          stt = end + -rad(rot - piv); //+rad(30);
+        }
+      }
+
+      function draw_floral(sides, radius, rotation, x, y, colour) {
+        var rot = Math.round((((sides - 2) * 180) / sides) * 2);
+        var piv = 360 / sides;
+        var stt = 0.5 * Math.PI - rad(rot) + rad(rotation);
+        var end = 0;
+
+        for (let i = 1; i < sides + 1; i++) {
+          end = stt + rad(rot);
+          ctx.beginPath();
+          ctx.arc(
+            x + Math.cos(rad(90 + piv * i + rotation)) * radius,
+            y + Math.sin(rad(90 + piv * i + rotation)) * radius,
+            radius,
+            stt,
+            end,
+            0
+          );
+          ctx.strokeStyle = colour;
+          ctx.stroke();
+
+          stt = end + -rad(rot - piv); //+rad(30);
+        }
+      }
+
+      function rad(degrees) {
+        var pi = Math.PI;
+        return degrees * (pi / 180);
+      }
+
+      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>