catalogued triangle twist

2025-09-28 15:05: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/floral
+++ b/Catalogue/floral
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+  <!-- 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
+
+      function render() {
+        if (currentFrame < time / (1 / fps)) {
+          setTimeout(() => {
+            render();
+            render_clear();
+
+            draw_shape_fill(4, 200, rotation, centerX, centerY, "blue")
+
+
+          }, 1000 / fps);
+          rotation += deg_per_sec / fps; // was = j = angle, now = rotation
+          currentFrame += 1; // was = i
+        }
+      }
+
+      render();
+
+      function draw_shape_fill(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;
+        var n = radius / ((radius / 10) * (radius / 10)); //pixel correction for mid leaf
+
+        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 - (stt - end) / 2,
+            end + rad(n),
+            0
+          );
+          ctx.fillStyle = colour;
+          ctx.fill();
+
+          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 - (end - stt) / 2 + rad(n),
+            0
+          );
+          ctx.fillStyle = colour;
+          ctx.fill();
+
+          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>