From e27f0ce984cae130a1f0ced5c49038b4de1ef6b2 Mon Sep 17 00:00:00 2001
From: Sam <Samkleinhanss98@gmail.com>
Date: Thu, 16 Mar 2023 18:01:04 +1300
Subject: [PATCH] updates hehe
---
Catalogue/chatgpt/Spiral Accident2/index.html | 7 +
.../chatgpt/Spiral Accident2/script copy.js | 77 +++++++++
Catalogue/chatgpt/Spiral Accident2/script.js | 103 ++++++++++++
Catalogue/chatgpt/Spiral/index.html | 7 +
Catalogue/chatgpt/Spiral/script copy.js | 77 +++++++++
Catalogue/chatgpt/Spiral/script.js | 98 +++++++++++
Catalogue/chatgpt/SpiralAccident/index.html | 7 +
.../chatgpt/SpiralAccident/script copy.js | 77 +++++++++
Catalogue/chatgpt/SpiralAccident/script.js | 97 +++++++++++
Catalogue/floral.html | 3 +-
Catalogue/floralPhyllo.html | 10 +-
Catalogue/spiral.html | 159 ++++++++++++++++++
12 files changed, 717 insertions(+), 5 deletions(-)
create mode 100644 Catalogue/chatgpt/Spiral Accident2/index.html
create mode 100644 Catalogue/chatgpt/Spiral Accident2/script copy.js
create mode 100644 Catalogue/chatgpt/Spiral Accident2/script.js
create mode 100644 Catalogue/chatgpt/Spiral/index.html
create mode 100644 Catalogue/chatgpt/Spiral/script copy.js
create mode 100644 Catalogue/chatgpt/Spiral/script.js
create mode 100644 Catalogue/chatgpt/SpiralAccident/index.html
create mode 100644 Catalogue/chatgpt/SpiralAccident/script copy.js
create mode 100644 Catalogue/chatgpt/SpiralAccident/script.js
create mode 100644 Catalogue/spiral.html
diff --git a/Catalogue/chatgpt/Spiral Accident2/index.html b/Catalogue/chatgpt/Spiral Accident2/index.html
new file mode 100644
index 0000000..70ce67e
--- /dev/null
+++ b/Catalogue/chatgpt/Spiral Accident2/index.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+ <body style="margin: 0; overflow: hidden">
+ <canvas id="myCanvas" style="display: block; box-sizing: border-box"></canvas>
+ <script src="script.js"></script>
+ </body>
+</html>
diff --git a/Catalogue/chatgpt/Spiral Accident2/script copy.js b/Catalogue/chatgpt/Spiral Accident2/script copy.js
new file mode 100644
index 0000000..a6ab22a
--- /dev/null
+++ b/Catalogue/chatgpt/Spiral Accident2/script copy.js
@@ -0,0 +1,77 @@
+const canvas = document.getElementById("myCanvas");
+const ctx = canvas.getContext("2d");
+let centerX, centerY;
+
+function setCanvasSize() {
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
+ centerX = canvas.width / 2;
+ centerY = canvas.height / 2;
+}
+
+setCanvasSize();
+window.addEventListener("resize", setCanvasSize);
+
+const degPerSec = 0.00000015;
+const time = 99999999;
+const fps = 60;
+
+let rotation = 0;
+let currentFrame = 0;
+
+function render() {
+ if (currentFrame < maxTime / (1 / fps)) {
+ setTimeout(() => {
+ render();
+ clearCanvas();
+
+ drawSpiral(rotation + 1);
+
+ rotation += degPerSec * fps;
+ currentFrame++;
+ }, 1000 / fps);
+ }
+}
+render();
+
+function clearCanvas() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ ctx.fillStyle = "black";
+ ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+}
+
+function drawSpiral(angle) {
+ const startColor = [45, 129, 252];
+ const endColor = [252, 3, 98];
+ const distanceMultiplier = 2;
+ const maxIterations = 1000;
+
+ for (let n = 0; n < maxIterations; n++) {
+ const nColor = lerpRGB(startColor, endColor, Math.cos(rad(n / 2)));
+ const nAngle = n * angle + Math.sin(angle * n * 3);
+ const radius = distanceMultiplier * n;
+ const xCoord = radius * Math.cos(nAngle) + centerX;
+ const yCoord = radius * Math.sin(nAngle) + centerY;
+
+ ctx.beginPath();
+ ctx.arc(xCoord, yCoord, 8, 0, 2 * Math.PI);
+ ctx.fillStyle = colourToText(nColor);
+ ctx.fill();
+ }
+}
+
+function rad(degrees) {
+ return degrees * (Math.PI / 180);
+}
+
+function lerpRGB(a, b, t) {
+ const result = [0, 0, 0];
+ for (let i = 0; i < 3; i++) {
+ result[i] = (1 - t) * a[i] + t * b[i];
+ }
+ return result;
+}
+
+function colourToText(colour) {
+ return `rgb(${colour[0]}, ${colour[1]}, ${colour[2]})`;
+}
diff --git a/Catalogue/chatgpt/Spiral Accident2/script.js b/Catalogue/chatgpt/Spiral Accident2/script.js
new file mode 100644
index 0000000..61614c6
--- /dev/null
+++ b/Catalogue/chatgpt/Spiral Accident2/script.js
@@ -0,0 +1,103 @@
+const canvas = document.getElementById("myCanvas");
+const ctx = canvas.getContext("2d");
+let centerX, centerY;
+
+function setCanvasSize() {
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
+ centerX = canvas.width / 2;
+ centerY = canvas.height / 2;
+}
+
+setCanvasSize();
+window.addEventListener("resize", setCanvasSize);
+
+const degPerSec = 0.0000015;
+const maxTime = 99999999;
+
+let startingRotation = 0.5;
+let currentFrame = 0;
+
+let fps = 0;
+let fpsCounter = 0;
+let lastTime = 0;
+
+function render(timestamp) {
+ if (!startTime) startTime = timestamp;
+ const elapsedTime = timestamp - startTime;
+
+ clearCanvas();
+ drawSpiral(startingRotation + degPerSec * elapsedTime);
+
+ if (elapsedTime < maxTime) {
+ requestAnimationFrame(render);
+ }
+
+ displayFPS(timestamp);
+}
+let startTime = null;
+requestAnimationFrame(render);
+
+function clearCanvas() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ ctx.fillStyle = "black";
+ ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+}
+
+function drawSpiral(angle) {
+ const startColor = [45, 129, 252];
+ const endColor = [252, 3, 98];
+ const distanceMultiplier = 5;
+ const maxIterations = 200;
+ let cX = centerX;
+ let cY = centerY;
+ for (let n = 0; n < maxIterations; n++) {
+ ctx.beginPath();
+ ctx.moveTo(cX, cY);
+ const nColor = lerpRGB(startColor, endColor, Math.cos(rad(n / 2)));
+
+ const nAngle = n * angle + Math.sin(angle * (n - angle * 100) * 3);
+ const radius = distanceMultiplier * n;
+ const xCoord = radius * Math.cos(nAngle) + centerX;
+ const yCoord = radius * Math.sin(nAngle) + centerY;
+ ctx.lineTo(xCoord, yCoord);
+ cX = xCoord;
+ cY = yCoord;
+ // ctx.arc(xCoord, yCoord, 8, 0, 2 * Math.PI);
+ ctx.strokeStyle = colourToText(nColor);
+ ctx.lineWidth = 5;
+ ctx.lineCap = "round";
+ ctx.stroke();
+ }
+}
+
+function rad(degrees) {
+ return degrees * (Math.PI / 180);
+}
+
+function lerpRGB(a, b, t) {
+ const result = [0, 0, 0];
+ for (let i = 0; i < 3; i++) {
+ result[i] = (1 - t) * a[i] + t * b[i];
+ }
+ return result;
+}
+
+function displayFPS(timestamp) {
+ // Calculate FPS
+ fpsCounter++;
+ if (timestamp > lastTime + 1000) {
+ fps = Math.round((fpsCounter * 1000) / (timestamp - lastTime));
+ fpsCounter = 0;
+ lastTime = timestamp;
+ }
+
+ // Display FPS
+ ctx.fillStyle = "white";
+ ctx.font = "16px Arial";
+ ctx.fillText(`FPS: ${fps}`, 10, 30);
+}
+
+function colourToText(colour) {
+ return `rgb(${colour[0]}, ${colour[1]}, ${colour[2]})`;
+}
diff --git a/Catalogue/chatgpt/Spiral/index.html b/Catalogue/chatgpt/Spiral/index.html
new file mode 100644
index 0000000..70ce67e
--- /dev/null
+++ b/Catalogue/chatgpt/Spiral/index.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+ <body style="margin: 0; overflow: hidden">
+ <canvas id="myCanvas" style="display: block; box-sizing: border-box"></canvas>
+ <script src="script.js"></script>
+ </body>
+</html>
diff --git a/Catalogue/chatgpt/Spiral/script copy.js b/Catalogue/chatgpt/Spiral/script copy.js
new file mode 100644
index 0000000..a6ab22a
--- /dev/null
+++ b/Catalogue/chatgpt/Spiral/script copy.js
@@ -0,0 +1,77 @@
+const canvas = document.getElementById("myCanvas");
+const ctx = canvas.getContext("2d");
+let centerX, centerY;
+
+function setCanvasSize() {
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
+ centerX = canvas.width / 2;
+ centerY = canvas.height / 2;
+}
+
+setCanvasSize();
+window.addEventListener("resize", setCanvasSize);
+
+const degPerSec = 0.00000015;
+const time = 99999999;
+const fps = 60;
+
+let rotation = 0;
+let currentFrame = 0;
+
+function render() {
+ if (currentFrame < maxTime / (1 / fps)) {
+ setTimeout(() => {
+ render();
+ clearCanvas();
+
+ drawSpiral(rotation + 1);
+
+ rotation += degPerSec * fps;
+ currentFrame++;
+ }, 1000 / fps);
+ }
+}
+render();
+
+function clearCanvas() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ ctx.fillStyle = "black";
+ ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+}
+
+function drawSpiral(angle) {
+ const startColor = [45, 129, 252];
+ const endColor = [252, 3, 98];
+ const distanceMultiplier = 2;
+ const maxIterations = 1000;
+
+ for (let n = 0; n < maxIterations; n++) {
+ const nColor = lerpRGB(startColor, endColor, Math.cos(rad(n / 2)));
+ const nAngle = n * angle + Math.sin(angle * n * 3);
+ const radius = distanceMultiplier * n;
+ const xCoord = radius * Math.cos(nAngle) + centerX;
+ const yCoord = radius * Math.sin(nAngle) + centerY;
+
+ ctx.beginPath();
+ ctx.arc(xCoord, yCoord, 8, 0, 2 * Math.PI);
+ ctx.fillStyle = colourToText(nColor);
+ ctx.fill();
+ }
+}
+
+function rad(degrees) {
+ return degrees * (Math.PI / 180);
+}
+
+function lerpRGB(a, b, t) {
+ const result = [0, 0, 0];
+ for (let i = 0; i < 3; i++) {
+ result[i] = (1 - t) * a[i] + t * b[i];
+ }
+ return result;
+}
+
+function colourToText(colour) {
+ return `rgb(${colour[0]}, ${colour[1]}, ${colour[2]})`;
+}
diff --git a/Catalogue/chatgpt/Spiral/script.js b/Catalogue/chatgpt/Spiral/script.js
new file mode 100644
index 0000000..cd3381a
--- /dev/null
+++ b/Catalogue/chatgpt/Spiral/script.js
@@ -0,0 +1,98 @@
+const canvas = document.getElementById("myCanvas");
+const ctx = canvas.getContext("2d");
+let centerX, centerY;
+
+function setCanvasSize() {
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
+ centerX = canvas.width / 2;
+ centerY = canvas.height / 2;
+}
+
+setCanvasSize();
+window.addEventListener("resize", setCanvasSize);
+
+const degPerSec = 0.000005;
+const maxTime = 99999999;
+
+let startingRotation = 0.5;
+let currentFrame = 0;
+
+let fps = 0;
+let fpsCounter = 0;
+let lastTime = 0;
+
+function render(timestamp) {
+ if (!startTime) startTime = timestamp;
+ const elapsedTime = timestamp - startTime;
+
+ clearCanvas();
+ drawSpiral(startingRotation + degPerSec * elapsedTime,elapsedTime);
+
+ if (elapsedTime < maxTime) {
+ requestAnimationFrame(render);
+ }
+
+ displayFPS(timestamp);
+}
+let startTime = null;
+requestAnimationFrame(render);
+
+function clearCanvas() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ ctx.fillStyle = "black";
+ ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+}
+
+function drawSpiral(angle,elapsedTime) {
+ const startColor = [45, 129, 252];
+ const endColor = [252, 3, 98];
+ const distanceMultiplier = 3;
+ const maxIterations = 200;
+// angle=0;
+ for (let n = 0; n < maxIterations; n++) {
+ ctx.beginPath();
+ const nColor = lerpRGB(startColor, endColor, Math.cos(rad(n / 2)));
+
+ // const nAngle = n* angle ;
+ // const nAngle = n*angle+ Math.sin(rad(n*1+angle*4000))/1 ;
+ const nAngle = n*angle +Math.sin(rad(n*1+angle*40000))/2 ;
+ const radius = distanceMultiplier * n;
+ const xCoord = radius * Math.cos(nAngle) + centerX;
+ const yCoord = radius * Math.sin(nAngle) + centerY;
+ ctx.arc(xCoord, yCoord, 8, 0, 2 * Math.PI);
+ ctx.fillStyle = colourToText(nColor);
+ ctx.fill();
+ }
+}
+
+function rad(degrees) {
+ return degrees * (Math.PI / 180);
+}
+
+function lerpRGB(a, b, t) {
+ const result = [0, 0, 0];
+ for (let i = 0; i < 3; i++) {
+ result[i] = (1 - t) * a[i] + t * b[i];
+ }
+ return result;
+}
+
+function displayFPS(timestamp) {
+ // Calculate FPS
+ fpsCounter++;
+ if (timestamp > lastTime + 1000) {
+ fps = Math.round((fpsCounter * 1000) / (timestamp - lastTime));
+ fpsCounter = 0;
+ lastTime = timestamp;
+ }
+
+ // Display FPS
+ ctx.fillStyle = "white";
+ ctx.font = "16px Arial";
+ ctx.fillText(`FPS: ${fps}`, 10, 30);
+}
+
+function colourToText(colour) {
+ return `rgb(${colour[0]}, ${colour[1]}, ${colour[2]})`;
+}
diff --git a/Catalogue/chatgpt/SpiralAccident/index.html b/Catalogue/chatgpt/SpiralAccident/index.html
new file mode 100644
index 0000000..70ce67e
--- /dev/null
+++ b/Catalogue/chatgpt/SpiralAccident/index.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+ <body style="margin: 0; overflow: hidden">
+ <canvas id="myCanvas" style="display: block; box-sizing: border-box"></canvas>
+ <script src="script.js"></script>
+ </body>
+</html>
diff --git a/Catalogue/chatgpt/SpiralAccident/script copy.js b/Catalogue/chatgpt/SpiralAccident/script copy.js
new file mode 100644
index 0000000..a6ab22a
--- /dev/null
+++ b/Catalogue/chatgpt/SpiralAccident/script copy.js
@@ -0,0 +1,77 @@
+const canvas = document.getElementById("myCanvas");
+const ctx = canvas.getContext("2d");
+let centerX, centerY;
+
+function setCanvasSize() {
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
+ centerX = canvas.width / 2;
+ centerY = canvas.height / 2;
+}
+
+setCanvasSize();
+window.addEventListener("resize", setCanvasSize);
+
+const degPerSec = 0.00000015;
+const time = 99999999;
+const fps = 60;
+
+let rotation = 0;
+let currentFrame = 0;
+
+function render() {
+ if (currentFrame < maxTime / (1 / fps)) {
+ setTimeout(() => {
+ render();
+ clearCanvas();
+
+ drawSpiral(rotation + 1);
+
+ rotation += degPerSec * fps;
+ currentFrame++;
+ }, 1000 / fps);
+ }
+}
+render();
+
+function clearCanvas() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ ctx.fillStyle = "black";
+ ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+}
+
+function drawSpiral(angle) {
+ const startColor = [45, 129, 252];
+ const endColor = [252, 3, 98];
+ const distanceMultiplier = 2;
+ const maxIterations = 1000;
+
+ for (let n = 0; n < maxIterations; n++) {
+ const nColor = lerpRGB(startColor, endColor, Math.cos(rad(n / 2)));
+ const nAngle = n * angle + Math.sin(angle * n * 3);
+ const radius = distanceMultiplier * n;
+ const xCoord = radius * Math.cos(nAngle) + centerX;
+ const yCoord = radius * Math.sin(nAngle) + centerY;
+
+ ctx.beginPath();
+ ctx.arc(xCoord, yCoord, 8, 0, 2 * Math.PI);
+ ctx.fillStyle = colourToText(nColor);
+ ctx.fill();
+ }
+}
+
+function rad(degrees) {
+ return degrees * (Math.PI / 180);
+}
+
+function lerpRGB(a, b, t) {
+ const result = [0, 0, 0];
+ for (let i = 0; i < 3; i++) {
+ result[i] = (1 - t) * a[i] + t * b[i];
+ }
+ return result;
+}
+
+function colourToText(colour) {
+ return `rgb(${colour[0]}, ${colour[1]}, ${colour[2]})`;
+}
diff --git a/Catalogue/chatgpt/SpiralAccident/script.js b/Catalogue/chatgpt/SpiralAccident/script.js
new file mode 100644
index 0000000..ff80044
--- /dev/null
+++ b/Catalogue/chatgpt/SpiralAccident/script.js
@@ -0,0 +1,97 @@
+const canvas = document.getElementById("myCanvas");
+const ctx = canvas.getContext("2d");
+let centerX, centerY;
+
+function setCanvasSize() {
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
+ centerX = canvas.width / 2;
+ centerY = canvas.height / 2;
+}
+
+setCanvasSize();
+window.addEventListener("resize", setCanvasSize);
+
+const degPerSec = 0.00000015;
+const maxTime = 99999999;
+
+let startingRotation = 1;
+let currentFrame = 0;
+
+let fps = 0;
+let fpsCounter = 0;
+let lastTime = 0;
+
+function render(timestamp) {
+ if (!startTime) startTime = timestamp;
+ const elapsedTime = timestamp - startTime;
+
+ clearCanvas();
+ drawSpiral(startingRotation + degPerSec * elapsedTime);
+
+ if (elapsedTime < maxTime) {
+ requestAnimationFrame(render);
+ }
+
+ displayFPS(timestamp);
+}
+let startTime = null;
+requestAnimationFrame(render);
+
+function clearCanvas() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ ctx.fillStyle = "black";
+ ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+}
+
+function drawSpiral(angle) {
+ const startColor = [45, 129, 252];
+ const endColor = [252, 3, 98];
+ const distanceMultiplier = 2;
+ const maxIterations = 1000;
+
+ for (let n = 0; n < maxIterations; n++) {
+ const nColor = lerpRGB(startColor, endColor, Math.cos(rad(n / 2)));
+
+ const nAngle = n * angle + Math.sin(angle * n * 3);
+ const radius = distanceMultiplier * n;
+ const xCoord = radius * Math.cos(nAngle) + centerX;
+ const yCoord = radius * Math.sin(nAngle) + centerY;
+
+ ctx.beginPath();
+ ctx.arc(xCoord, yCoord, 8, 0, 2 * Math.PI);
+ ctx.fillStyle = colourToText(nColor);
+ ctx.fill();
+ }
+}
+
+function rad(degrees) {
+ return degrees * (Math.PI / 180);
+}
+
+function lerpRGB(a, b, t) {
+ const result = [0, 0, 0];
+ for (let i = 0; i < 3; i++) {
+ result[i] = (1 - t) * a[i] + t * b[i];
+ }
+ return result;
+}
+
+function displayFPS(timestamp) {
+ // Calculate FPS
+ fpsCounter++;
+ if (timestamp > lastTime + 1000) {
+ fps = Math.round((fpsCounter * 1000) / (timestamp - lastTime));
+ fpsCounter = 0;
+ lastTime = timestamp;
+ }
+
+ // Display FPS
+ ctx.fillStyle = "white";
+ ctx.font = "16px Arial";
+ ctx.fillText(`FPS: ${fps}`, 10, 30);
+}
+
+function colourToText(colour) {
+ return `rgb(${colour[0]}, ${colour[1]}, ${colour[2]})`;
+}
diff --git a/Catalogue/floral.html b/Catalogue/floral.html
index ad5f086..e58b35b 100644
--- a/Catalogue/floral.html
+++ b/Catalogue/floral.html
@@ -28,7 +28,7 @@
render();
render_clear();
- draw_floral(16, 200, rotation *0, centerX, centerY, "red");
+ draw_floral(8, 200, rotation *0, centerX, centerY, "red");
}, 1000 / fps);
@@ -50,6 +50,7 @@
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.lineWidth = 3;
ctx.stroke();
stt = end + -(rad(rot - piv)) //+rad(30);
diff --git a/Catalogue/floralPhyllo.html b/Catalogue/floralPhyllo.html
index 66be164..d9122cf 100644
--- a/Catalogue/floralPhyllo.html
+++ b/Catalogue/floralPhyllo.html
@@ -9,7 +9,7 @@
height="10"
style="display: block; box-sizing: border-box"
>
- Your browser does not support the HTML5 canvas tag.</canvas
+ Browser does not support the HTML5 canvas tag</canvas
>
<script>
let c = document.getElementById("myCanvas");
@@ -18,7 +18,7 @@
ctx.canvas.height = window.innerHeight;
//increase deg_per_sec to rotation speed
- let deg_per_sec = 1 /// 200;
+ let deg_per_sec = 1/200 /// 200;
let time = 99999999; //set this to stop the animation after x seconds (stops it running in background)
let fps = 60;
let leafWidth = 200; //leaf height is just half width
@@ -49,9 +49,11 @@
render();
render_clear();
- Draw_Phyllotaxis(Math.PI/4);
- // Draw_Phyllotaxis(rotation + 4.8);
+ // Draw_Phyllotaxis(rotation);
+ Draw_Phyllotaxis(rotation+.5);
// Draw_Phyllotaxis(rotation + 1.5);
+ // Draw_Phyllotaxis(rotation + 4.8);
+ // Draw_Phyllotaxis(Math.PI/4);
// Draw_Phyllotaxis(1.5);
// Draw_center(50); //Debugging
diff --git a/Catalogue/spiral.html b/Catalogue/spiral.html
new file mode 100644
index 0000000..c6fab11
--- /dev/null
+++ b/Catalogue/spiral.html
@@ -0,0 +1,159 @@
+<!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 / 200000;
+ let xx_per_sec = 10;
+ let time = 99999999;
+ let fps = 60;
+
+ centerX = ctx.canvas.width / 2;
+ centerY = ctx.canvas.height / 2;
+
+ let xx = 0
+ rotation = 0; //was = j = angle
+ currentFrame = 0; //was = i
+
+
+
+ function render() {
+ if (currentFrame < time / (1 / fps)) {
+ setTimeout(() => {
+ render();
+ render_clear();
+
+ // Draw_Phyllotaxis(rotation + 3.1);
+ // Draw_Phyllotaxis(rotation + 1.5);
+ Draw_Spiral(rotation +1);
+ // Draw_Phyllotaxis(rotation/5000);
+
+ // Draw_center(); //Debugging
+ // DrawBorder();
+ }, 1000 / fps);
+ rotation += deg_per_sec / fps; // was = j = angle, now = rotation
+ xx += xx_per_sec / fps; // was = j = angle, now = rotation
+ currentFrame += 1; // was = i
+ }
+ }
+
+ render();
+
+ function Draw_Spiral(angle) {
+ // colour1 = [255, 170, 0];
+ // colour2 = [255, 0, 221];
+ colour1 = [45, 129, 252];
+ colour2 = [252, 3, 98];
+
+ var c = 1; //something to do with width. but not width
+
+ for (let n = 0; n < 1000; n += 1) {
+ ncolour = LerpRGB(colour1, colour2, Math.cos(rad(n / 2)));
+ var a = n * angle + (Math.sin((angle *n*3)))
+ // var r = c * Math.sqrt(n);
+ var r = c * n;
+ var x = r * Math.cos(a) + centerX;
+ var y = r * Math.sin(a) + centerY;
+
+ ctx.beginPath();
+ ctx.arc(x, y, 8, 0, 2 * Math.PI);
+ ctx.fillStyle = colourToText(ncolour);
+ ctx.fill();
+
+ }
+ // for (let n = 0; n < 300; n += 1) {
+ // ncolour = LerpRGB(colour1, colour2, Math.cos(rad(n / 2)));
+ // var a = n * (angle)//137.5;
+ // // var r = c * Math.sqrt(n);
+ // var r = c * n;
+ // var x = r * Math.cos(a) + centerX;
+ // var y = r * Math.sin(a) + centerY;
+
+ // ctx.beginPath();
+ // ctx.arc(x, y, 8, 0, 2 * Math.PI);
+ // ctx.fillStyle = colourToText(ncolour);
+ // ctx.fill();
+
+ // }
+
+
+ }
+ function Draw_SpiralAccident(angle) {
+ // colour1 = [255, 170, 0];
+ // colour2 = [255, 0, 221];
+ colour1 = [45, 129, 252];
+ colour2 = [252, 3, 98];
+
+ var c = 2; //something to do with width. but not width
+
+ for (let n = 0; n < 300; n += 1) {
+ ncolour = LerpRGB(colour1, colour2, Math.cos(rad(n / 2)));
+ var a = n * angle + (Math.sin((n * angle) * 3))
+ // var r = c * Math.sqrt(n);
+ var r = c * n;
+ var x = r * Math.cos(a) + centerX;
+ var y = r * Math.sin(a) + centerY;
+
+ ctx.beginPath();
+ ctx.arc(x, y, 8, 0, 2 * Math.PI);
+ ctx.fillStyle = colourToText(ncolour);
+ ctx.fill();
+
+ }
+ // for (let n = 0; n < 300; n += 1) {
+ // ncolour = LerpRGB(colour1, colour2, Math.cos(rad(n / 2)));
+ // var a = n * (angle)//137.5;
+ // // var r = c * Math.sqrt(n);
+ // var r = c * n;
+ // var x = r * Math.cos(a) + centerX;
+ // var y = r * Math.sin(a) + centerY;
+
+ // ctx.beginPath();
+ // ctx.arc(x, y, 8, 0, 2 * Math.PI);
+ // ctx.fillStyle = colourToText(ncolour);
+ // ctx.fill();
+
+ // }
+
+
+ }
+ function rad(degrees) {
+ var pi = Math.PI;
+ return degrees * (pi / 180);
+ }
+
+ 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 colourToText(colour) {
+ return "rgb(" + colour[0] + "," + colour[1] + "," + colour[2] + ")"
+ }
+
+ 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