From ec6314dae2099b7f9a80ab4fbaa72a3bc84624c9 Mon Sep 17 00:00:00 2001
From: Sam <samkleinhanss98@gmail.com>
Date: Wed, 16 Mar 2022 19:33:42 +1300
Subject: [PATCH] catalogued triangle twist
---
...cular.html => floral accident spiral.html} | 0
Catalogue/floral fill.html | 97 +++++
Catalogue/foral sub.html | 122 ++++++
Catalogue/nodal expanding.html | 2 +-
...gle pattern 1.html => square pattern.html} | 0
Catalogue/triangle twist.html | 102 +++++
Catalogue/triangle.html | 6 +-
animate 0.1 (deconstructing)/animation.html | 361 ------------------
8 files changed, 325 insertions(+), 365 deletions(-)
rename Catalogue/{Flower Circular.html => floral accident spiral.html} (100%)
create mode 100644 Catalogue/floral fill.html
create mode 100644 Catalogue/foral sub.html
rename Catalogue/{rectangle pattern 1.html => square pattern.html} (100%)
create mode 100644 Catalogue/triangle twist.html
delete mode 100644 animate 0.1 (deconstructing)/animation.html
diff --git a/Catalogue/Flower Circular.html b/Catalogue/floral accident spiral.html
similarity index 100%
rename from Catalogue/Flower Circular.html
rename to Catalogue/floral accident spiral.html
diff --git a/Catalogue/floral fill.html b/Catalogue/floral fill.html
new file mode 100644
index 0000000..81fb3e3
--- /dev/null
+++ b/Catalogue/floral fill.html
@@ -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>
diff --git a/Catalogue/foral sub.html b/Catalogue/foral sub.html
new file mode 100644
index 0000000..79bc1a1
--- /dev/null
+++ b/Catalogue/foral sub.html
@@ -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>
diff --git a/Catalogue/nodal expanding.html b/Catalogue/nodal expanding.html
index 15b763e..36d9595 100644
--- a/Catalogue/nodal expanding.html
+++ b/Catalogue/nodal expanding.html
@@ -34,7 +34,7 @@
let colour1 = [137, 54, 255];
let colour2 = [158, 255, 54];
// Draw_nodal_expanding(5, 100000, rotation * 2 + 33000,0, colour1, colour2, 0.5, 2)
- Draw_nodal_expanding(5, 10000, rotation+33000, 0, colour1, colour2, 1, 1)
+ Draw_nodal_expanding(5, 10000, rotation+33000, 0, colour1, colour2, 1, 2)
}, 1000 / fps);
rotation += deg_per_sec / fps; // was = j = angle, now = rotation
diff --git a/Catalogue/rectangle pattern 1.html b/Catalogue/square pattern.html
similarity index 100%
rename from Catalogue/rectangle pattern 1.html
rename to Catalogue/square pattern.html
diff --git a/Catalogue/triangle twist.html b/Catalogue/triangle twist.html
new file mode 100644
index 0000000..bd7d699
--- /dev/null
+++ b/Catalogue/triangle twist.html
@@ -0,0 +1,102 @@
+<!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();
+
+ DrawTriangleTwist_angle(400,0,rotation,"red")
+ // DrawTriangleTwist_width(400,0,rotation,"red")
+
+ }, 1000 / fps);
+ rotation += deg_per_sec / fps; // was = j = innerRotation, now = rotation
+ currentFrame += 1; // was = i
+ }
+ }
+
+ render();
+
+
+ function DrawTriangleTwist_width(width, rotation,innerRotation, colour){
+
+ let widthMultiplier = 1 / (2 * Math.sin(Math.PI / 180 * (150 - innerRotation + 120 * Math.floor(innerRotation / 120))))
+
+ for (let i = 0; i < 25; i++) {
+ draw_triangle(180+innerRotation*i,width*widthMultiplier**i, colour)
+ }
+
+ }
+
+ function DrawTriangleTwist_angle(width, rotation,innerRotation, colour){
+ let out_angle = 0
+ let innerAngle = innerRotation - (120*Math.floor(innerRotation/120));
+
+ if (innerAngle < 60) {
+ out_angle = 120 / (2 * Math.cos(rad(innerAngle))) - 60
+ }
+ else {
+ 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))))
+
+ for (let i = 0; i < 25; i++) {
+ draw_triangle(180+out_angle*i,width*widthMultiplier**i, colour)
+ }
+
+ }
+
+
+
+
+ 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/triangle.html b/Catalogue/triangle.html
index 6cf38ef..eae2707 100644
--- a/Catalogue/triangle.html
+++ b/Catalogue/triangle.html
@@ -28,7 +28,7 @@
render();
render_clear();
- draw_triangle(0, 200)
+ draw_triangle(0, 200, "red");
}, 1000 / fps);
rotation += deg_per_sec / fps; // was = j = angle, now = rotation
@@ -38,13 +38,13 @@
render();
- function draw_triangle(ang, radius) {
+ 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 = "red";
+ ctx.strokeStyle = colour;
ctx.stroke();
}
diff --git a/animate 0.1 (deconstructing)/animation.html b/animate 0.1 (deconstructing)/animation.html
deleted file mode 100644
index a528c6a..0000000
--- a/animate 0.1 (deconstructing)/animation.html
+++ /dev/null
@@ -1,361 +0,0 @@
-<!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>
- function rad(degrees) {
- var pi = Math.PI;
- return degrees * (pi / 180);
- }
-
-
- function colourToText(colour) {
- return "rgb(" + colour[0] + "," + colour[1] + "," + colour[2] + ")"
-
- }
- function LerpRGB(a, b, t) {
-
- if (t < 0) {
- t *= -1
- }
- var newColor = [0, 0, 0];
- newColor[0] = a[0] + (b[0] - a[0]) * t;
- newColor[1] = a[1] + (b[1] - a[1]) * t;
- newColor[2] = a[2] + (b[2] - a[2]) * t;
- return newColor;
- }
-
-
- 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_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 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);
- }
-
- function draw_triangle(ang, radius) {
-
- 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 = "red";
- ctx.stroke();
- }
-
-
- var c = document.getElementById("myCanvas");
- var ctx = c.getContext("2d");
-
- var sides_org = 3;
- var r = 300;
- var deg_per_sec = 30;
- var time = 120;
- var fps = 60;
-
- var rot_org = Math.round((sides_org - 2) * 180 / sides_org * 2)
- var piv = 360 / sides_org;
- var angle = 0;
-
- centerX = 1920 / 2//1875/2;
- centerY = 1080 / 2//950/2;//-(Math.tan(30*Math.PI/180)*width/2);
-
- j = 0;
- i = 0;
-
-
- n_angle = 0
- i_angle = 0
- tmp_a = angle
- //var capturer = new CCapture( { format: 'webm' } );
- /*
- var capturer = new CCapture( {
- format: 'webm',
- framerate: 60,
- verbose: true
- } );
- */
- //capturer.start();
-
-
- /*
- function animate() {
- requestAnimationFrame( animate );
- test();
- }
- */
-
- delMe = 0
-
- function render() {
-
- if (i < time / (1 / fps)) {
- setTimeout(() => {
- render();
- //requestAnimationFrame(test);
- angle = j;
- render_clear();
- r = 400
- tmpA = (Math.asin(Math.cos(rad(angle)))) / (2 * Math.PI) + .75
- tmpB = Math.cos(rad(angle)) / 4 + 0.75
- tmpC = Math.cos(angle * (3 * Math.PI / 180)) / 4 + 0.75
- tmpD = (Math.sin(30 * Math.PI / 180)) / Math.sin((150 - (angle - 120 * Math.floor(angle / 120)) * Math.PI / 180))
- fl = angle - 120 * Math.floor(angle / 120)
-
- tmpE = 1 / (2 * Math.cos(Math.PI / 3 - (fl * Math.PI / 180)))
-
- //console.log(tmpE)
- //console.log("angle: " + angle + " tmpC: " +Math.round(tmpC * 1000) / 1000)
- /*
- console.log(Math.cos(0*(3*Math.PI/180))/4+0.75)
- console.log(Math.cos(30*(3*Math.PI/180))/4+0.75)
- console.log(Math.cos(60*(3*Math.PI/180))/4+0.75)
- console.log(Math.cos(180*(3*Math.PI/180))/4+0.75)
- */
- s = 400
- speed_mult = 1
- tmpF = 1 / (2 * Math.sin(Math.PI / 180 * (150 - angle * speed_mult + 120 * Math.floor(angle * speed_mult / 120))))
-
- tmpAng = n_angle
- fl1 = (n_angle - 2 * Math.PI / 3 * (Math.floor(3 * n_angle / (2 * Math.PI))))
- t1 = Math.abs(Math.sin(Math.PI / 3 - fl1) / (2 * (Math.cos(Math.PI / 3 - fl1)) ** 2))
-
- n_angle += 1 / (t1 + 1)
-
- new_angle = -120 * tmpF + 120
- tmpG = 1 / (2 * Math.sin(Math.PI / 180 * (150 - angle * speed_mult + 120 * Math.floor(angle * speed_mult / 120))))
-
- //console.log("angle: " + t1 + " | fl1 : "+ fl1)
- angle_accident = 120 * Math.floor(angle * speed_mult / 120)
-
- out_angle = 0
-
- i_angle += angle - tmp_a
- tmp_a = angle
- if (i_angle > 120) {
- i_angle -= 120
-
- }
-
- if (i_angle < 60) {
- out_angle = 120 / (2 * Math.cos(rad(i_angle))) - 60
-
- }
- else {
- out_angle = -120 / (2 * Math.cos(2 * Math.PI / 3 - (i_angle * Math.PI / 180))) + 180
- }
- //console.log("angle: " + i_angle + " | out A: " + out_angle)
- tmpFinal = 1 / (2 * Math.sin(Math.PI / 180 * (150 - out_angle * speed_mult + 120 * Math.floor(out_angle * speed_mult / 120))))
- //console.log(400*tmpFinal-delMe)
- delMe = 400 * tmpFinal
- //draw_triangle(180+0,s)
-
- //draw_triangle(180+angle*speed_mult,s*tmpF)
-
- //draw_triangle(180+out_angle*speed_mult,s*tmpFinal)
- //draw_triangle(180+new_angle*speed_mult,s*tmpG)
-
-
- for (let i = 0; i < 25; i++) {
- draw_triangle(180+out_angle*speed_mult*i,s*tmpFinal**i)
- //draw_triangle(180+angle*speed_mult*i,s*tmpF**i)
-
- }
-
- height = 400
- L = height / 2 * (Math.asin(Math.cos(angle * Math.PI / height)) / Math.PI) + height * 3 / 4
- L2 = -(.5 * angle - height * Math.floor(angle / (height * 2))) + height
- B = rad(180) - Math.asin(height * Math.sin(rad(30)) / L2)
- theFinalAngle = rad(150) - B
- console.log("L :" + L2 + " | B: " + B * 180 / Math.PI)
- //draw_triangle(180+ (theFinalAngle*180/Math.PI) ,L)
-
- //draw_triangle((angle-180)/2.8,tmpA*400)
- //draw_shape(7,300,0,centerX,centerY,"red");
- //draw_shape_sub(7,300,0,centerX,centerY,"blue");
- //draw_shape_fill(5,300,angle,centerX,centerY,"purple");
- /*
- draw_shape_fill(5,300,angle,centerX,centerY,"purple");
- draw_shape_fill(5,115,-(angle+108),centerX,centerY,"red");
- draw_shape_fill(5,44,angle+108,centerX,centerY,"yellow");
-
- draw_shape(5,300,angle,centerX,centerY,"red");
- draw_shape(5,115,-(angle+108),centerX,centerY,"yellow");
- draw_shape(5,44,angle+108,centerX,centerY,"purple");
- */
- //Draw_Spiral(4,400,0,centerX,centerY,'red');
- //Draw_Spiral_Pattern(50, 250, angle, centerX, centerY, 'red')
- //Draw_Shape_accident(4,300,angle,centerX,centerY,'red')
- //Draw_Spiral(10,400,-angle,centerX,centerY,'red');
-
- //draw_shape(99,300,angle,centerX,centerY,"red");
- //draw_triangle(0);
-
- //draw_tri(angle);
-
- //draw_test_fill(angle);
-
- //draw_shape(5,300,angle,centerX,centerY);
- //draw_shape(3,300,-angle,centerX,centerY)
-
- //draw_shape(7,400,angle,centerX,centerY)
- //draw_shape(6,r,-angle,centerX,centerY)
-
-
- /*
- colour1 = [137, 54, 255];
- colour2 = [158, 255, 54];
- ncolour = LerpRGB(colour1, colour2, Math.cos(rad(angle)));
- */
-
- colour1 = [137, 54, 255];
- colour2 = [158, 255, 54];
- //Draw_nodal_expanding(2.5,100000,angle*2+33000,angle*0, colour1,colour2,0.5, 5)
- //Draw_nodal_expanding(2.5,10000,angle,angle*0, colour1,colour2,0.5, 1)
- //console.log(angle*2)
- //draw_shape(55,300,angle,centerX,centerY,"pink")
- //Draw_Phyllotaxis(angle/5000+1);
- //draw_shape_fill(4,400,angle,centerX,centerY,colourToText(ncolour));
-
-
-
-
-
-
- //capturer.capture( document.getElementById("myCanvas") );
-
- }, (1000 / fps));
- j += deg_per_sec * 1 / fps;
- i += 1;
- }
- else {
- //capturer.stop();
- //capturer.save();
- }
- }
-
- render()
- //render_clear()
- //Draw_nodal(500, 100,33)
- //draw_shape_fill(5,300,angle,centerX,centerY,"purple");
- //draw_shape_fill(5,115,angle+108,centerX,centerY,"red");
- //draw_shape(5,300,angle,centerX,centerY);
- //Draw_center();
-
-
-
-
-
-
- function Draw_nodal(radius, points, step, rotate, colour) { //catalogued
- var angle = 360 / points * step
- ctx.beginPath();
- var start_angle = angle;
- var done = false;
- var total_moves = 1;
- ctx.moveTo(centerX + (Math.cos(rad(angle + rotate)) * radius), centerY + (Math.sin(rad(angle + rotate)) * radius));
-
- while (done != true) {
- if ((total_moves * step) % points != 0) {
- total_moves++
- }
- else {
- total_moves++
- done = true
- }
- }
- for (let z = 1; z <= total_moves; z++) {
- ctx.lineTo(centerX + (Math.cos(rad(angle * z + rotate)) * radius), centerY + (Math.sin(rad(angle * z + rotate)) * radius));
- }
- ctx.strokeStyle = colour;
- ctx.stroke();
-
- }
-
- function Draw_rectangle_pattern1(angle, size, colour) { //catalogued
- ctx.save();
- ctx.translate(centerX, centerY)//-(Math.sin(rad(angle)) *centerX));
- ctx.rotate(rad(angle + 180));
- ctx.beginPath();
- ctx.strokeStyle = colour;
- ctx.rect(-size, -size, size, size);
- ctx.stroke();
- ctx.restore();
-
- }
-
-
- function Draw_center() {
- ctx.beginPath();
- ctx.moveTo(centerX - 100, centerY);
- ctx.lineTo(centerX + 100, centerY);
- ctx.moveTo(centerX, centerY - 100);
- ctx.lineTo(centerX, centerY + 100);
- ctx.strokeStyle = "red";
- ctx.stroke();
-
- }
-
-
-
- </script>
-
-</body>
-
-</html>
\ No newline at end of file