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

started compartmentlising animations 0.1

This commit is contained in:
Sam 2022-03-16 00:51:43 +13:00
parent 0be69ea7c3
commit 70421f763f
15 changed files with 1270 additions and 237 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
Catalogue/Scripts/debugFunctions.js Normal file
View File

@ -0,0 +1,21 @@
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();
console.log("drawn center")
}
function DrawBorder(){
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(ctx.canvas.width, 0);
ctx.lineTo(ctx.canvas.width, ctx.canvas.height);
ctx.lineTo(0, ctx.canvas.height);
ctx.lineTo(0,0);
ctx.strokeStyle = "red";
ctx.stroke();
}

85
Catalogue/floral inverse animation.html Normal file
View File

@ -0,0 +1,85 @@
<!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_Spiral_Pattern(6, 200, rotation, centerX, centerY, 'red')
}, 1000 / fps);
rotation += deg_per_sec / fps; // was = j = angle, now = rotation
currentFrame += 1; // was = i
}
}
render();
function Draw_Spiral_Pattern(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 + rad(rotation) - (stt - end) / 2, end + rad(rotation) + rad(n), 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(rotation), end - (end - stt) / 2 + rad(n) - rad(rotation), 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>

80
Catalogue/floral tri tip touch.html Normal file
View File

@ -0,0 +1,80 @@
<!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_tri(rotation);
}, 1000 / fps);
rotation += deg_per_sec / fps; // was = j = angle, now = rotation
currentFrame += 1; // was = i
}
}
render();
function draw_tri(angle) {
draw_floral(3, 520, angle, centerX + 260, centerY - 150, "red");
draw_floral(3, 520, angle + 60, centerX - 260, centerY - 150,"red");
draw_floral(3, 520, angle + 120, centerX, centerY + 300, "red");
}
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>

75
Catalogue/floral.html Normal file
View File

@ -0,0 +1,75 @@
<!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_floral(9, 200, rotation *0, centerX, centerY, "red");
}, 1000 / fps);
rotation += deg_per_sec / fps; // was = j = angle, now = rotation
currentFrame += 1; // was = i
}
}
render();
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>

83
Catalogue/foral accident.html Normal file
View File

@ -0,0 +1,83 @@
<!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_accident(4,150,rotation,centerX,centerY,'red')
}, 1000 / fps);
rotation += deg_per_sec / fps; // was = j = angle, now = rotation
currentFrame += 1; // was = i
}
}
render();
function Draw_Shape_accident(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 + rad(rotation)) / 2, end + rad(n), 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, end - (end - stt - rad(rotation)) / 2 + rad(n), 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>

101
Catalogue/nodal expanding.html Normal file
View File

@ -0,0 +1,101 @@
<!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();
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)
}, 1000 / fps);
rotation += deg_per_sec / fps; // was = j = angle, now = rotation
currentFrame += 1; // was = i
}
}
render();
function Draw_nodal_expanding(expand, points, step, rotate, colour1, colour2, colour_change, line_width) {
var angle = 360 / points * step
var start_angle = angle;
var done = false;
var total_moves = 1;
var length = expand;
for (let z = 1; z <= 100; z++) { //why specifically 2500
ctx.beginPath();
ncolour = LerpRGB(colour1, colour2, Math.cos(rad(z * colour_change)));
ctx.moveTo(centerX + (Math.cos(rad(angle * (z - 1) + rotate)) * (length - expand)), centerY + (Math.sin(rad(angle * (z - 1) + rotate)) * (length - expand)));
ctx.lineTo(centerX + (Math.cos(rad(angle * z + rotate)) * length), centerY + (Math.sin(rad(angle * z + rotate)) * length));
length += expand;
ctx.lineWidth = line_width;//try 1
ctx.strokeStyle = colourToText(ncolour);
ctx.stroke();
}
}
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 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>

88
Catalogue/nodal.html Normal file
View File

