technicalkiwi
/
animate
mirror of https://github.com/SamEyeBam/animate.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

updates hehe

This commit is contained in:
Sam 2023-03-16 18:01:04 +13:00
parent 483744ea36
commit e27f0ce984
12 changed files with 717 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
Catalogue/chatgpt/Spiral Accident2/index.html Normal file
View File

@ -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>

77
Catalogue/chatgpt/Spiral Accident2/script copy.js Normal file
View File

@ -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]})`;
}

103
Catalogue/chatgpt/Spiral Accident2/script.js Normal file
View File

@ -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]})`;
}

7
Catalogue/chatgpt/Spiral/index.html Normal file
View File

@ -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>

77
Catalogue/chatgpt/Spiral/script copy.js Normal file
View File

@ -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]})`;
}

98
Catalogue/chatgpt/Spiral/script.js Normal file
View File

@ -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]})`;
}

7
Catalogue/chatgpt/SpiralAccident/index.html Normal file
View File

@ -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>

77
Catalogue/chatgpt/SpiralAccident/script copy.js Normal file
View File

@ -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]})`;
}

97
Catalogue/chatgpt/SpiralAccident/script.js Normal file
View File

@ -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]})`;
}

3
Catalogue/floral.html
View File

@ -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);

10
Catalogue/floralPhyllo.html
View File

@ -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

159
Catalogue/spiral.html Normal file
View File

@ -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>