technicalkiwi/animate
1
0
Fork 0
mirror of https://github.com/SamEyeBam/animate.git synced 2025-09-27 22:45:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

allinone started

Browse Source
This commit is contained in:
Sam
2023-03-21 18:23:52 +13:00
parent e27f0ce984
commit c15e5b1722
21 changed files with 774 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
Catalogue/chatgpt/Spiral Accident2/index.html → Catalogue/Spiral Accident2/index.html
View File

0
Catalogue/chatgpt/Spiral Accident2/script copy.js → Catalogue/Spiral Accident2/script copy.js
View File

0
Catalogue/chatgpt/Spiral Accident2/script.js → Catalogue/Spiral Accident2/script.js
View File

0
Catalogue/chatgpt/Spiral/index.html → Catalogue/Spiral/index.html
View File

0
Catalogue/chatgpt/Spiral/script copy.js → Catalogue/Spiral/script copy.js
View File

0
Catalogue/chatgpt/Spiral/script.js → Catalogue/Spiral/script.js
View File

0
Catalogue/chatgpt/SpiralAccident/index.html → Catalogue/SpiralAccident/index.html
View File

0
Catalogue/chatgpt/SpiralAccident/script copy.js → Catalogue/SpiralAccident/script copy.js
View File

0
Catalogue/chatgpt/SpiralAccident/script.js → Catalogue/SpiralAccident/script.js
View File

4
Catalogue/floralPhyllo.html
View File

@@ -50,7 +50,7 @@
render_clear();
// Draw_Phyllotaxis(rotation);
Draw_Phyllotaxis(rotation+.5);
Draw_FloralPhyllo(rotation+.5);
// Draw_Phyllotaxis(rotation + 1.5);
// Draw_Phyllotaxis(rotation + 4.8);
// Draw_Phyllotaxis(Math.PI/4);
@@ -70,7 +70,7 @@
render();
function Draw_Phyllotaxis(angle) {
function Draw_FloralPhyllo(angle) {
// var c = 24; //something to do with width. but not width
var c = 1; //something to do with width. but not width

4
Catalogue/npoly twist.html
View File

@@ -31,9 +31,9 @@
render_clear();
colour2 = [255, 0, 0];
colour1 = [0, 0, 0];
colour1 = [0, 255, 0];
DrawPolyTwistColour_angle(8,400,-90,rotation/10,colour1, colour2)
DrawPolyTwistColour_width(4,400,-90,rotation/10,colour1, colour2)
// DrawPolyTwist_angle(15,400,-90,rotation/20,"red")
// DrawPolyTwistColour_width(4,400,-45,rotation/4,colour1,colour2)
// DrawPolyTwist_width(10,400,-90,rotation/20,"red")

159
Catalogue/spiral.html
View File

@@ -1,159 +0,0 @@
<!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>

21
Catalogue/unknown/index.html Normal file
View File

@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reaction-Diffusion Animation</title>
<style>
body {
margin: 0;
overflow: hidden;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="script.js"></script>
</body>
</html>

156
Catalogue/unknown/script.js Normal file
View File

@@ -0,0 +1,156 @@
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
canvas.width = 500; //window.innerWidth;
canvas.height = 500; //window.innerHeight;
let gridSizeX = canvas.width;
let gridSizeY = canvas.height;
let gridA = create2DArray(gridSizeX, gridSizeY);
let gridB = create2DArray(gridSizeX, gridSizeY);
let nextGridA = create2DArray(gridSizeX, gridSizeY);
let nextGridB = create2DArray(gridSizeX, gridSizeY);
function create2DArray(rows, cols) {
let arr = new Array(rows);
for (let i = 0; i < rows; i++) {
arr[i] = new Array(cols).fill(0);
}
return arr;
}
function seedGrid() {
for (let i = 0; i < gridSizeX; i++) {
for (let j = 0; j < gridSizeY; j++) {
gridA[i][j] = 1;
gridB[i][j] = Math.random() < 0.1 ? 0.5 : 0;
}
}
}
seedGrid();
let dA = 1;
let dB = 0.5;
let feed = 0.055;
let kill = 0.062;
function updateGrid() {
const centerX = gridSizeX / 2;
const centerY = gridSizeY / 2;
const radialFlowStrength = 0.01;
let tempGridA = create2DArray(gridSizeX, gridSizeY);
let tempGridB = create2DArray(gridSizeX, gridSizeY);
for (let x = 1; x < gridSizeX - 1; x++) {
for (let y = 1; y < gridSizeY - 1; y++) {
let deltaX = x - centerX;
let deltaY = y - centerY;
let distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
let flowFactor = radialFlowStrength * (distance + 1);
let dx = Math.round(deltaX * flowFactor);
let dy = Math.round(deltaY * flowFactor);
let sourceX = (x + Math.abs(dx) % gridSizeX) % gridSizeX;
let sourceY = (y + Math.abs(dy) % gridSizeY) % gridSizeY;
tempGridA[x][y] = gridA[sourceX][sourceY];
tempGridB[x][y] = gridB[sourceX][sourceY];
}
}
for (let x = 1; x < gridSizeX - 1; x++) {
for (let y = 1; y < gridSizeY - 1; y++) {
let a = tempGridA[x][y];
let b = tempGridB[x][y];
nextGridA[x][y] = a + (dA * laplaceA(x, y)) - (a * b * b) + (feed * (1 - a));
nextGridB[x][y] = b + (dB * laplaceB(x, y)) + (a * b * b) - ((kill + feed) * b);
nextGridA[x][y] = Math.min(Math.max(nextGridA[x][y], 0), 1);
nextGridB[x][y] = Math.min(Math.max(nextGridB[x][y], 0), 1);
}
}
let temp = gridA;
gridA = nextGridA;
nextGridA = temp;
temp = gridB;
gridB = nextGridB;
nextGridB = temp;
}
function laplaceA(x, y) {
let sum = 0;
let weights = [
[0.05, 0.2, 0.05],
[0.2, -1, 0.2],
[0.05, 0.2, 0.05],
];
for (let i = -1; i < 2; i++) {
for (let j = -1; j < 2; j++) {
let row = (x + i + gridSizeX) % gridSizeX;
let col = (y + j + gridSizeY) % gridSizeY;
sum += gridA[row][col] * weights[i + 1][j + 1];
}
}
return sum;
}
function laplaceB(x, y) {
let sum = 0;
let weights = [
[0.05, 0.2, 0.05],
[0.2, -1, 0.2],
[0.05, 0.2, 0.05],
];
for (let i = -1; i < 2; i++) {
for (let j = -1; j < 2; j++) {
let row = (x + i + gridSizeX) % gridSizeX;
let col = (y + j + gridSizeY) % gridSizeY;
sum += gridB[row][col] * weights[i + 1][j + 1];
}
}
return sum;
}
function draw() {
const imageData = ctx.createImageData(canvas.width, canvas.height);
const data = imageData.data;
for (let x = 0; x < gridSizeX; x++) {
for (let y = 0; y < gridSizeY; y++) {
const index = (x + y * gridSizeX) * 4;
const a = gridA[x][y];
const b = gridB[x][y];
const color = {
r: 206 * b,
g: 66 * b,
b: 245 * b,
};
data[index + 0] = color.r;
data[index + 1] = color.g;
data[index + 2] = color.b;
data[index + 3] = 255;
}
}
ctx.putImageData(imageData, 0, 0);
}
function loop() {
draw();
updateGrid();
requestAnimationFrame(loop);
}
loop();