@ -0,0 +1,88 @@
<!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 = 15;
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_nodal(300, 100, 31, rotation, "blue");
// Draw_center(); //Debugging
// DrawBorder();
}, 1000 / fps);
rotation += deg_per_sec / fps; // was = j = angle, now = rotation
currentFrame += 1; // was = i
}
}
render();
function Draw_nodal(radius, points, step, rotate, colour) {
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 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>

98
Catalogue/phyllotaxis.html Normal file
View File

@ -0,0 +1,98 @@
<!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_Phyllotaxis(rotation / 5000 + 1);
// Draw_Phyllotaxis(rotation/5000);
// Draw_center(); //Debugging
// DrawBorder();
}, 1000 / fps);
rotation += deg_per_sec / fps; // was = j = angle, now = rotation
currentFrame += 1; // was = i
}
}
render();
function Draw_Phyllotaxis(angle) {
colour1 = [255, 170, 0];
colour2 = [255, 0, 221];
var c = 24; //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)//137.5;
var r = c * Math.sqrt(n);
var x = r * Math.cos(a) + centerX;
var y = r * Math.sin(a) + centerY;
ctx.beginPath();
ctx.arc(x, y, 4, 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>

86
Catalogue/rectangle pattern 1.html Normal file
View File

@ -0,0 +1,86 @@
<!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
let squares = 1;
let tmpTimer = 0;
render_clear();
function render() {
if (currentFrame < time / (1 / fps)) {
setTimeout(() => {
render();
render_clear();
Draw_rectangle_pattern1(rotation, squares, 200, "blue");
if (tmpTimer >= fps/2 & squares != 40) {
tmpTimer = 0;
squares += 1;
}
tmpTimer += 1;
}, 1000 / fps);
rotation += deg_per_sec / fps; // was = j = angle, now = rotation
currentFrame += 1; // was = i
}
}
render();
function Draw_rectangle_pattern1(rotation, squares, size, colour) {
for (let z = 0; z < 360; z += 360 / squares) {
drawSquare(z + rotation);
}
function drawSquare(angle) {
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 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>

77
Catalogue/template.html
View File

@ -1,44 +1,51 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<!-- ahhh --> <!-- ahhh -->
<body>
<canvas <body style="margin:0;overflow: hidden;">
id="myCanvas" <canvas id="myCanvas" width="10" height="10"
width="1920" style="display: block;box-sizing: border-box;">
height="1080" Your browser does not support the HTML5 canvas tag.</canvas>
style="border: 1px solid #d3d3d3" <script>
> let c = document.getElementById("myCanvas");
Your browser does not support the HTML5 canvas tag.</canvas let ctx = c.getContext("2d");
> ctx.canvas.width = window.innerWidth;
<script> ctx.canvas.height = window.innerHeight;
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d"); 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
let deg_per_sec = 30; function render() {
let time = 120; if (currentFrame < time / (1 / fps)) {
let fps = 60; setTimeout(() => {
render();
centerX = 1920 / 2; render_clear();
centerY = 1080 / 2;
j = 0;
i = 0;
function render() { }, 1000 / fps);
if (i < time / (1 / fps)) { rotation += deg_per_sec / fps; // was = j = angle, now = rotation
setTimeout(() => { currentFrame += 1; // was = i
render();
render_clear();
}, 1000 / fps);
j += (deg_per_sec * 1) / fps; //What is this?
i += 1;
}
} }
}
render();
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>
render();
</script>
</body>
</html> </html>

66
Catalogue/triangle.html Normal file
View File

@ -0,0 +1,66 @@
<!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_triangle(0, 200)
}, 1000 / fps);
rotation += deg_per_sec / fps; // was = j = angle, now = rotation
currentFrame += 1; // was = i
}
}
render();
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();
}
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>

136
Python/ShapesStuff/nodal_pattern - Copy.py Normal file
View File

@ -0,0 +1,136 @@
from turtle import *
r = 1
g = 0
b = 0
tup = (r,g,b)
pencolor(tup)
change_amount = 0.1
changing_color = "r+"
#begin_fill()
pendown()
def step_color_rainbow():
global changing_color
global change_amount
global r
global g
global b
if(changing_color == "r+"):
r += change_amount
if(r>1):
r = 1
changing_color = "b-"
elif(changing_color == "g+"):
g += change_amount
if(g>1):
g = 1
changing_color = "r-"
elif(changing_color == "b+"):
b += change_amount
if(b>1):
b = 1
changing_color = "g-"
if(changing_color == "r-"):
r -= change_amount
if(r<0):
r = 0
changing_color = "b+"
elif(changing_color == "g-"):
g -= change_amount
if(g<0):
g = 0
changing_color = "r+"
elif(changing_color == "b-"):
b -= change_amount
if(b<0):
b = 0
changing_color = "g+"
def step_color_two():
global r
global g
global b
global changing_color
r1 = 0.07
g1 = 0.02
b1 = 0.35
r2 = 1
g2 = 0.07
b2 = 0.31
c_amount = 100
rdiff = r2-r1
gdiff = g2 - g1
bdiff = b2 - b1
rchange = rdiff/c_amount
gchange = gdiff/c_amount
bchange = bdiff/c_amount
#print(f"{rchange} {gchange} {bchange}")
#print(f" {r} {g} {b}")
if(changing_color == "r+"):
r += rchange
g += gchange
b += bchange
else:
r -= rchange
g -= gchange
b -= bchange
if(r >= r2):
r = r2
g = g2
b = b2
changing_color = "r-"
elif(r <= r1):
r = r1
g = g1
b = b1
changing_color = "r+"
nodes = 999
step = 330
node_angle = 360/nodes
speed(0)
bgcolor("black")
def iterations(n,s):
i = 1
while True:
x = s*i
if(x % n== 0) and (x>= n):
return i
else:
i += 1
#print(iterations(nodes,step))
distance = 1
flip = 1
while True:
forward(distance * flip)
#flip *= -1
right(step*node_angle)
#node_angle *= 1.0001
if abs(pos()) < 1:
break
#step_color_two()
#step_color_rainbow()
#print(f"{r} {g} {b}")
pencolor((r,g,b))
distance +=1
done()

