diff --git a/Catalogue/Screenshot 2022-03-20 212123.png b/Catalogue/Screenshot 2022-03-20 212123.png
new file mode 100644
index 0000000..128a5a4
Binary files /dev/null and b/Catalogue/Screenshot 2022-03-20 212123.png differ
diff --git a/Catalogue/Screenshot 2022-03-20 212148.png b/Catalogue/Screenshot 2022-03-20 212148.png
new file mode 100644
index 0000000..cfadb18
Binary files /dev/null and b/Catalogue/Screenshot 2022-03-20 212148.png differ
diff --git a/Catalogue/Square answer.png b/Catalogue/Square answer.png
new file mode 100644
index 0000000..18cf30a
Binary files /dev/null and b/Catalogue/Square answer.png differ
diff --git a/Catalogue/floral.html b/Catalogue/floral.html
index 1983404..ad5f086 100644
--- a/Catalogue/floral.html
+++ b/Catalogue/floral.html
@@ -28,7 +28,7 @@
           render();
           render_clear();
 
-          draw_floral(9, 200, rotation *0, centerX, centerY, "red");
+          draw_floral(16, 200, rotation *0, centerX, centerY, "red");
           
 
         }, 1000 / fps);
diff --git a/Catalogue/npoly twist - accident.html b/Catalogue/npoly twist - accident.html
new file mode 100644
index 0000000..ddad426
--- /dev/null
+++ b/Catalogue/npoly twist - accident.html	
@@ -0,0 +1,141 @@
+<!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();
+
+          DrawSquareTwist_width(7,400,0,rotation,"red")
+          // DrawSquareTwist_angle(3,400,0,rotation,"red")
+          
+        }, 1000 / fps);
+        rotation += deg_per_sec / fps; // was = j = innerRotation, now = rotation
+        currentFrame += 1; // was = i
+      }
+    }
+
+    render();
+
+
+    function DrawSquareTwist_angle(sides,width, rotation,innerRotation, colour){
+      let out_angle = innerRotation;
+      // let widthMultiplier = 169 / (239 * Math.sin(Math.PI / 180 * (135 - out_angle + 90 * Math.floor(out_angle / 90))))
+      // let widthMultiplier = Math.sqrt(0.5) * 1/ (Math.sin(Math.PI / 180 * (135 - out_angle + 90 * Math.floor(out_angle / 90))))
+      let widthMultiplier = Math.sqrt(0.5) * 1/ (Math.sin(Math.PI / 180 * (135 - out_angle + 90 * Math.floor(out_angle / 90))))
+
+      for (let i = 0; i < 25; i++) {
+        DrawPolygon(sides,width*widthMultiplier**i,innerRotation*i, colour)
+      } 
+
+    }
+    function DrawSquareTwist_width(sides,width, rotation,innerRotation, colour){
+      // if(innerRotation >59){
+      //   innerRotation=59
+      // }
+
+      let out_angle = 0
+      let innerAngle = 180 - ((sides-2) *180/sides);
+      // console.log(innerAngle);
+      let scopeAngle = innerRotation - (innerAngle*Math.floor(innerRotation/innerAngle));
+      
+      
+
+      if (scopeAngle < innerAngle/2) {
+        out_angle = innerAngle / (2 * Math.cos((2*Math.PI*scopeAngle)/(3*innerAngle))) - innerAngle/2
+      }
+      else {
+        out_angle = -innerAngle / (2 * Math.cos( ((2*Math.PI)/3) - ((2*Math.PI*scopeAngle)/(3*innerAngle))) ) + (innerAngle*3)/2
+      }
+      let minWidth = Math.sin(rad(innerAngle/2))*(0.5/Math.tan(rad(innerAngle/2)))*2;
+      console.log(minWidth);
+      // let widthMultiplier = 169 / (239 * Math.sin(Math.PI / 180 * (135 - out_angle + 90 * Math.floor(out_angle / 90))))
+      // let widthMultiplier = Math.sqrt(0.5) * 1/ (Math.sin(Math.PI / 180 * (((innerAngle/2)*3) - out_angle + innerAngle * Math.floor(out_angle / innerAngle))))
+
+      // let widthMultiplier = 1 / (2 * Math.sin(Math.PI / 180 * (150 - out_angle + 120 * Math.floor(out_angle / 120)))) //triangle
+      let widthMultiplier = minWidth / Math.sin(Math.PI / 180 * (90+innerAngle/2 - out_angle + innerAngle * Math.floor(out_angle / innerAngle))) //triangle
+      console.log(innerRotation + ": " + out_angle);
+      for (let i = 0; i < 25; i++) {
+        DrawPolygon(sides,width*widthMultiplier**i,out_angle*i, colour)
+        // draw_triangle(180+out_angle*i,width*widthMultiplier**i, colour)
+      } 
+
+    }
+    function DrawPolygon(sides, width, rotation, colour) {
+      ctx.beginPath();
+      ctx.moveTo(centerX + width * Math.cos(((rotation*4)*Math.PI/180) / sides), centerY + width * Math.sin(((rotation*4)*Math.PI/180) / sides));
+
+      for (var i = 1; i <= sides; i += 1) {
+        ctx.lineTo(
+          centerX + width * Math.cos((i * 2 * Math.PI +((rotation*4)*Math.PI/180)) / sides),
+          centerY + width * Math.sin((i * 2 * Math.PI +((rotation*4)*Math.PI/180)) / sides)
+        );
+      }
+
+      ctx.strokeStyle = colour;
+      ctx.lineWidth = 1;
+      ctx.stroke();
+    }
+
+    
+    function drawSquare(angle,size, colour) {
+      ctx.save();
+      ctx.translate(centerX, centerY)//-(Math.sin(rad(angle)) *centerX));
+      ctx.rotate(rad(angle + 180));
+      ctx.beginPath();
+      ctx.strokeStyle = colour;
+      ctx.rect(-size/2, -size/2, size, size);
+      ctx.stroke();
+      ctx.restore();
+      }
+
+    function draw_triangle(ang, radius, colour) {
+      ctx.beginPath();
+      ctx.moveTo(centerX + Math.cos(rad(90 + 120 * 1 + ang)) * radius, centerY + Math.sin(rad(90 + 120 * 1 + ang)) * radius);
+      ctx.lineTo(centerX + Math.cos(rad(90 + 120 * 2 + ang)) * radius, centerY + Math.sin(rad(90 + 120 * 2 + ang)) * radius);
+      ctx.lineTo(centerX + Math.cos(rad(90 + 120 * 3 + ang)) * radius, centerY + Math.sin(rad(90 + 120 * 3 + ang)) * radius);
+      ctx.lineTo(centerX + Math.cos(rad(90 + 120 * 1 + ang)) * radius, centerY + Math.sin(rad(90 + 120 * 1 + ang)) * radius);
+      ctx.strokeStyle = colour;
+      ctx.stroke();
+    }
+
+    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>
\ No newline at end of file
diff --git a/Catalogue/npoly twist.html b/Catalogue/npoly twist.html
new file mode 100644
index 0000000..a7773c3
--- /dev/null
+++ b/Catalogue/npoly twist.html	
@@ -0,0 +1,109 @@
+<!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();
+
+          DrawPolyTwist_width(3,400,-90,rotation,"red")
+          // DrawSquareTwist_angle(3,400,0,rotation,"red")
+          
+        }, 1000 / fps);
+        rotation += deg_per_sec / fps; // was = j = innerRotation, now = rotation
+        currentFrame += 1; // was = i
+      }
+    }
+
+    render();
+
+
+    function DrawSquareTwist_angle(sides,width, rotation,innerRotation, colour){
+      let out_angle = innerRotation;
+      // let widthMultiplier = 169 / (239 * Math.sin(Math.PI / 180 * (135 - out_angle + 90 * Math.floor(out_angle / 90))))
+      // let widthMultiplier = Math.sqrt(0.5) * 1/ (Math.sin(Math.PI / 180 * (135 - out_angle + 90 * Math.floor(out_angle / 90))))
+      let widthMultiplier = Math.sqrt(0.5) * 1/ (Math.sin(Math.PI / 180 * (135 - out_angle + 90 * Math.floor(out_angle / 90))))
+
+      for (let i = 0; i < 25; i++) {
+        DrawPolygon(sides,width*widthMultiplier**i,innerRotation*i, colour)
+      } 
+
+      
+    function DrawPolyTwist_width(sides,width, rotation,innerRotation, colour){
+      let out_angle = 0
+      let innerAngle = 180 - ((sides-2) *180/sides);
+      let scopeAngle = innerRotation - (innerAngle*Math.floor(innerRotation/innerAngle));
+
+      if (scopeAngle < innerAngle/2) {
+        out_angle = innerAngle / (2 * Math.cos((2*Math.PI*scopeAngle)/(3*innerAngle))) - innerAngle/2
+      }
+      else {
+        out_angle = -innerAngle / (2 * Math.cos( ((2*Math.PI)/3) - ((2*Math.PI*scopeAngle)/(3*innerAngle))) ) + (innerAngle*3)/2
+      }
+      let minWidth = Math.sin(rad(innerAngle/2))*(0.5/Math.tan(rad(innerAngle/2)))*2;
+      
+      let widthMultiplier = minWidth / Math.sin(Math.PI / 180 * (90+innerAngle/2 - out_angle + innerAngle * Math.floor(out_angle / innerAngle)))
+
+      for (let i = 0; i < 25; i++) {
+        DrawPolygon(sides,width*widthMultiplier**i,out_angle*i+rotation, colour)
+      } 
+
+    }
+    function DrawPolygon(sides, width, rotation, colour) {
+      ctx.beginPath();
+      ctx.moveTo (centerX +  width * Math.cos(rotation*Math.PI/180), centerY +  width *  Math.sin(rotation*Math.PI/180)); 
+
+      for (var i = 1; i <= sides; i += 1) {
+        ctx.lineTo(
+          centerX + width * Math.cos(i * 2 * Math.PI / sides + (rotation*Math.PI/180)),
+          centerY + width * Math.sin(i * 2 * Math.PI / sides + (rotation*Math.PI/180))
+        );
+      }
+
+      ctx.strokeStyle = colour;
+      ctx.lineWidth = 1;
+      ctx.stroke();
+    }
+
+    
+
+    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>
\ No newline at end of file
diff --git a/Catalogue/npolygon.html b/Catalogue/npolygon.html
new file mode 100644
index 0000000..72a2e45
--- /dev/null
+++ b/Catalogue/npolygon.html
@@ -0,0 +1,71 @@
+<!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();
+
+            DrawPolygon(4, 300, rotation, "red");
+          }, 1000 / fps);
+          rotation += deg_per_sec / fps; // was = j = angle, now = rotation
+          currentFrame += 1; // was = i
+        }
+      }
+
+      render();
+
+      function DrawPolygon(sides, width, rotation, colour) {
+        ctx.beginPath();
+        ctx.moveTo(
+          centerX + width * Math.cos((rotation * Math.PI) / 180),
+          centerY + width * Math.sin((rotation * Math.PI) / 180)
+        );
+
+        for (var i = 1; i <= sides; i += 1) {
+          ctx.lineTo(
+            centerX + width * Math.cos( (i * 2 * Math.PI) / sides + (rotation * Math.PI) / 180 ),
+            centerY + width * Math.sin( (i * 2 * Math.PI) / sides + (rotation * Math.PI) / 180 )
+            );
+        }
+
+        ctx.strokeStyle = colour;
+        ctx.lineWidth = 1;
+        ctx.stroke();
+      }
+
+      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>
diff --git a/Catalogue/poly last notes might delete.png b/Catalogue/poly last notes might delete.png
new file mode 100644
index 0000000..3ba1540
Binary files /dev/null and b/Catalogue/poly last notes might delete.png differ
diff --git a/Catalogue/square accident.html b/Catalogue/square accident.html
new file mode 100644
index 0000000..42c6aa0
--- /dev/null
+++ b/Catalogue/square accident.html	
@@ -0,0 +1,81 @@
+<!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();
+
+          DrawSquareTwist_angle(400,0,rotation,"red")
+         
+        }, 1000 / fps);
+        rotation += deg_per_sec / fps; // was = j = innerRotation, now = rotation
+        currentFrame += 1; // was = i
+      }
+    }
+
+    render();
+
+
+
+function DrawSquareTwist_angle(width, rotation,innerRotation, colour){
+    let out_angle = innerRotation;
+    let widthMultiplier = 1 / (2 * Math.sin(Math.PI / 180 * (130 - out_angle + 90 * Math.floor(out_angle / 90))))+0.5
+
+    for (let i = 0; i < 25; i++) {
+      drawSquare(innerRotation*i,width*widthMultiplier**i, colour)
+    } 
+
+  }
+
+  function drawSquare(angle,size, colour) {
+    ctx.save();
+    ctx.translate(centerX, centerY)//-(Math.sin(rad(angle)) *centerX));
+    ctx.rotate(rad(angle + 180));
+    ctx.beginPath();
+    ctx.strokeStyle = colour;
+    ctx.rect(-size/2, -size/2, size, size);
+    ctx.stroke();
+    ctx.restore();
+    }
+
+    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>
\ No newline at end of file
diff --git a/Catalogue/square answer simplified.png b/Catalogue/square answer simplified.png
new file mode 100644
index 0000000..66edbdb
Binary files /dev/null and b/Catalogue/square answer simplified.png differ
diff --git a/Catalogue/triangle twist.html b/Catalogue/triangle twist.html
index bd7d699..3994d66 100644
--- a/Catalogue/triangle twist.html	
+++ b/Catalogue/triangle twist.html	
@@ -2,7 +2,7 @@
 <html>
 <!-- ahhh -->
 