133
Python/ShapesStuff/nodal_pattern-DESKTOP-QKEHV8K.py Normal file
View File

@ -0,0 +1,133 @@
from turtle import *
r = 1
g = 0
b = 0
tup = (r,g,b)
pencolor(tup)
change_amount = 0.1
changing_color = "r+"
#begin_fill()
pendown()
def step_color_rainbow():
global changing_color
global change_amount
global r
global g
global b
if(changing_color == "r+"):
r += change_amount
if(r>1):
r = 1
changing_color = "b-"
elif(changing_color == "g+"):
g += change_amount
if(g>1):
g = 1
changing_color = "r-"
elif(changing_color == "b+"):
b += change_amount
if(b>1):
b = 1
changing_color = "g-"
if(changing_color == "r-"):
r -= change_amount
if(r<0):
r = 0
changing_color = "b+"
elif(changing_color == "g-"):
g -= change_amount
if(g<0):
g = 0
changing_color = "r+"
elif(changing_color == "b-"):
b -= change_amount
if(b<0):
b = 0
changing_color = "g+"
def step_color_two():
global r
global g
global b
global changing_color
r1 = 0.07
g1 = 0.02
b1 = 0.35
r2 = 1
g2 = 0.07
b2 = 0.31
c_amount = 100
rdiff = r2-r1
gdiff = g2 - g1
bdiff = b2 - b1
rchange = rdiff/c_amount
gchange = gdiff/c_amount
bchange = bdiff/c_amount
#print(f"{rchange} {gchange} {bchange}")
#print(f" {r} {g} {b}")
if(changing_color == "r+"):
r += rchange
g += gchange
b += bchange
else:
r -= rchange
g -= gchange
b -= bchange
if(r >= r2):
r = r2
g = g2
b = b2
changing_color = "r-"
elif(r <= r1):
r = r1
g = g1
b = b1
changing_color = "r+"
nodes = 999
step = 247
node_angle = 360/nodes
speed(0)
bgcolor("black")
def iterations(n,s):
i = 1
while True:
x = s*i
if(x % n== 0) and (x>= n):
return i
else:
i += 1
#print(iterations(nodes,step))
distance = 1
while True:
forward(distance)
right(step*node_angle)
if abs(pos()) < 1:
break
step_color_two()
#step_color_rainbow()
#print(f"{r} {g} {b}")
pencolor((r,g,b))
distance +=2
done()

134
Python/ShapesStuff/nodal_pattern.py Normal file
View File

@ -0,0 +1,134 @@
from turtle import *
r = 1
g = 0
b = 0
tup = (r,g,b)
pencolor(tup)
change_amount = 0.1
changing_color = "r+"
#begin_fill()
pendown()
def step_color_rainbow():
global changing_color
global change_amount
global r
global g
global b
if(changing_color == "r+"):
r += change_amount
if(r>1):
r = 1
changing_color = "b-"
elif(changing_color == "g+"):
g += change_amount
if(g>1):
g = 1
changing_color = "r-"
elif(changing_color == "b+"):
b += change_amount
if(b>1):
b = 1
changing_color = "g-"
if(changing_color == "r-"):
r -= change_amount
if(r<0):
r = 0
changing_color = "b+"
elif(changing_color == "g-"):
g -= change_amount
if(g<0):
g = 0
changing_color = "r+"
elif(changing_color == "b-"):
b -= change_amount
if(b<0):
b = 0
changing_color = "g+"
def step_color_two():
global r
global g
global b
global changing_color
r1 = 0.07
g1 = 0.02
b1 = 0.35
r2 = 1
g2 = 0.07
b2 = 0.31
c_amount = 100
rdiff = r2-r1
gdiff = g2 - g1
bdiff = b2 - b1
rchange = rdiff/c_amount
gchange = gdiff/c_amount
bchange = bdiff/c_amount
#print(f"{rchange} {gchange} {bchange}")
#print(f" {r} {g} {b}")
if(changing_color == "r+"):
r += rchange
g += gchange
b += bchange
else:
r -= rchange
g -= gchange
b -= bchange
if(r >= r2):
r = r2
g = g2
b = b2
changing_color = "r-"
elif(r <= r1):
r = r1
g = g1
b = b1
changing_color = "r+"
nodes = 999
step = 330
node_angle = 360/nodes
speed(0)
bgcolor("black")
def iterations(n,s):
i = 1
while True:
x = s*i
if(x % n== 0) and (x>= n):
return i
else:
i += 1
#print(iterations(nodes,step))
distance = 1
speed = 0
while True:
forward(distance)
right(step*node_angle)
if abs(pos()) < 1:
break
step_color_two()
#step_color_rainbow()
#print(f"{r} {g} {b}")
pencolor((r,g,b))
distance +=1
done()

236
animate 0.1 (deconstructing)/animation.html
View File