-<body style="margin:0;overflow: hidden;">
+<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>
@@ -29,8 +29,8 @@
           render();
           render_clear();
 
-          DrawTriangleTwist_angle(400,0,rotation,"red")
-          // DrawTriangleTwist_width(400,0,rotation,"red")
+          // DrawTriangleTwist_angle(400,0,rotation,"red")
+          DrawTriangleTwist_width(400,0,rotation,"red")
 
         }, 1000 / fps);
         rotation += deg_per_sec / fps; // was = j = innerRotation, now = rotation
@@ -41,9 +41,10 @@
     render();
 
 
-    function DrawTriangleTwist_width(width, rotation,innerRotation, colour){
-         
-      let widthMultiplier = 1 / (2 * Math.sin(Math.PI / 180 * (150 - innerRotation + 120 * Math.floor(innerRotation / 120))))
+    function DrawTriangleTwist_angle(width, rotation,innerRotation, colour){
+      let out_angle = innerRotation;
+      // let widthMultiplier = 1 / (2 * Math.sin(Math.PI / 180 * (150 - innerRotation + 120 * Math.floor(innerRotation / 120))))
+      let widthMultiplier = 1 / (2 * Math.sin(Math.PI / 180 * (150 - out_angle + 120 * Math.floor(out_angle / 120))))
 
       for (let i = 0; i < 25; i++) {
         draw_triangle(180+innerRotation*i,width*widthMultiplier**i, colour)
@@ -51,7 +52,7 @@
 
     }
 
-    function DrawTriangleTwist_angle(width, rotation,innerRotation, colour){
+    function DrawTriangleTwist_width(width, rotation,innerRotation, colour){
       let out_angle = 0
       let innerAngle = innerRotation - (120*Math.floor(innerRotation/120));
       
@@ -62,7 +63,7 @@
         out_angle = -120 / (2 * Math.cos(2 * Math.PI / 3 - (innerAngle * Math.PI / 180))) + 180
       }
 
-      let widthMultiplier = 1 / (2 * Math.sin(Math.PI / 180 * (150 - out_angle + 120 * Math.floor(out_angle / 120))))
+      let widthMultiplier = 1 / (2 * Math.sin(Math.PI / 180 * (150 - out_angle + 120 * Math.floor(out_angle / 120)))) //150 = 90+innerangle/2
       
       for (let i = 0; i < 25; i++) {
         draw_triangle(180+out_angle*i,width*widthMultiplier**i, colour)
@@ -70,9 +71,6 @@
 
     }
 
-    
-
-
     function draw_triangle(ang, radius, colour) {
       ctx.beginPath();
       ctx.moveTo(centerX + Math.cos(rad(90 + 120 * 1 + ang)) * radius, centerY + Math.sin(rad(90 + 120 * 1 + ang)) * radius);