@ -28,23 +28,6 @@
return newColor; return newColor;
} }
function draw_shape(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 draw_shape_sub(sides, radius, rotation, x, y, colour) { function draw_shape_sub(sides, radius, rotation, x, y, colour) {
var denominator = sides - 2 var denominator = sides - 2
@ -97,85 +80,7 @@
} }
} }
function Draw_Shape_accident(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 + rad(rotation)) / 2, end + rad(n), 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, end - (end - stt - rad(rotation)) / 2 + rad(n), 0);
ctx.strokeStyle = colour;
ctx.stroke();
stt = end + -(rad(rot - piv)) //+rad(30);
}
}
function Draw_Spiral_Pattern(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 + rad(rotation) - (stt - end) / 2, end + rad(rotation) + rad(n), 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(rotation), end - (end - stt) / 2 + rad(n) - rad(rotation), 0);
ctx.strokeStyle = colour;
ctx.stroke();
stt = end + -(rad(rot - piv)) //+rad(30);
}
}
function Draw_Spiral(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.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, end - (end - stt) / 2 + rad(n), 0);
ctx.fillStyle = colour;
ctx.fill();
*/
stt = end + -(rad(rot - piv)) //+rad(30);
}
}
function render_clear() { function render_clear() {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
@ -186,10 +91,10 @@
function draw_triangle(ang, radius) { function draw_triangle(ang, radius) {
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(startx + Math.cos(rad(90 + 120 * 1 + ang)) * radius, starty + Math.sin(rad(90 + 120 * 1 + ang)) * radius); ctx.moveTo(centerX + Math.cos(rad(90 + 120 * 1 + ang)) * radius, centerY + Math.sin(rad(90 + 120 * 1 + ang)) * radius);
ctx.lineTo(startx + Math.cos(rad(90 + 120 * 2 + ang)) * radius, starty + Math.sin(rad(90 + 120 * 2 + ang)) * radius); ctx.lineTo(centerX + Math.cos(rad(90 + 120 * 2 + ang)) * radius, centerY + Math.sin(rad(90 + 120 * 2 + ang)) * radius);
ctx.lineTo(startx + Math.cos(rad(90 + 120 * 3 + ang)) * radius, starty + Math.sin(rad(90 + 120 * 3 + ang)) * radius); ctx.lineTo(centerX + Math.cos(rad(90 + 120 * 3 + ang)) * radius, centerY + Math.sin(rad(90 + 120 * 3 + ang)) * radius);
ctx.lineTo(startx + Math.cos(rad(90 + 120 * 1 + ang)) * radius, starty + Math.sin(rad(90 + 120 * 1 + 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 = "red";
ctx.stroke(); ctx.stroke();
} }
@ -208,8 +113,8 @@
var piv = 360 / sides_org; var piv = 360 / sides_org;
var angle = 0; var angle = 0;
startx = 1920 / 2//1875/2; centerX = 1920 / 2//1875/2;
starty = 1080 / 2//950/2;//-(Math.tan(30*Math.PI/180)*width/2); centerY = 1080 / 2//950/2;//-(Math.tan(30*Math.PI/180)*width/2);
j = 0; j = 0;
i = 0; i = 0;
@ -322,35 +227,35 @@
//draw_triangle(180+ (theFinalAngle*180/Math.PI) ,L) //draw_triangle(180+ (theFinalAngle*180/Math.PI) ,L)
//draw_triangle((angle-180)/2.8,tmpA*400) //draw_triangle((angle-180)/2.8,tmpA*400)
//draw_shape(7,300,0,startx,starty,"red"); //draw_shape(7,300,0,centerX,centerY,"red");
//draw_shape_sub(7,300,0,startx,starty,"blue"); //draw_shape_sub(7,300,0,centerX,centerY,"blue");
//draw_shape_fill(5,300,angle,startx,starty,"purple"); //draw_shape_fill(5,300,angle,centerX,centerY,"purple");
/* /*
draw_shape_fill(5,300,angle,startx,starty,"purple"); draw_shape_fill(5,300,angle,centerX,centerY,"purple");
draw_shape_fill(5,115,-(angle+108),startx,starty,"red"); draw_shape_fill(5,115,-(angle+108),centerX,centerY,"red");
draw_shape_fill(5,44,angle+108,startx,starty,"yellow"); draw_shape_fill(5,44,angle+108,centerX,centerY,"yellow");
draw_shape(5,300,angle,startx,starty,"red"); draw_shape(5,300,angle,centerX,centerY,"red");
draw_shape(5,115,-(angle+108),startx,starty,"yellow"); draw_shape(5,115,-(angle+108),centerX,centerY,"yellow");
draw_shape(5,44,angle+108,startx,starty,"purple"); draw_shape(5,44,angle+108,centerX,centerY,"purple");
*/ */
//Draw_Spiral(4,400,0,startx,starty,'red'); //Draw_Spiral(4,400,0,centerX,centerY,'red');
//Draw_Spiral_Pattern(50, 250, angle, startx, starty, 'red') //Draw_Spiral_Pattern(50, 250, angle, centerX, centerY, 'red')
//Draw_Shape_accident(4,300,angle,startx,starty,'red') //Draw_Shape_accident(4,300,angle,centerX,centerY,'red')
//Draw_Spiral(10,400,-angle,startx,starty,'red'); //Draw_Spiral(10,400,-angle,centerX,centerY,'red');
//draw_shape(99,300,angle,startx,starty,"red"); //draw_shape(99,300,angle,centerX,centerY,"red");
//draw_triangle(0); //draw_triangle(0);
//draw_tri(angle); //draw_tri(angle);
//draw_test_fill(angle); //draw_test_fill(angle);
//draw_shape(5,300,angle,startx,starty); //draw_shape(5,300,angle,centerX,centerY);
//draw_shape(3,300,-angle,startx,starty) //draw_shape(3,300,-angle,centerX,centerY)
//draw_shape(7,400,angle,startx,starty) //draw_shape(7,400,angle,centerX,centerY)
//draw_shape(6,r,-angle,startx,starty) //draw_shape(6,r,-angle,centerX,centerY)
/* /*
@ -364,17 +269,11 @@
//Draw_nodal_expanding(2.5,100000,angle*2+33000,angle*0, colour1,colour2,0.5, 5) //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) //Draw_nodal_expanding(2.5,10000,angle,angle*0, colour1,colour2,0.5, 1)
//console.log(angle*2) //console.log(angle*2)
//draw_shape(55,300,angle,startx,starty,"pink") //draw_shape(55,300,angle,centerX,centerY,"pink")
//Draw_Phyllotaxis(angle/5000+1); //Draw_Phyllotaxis(angle/5000+1);
//draw_shape_fill(4,400,angle,startx,starty,colourToText(ncolour)); //draw_shape_fill(4,400,angle,centerX,centerY,colourToText(ncolour));
//Draw_rectangle_pattern1(angle, 180, "purple");
/*
for (let z = 0; z < 360; z+=360/45) {
Draw_rectangle_pattern1(z+angle,200,"blue");
}
*/
@ -394,76 +293,23 @@
render() render()
//render_clear() //render_clear()
//Draw_nodal(500, 100,33) //Draw_nodal(500, 100,33)
//draw_shape_fill(5,300,angle,startx,starty,"purple"); //draw_shape_fill(5,300,angle,centerX,centerY,"purple");
//draw_shape_fill(5,115,angle+108,startx,starty,"red"); //draw_shape_fill(5,115,angle+108,centerX,centerY,"red");
//draw_shape(5,300,angle,startx,starty); //draw_shape(5,300,angle,centerX,centerY);
//Draw_center(); //Draw_center();
function Draw_Phyllotaxis(angle) {
colour1 = [255, 170, 0];
colour2 = [255, 0, 221];
var c = 32;
for (let n = 50; 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 x = r * Math.cos(a) + startx;
var y = r * Math.sin(a) + starty;
ctx.beginPath();
ctx.arc(x, y, 4, 0, 2 * Math.PI);
ctx.fillStyle = colourToText(ncolour);
ctx.fill();
}
}
function draw_test_fill(angle) {
ctx.beginPath();
ctx.arc(1000, 500, 300, 0, rad(angle));
ctx.fillStyle = "purple";
ctx.fill();
}
function Draw_nodal_expanding(expand, points, step, rotate, colour1, colour2, colour_change, line_width) {
var angle = 360 / points * step
var start_angle = angle;
var done = false;
var total_moves = 1;
var length = expand;
for (let z = 1; z <= 2500; z++) { function Draw_nodal(radius, points, step, rotate, colour) { //catalogued
ctx.beginPath();
//ctx.moveTo(startx, starty);
ncolour = LerpRGB(colour1, colour2, Math.cos(rad(z * colour_change)));
ctx.moveTo(startx + (Math.cos(rad(angle * (z - 1) + rotate)) * (length - expand)), starty + (Math.sin(rad(angle * (z - 1) + rotate)) * (length - expand)));
ctx.lineTo(startx + (Math.cos(rad(angle * z + rotate)) * length), starty + (Math.sin(rad(angle * z + rotate)) * length));
length += expand;
ctx.lineWidth = line_width;//try 1
ctx.strokeStyle = colourToText(ncolour);
ctx.stroke();
}
}
function Draw_nodal(radius, points, step, rotate, colour) {
var angle = 360 / points * step var angle = 360 / points * step
ctx.beginPath(); ctx.beginPath();
var start_angle = angle; var start_angle = angle;
var done = false; var done = false;
var total_moves = 1; var total_moves = 1;
ctx.moveTo(startx + (Math.cos(rad(angle + rotate)) * radius), starty + (Math.sin(rad(angle + rotate)) * radius)); ctx.moveTo(centerX + (Math.cos(rad(angle + rotate)) * radius), centerY + (Math.sin(rad(angle + rotate)) * radius));
while (done != true) { while (done != true) {
if ((total_moves * step) % points != 0) { if ((total_moves * step) % points != 0) {
@ -475,16 +321,16 @@
} }
} }
for (let z = 1; z <= total_moves; z++) { for (let z = 1; z <= total_moves; z++) {
ctx.lineTo(startx + (Math.cos(rad(angle * z + rotate)) * radius), starty + (Math.sin(rad(angle * z + rotate)) * radius)); ctx.lineTo(centerX + (Math.cos(rad(angle * z + rotate)) * radius), centerY + (Math.sin(rad(angle * z + rotate)) * radius));
} }
ctx.strokeStyle = colour; ctx.strokeStyle = colour;
ctx.stroke(); ctx.stroke();
} }
function Draw_rectangle_pattern1(angle, size, colour) { function Draw_rectangle_pattern1(angle, size, colour) { //catalogued
ctx.save(); ctx.save();
ctx.translate(startx, starty)//-(Math.sin(rad(angle)) *startx)); ctx.translate(centerX, centerY)//-(Math.sin(rad(angle)) *centerX));
ctx.rotate(rad(angle + 180)); ctx.rotate(rad(angle + 180));
ctx.beginPath(); ctx.beginPath();
ctx.strokeStyle = colour; ctx.strokeStyle = colour;
@ -494,19 +340,13 @@
} }
function draw_tri(angle) {
draw_shape(3, 520, angle, startx + 260, starty - 150);
draw_shape(3, 520, angle + 60, startx - 260, starty - 150);
draw_shape(3, 520, angle + 120, startx, starty + 300);
}
function Draw_center() { function Draw_center() {
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(startx - 100, starty); ctx.moveTo(centerX - 100, centerY);
ctx.lineTo(startx + 100, starty); ctx.lineTo(centerX + 100, centerY);
ctx.moveTo(startx, starty - 100); ctx.moveTo(centerX, centerY - 100);
ctx.lineTo(startx, starty + 100); ctx.lineTo(centerX, centerY + 100);
ctx.strokeStyle = "red"; ctx.strokeStyle = "red";
ctx.stroke(); ctx.stroke();