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

Solved the npoly twist equation. works for n sides greater than 3

This commit is contained in:
Sam 2022-03-21 11:41:46 +13:00
parent ec6314dae2
commit 6233468037
11 changed files with 412 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
Catalogue/Screenshot 2022-03-20 212123.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 192 KiB

BIN
Catalogue/Screenshot 2022-03-20 212148.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 226 KiB

BIN
Catalogue/Square answer.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 148 KiB

2
Catalogue/floral.html
View File

@ -28,7 +28,7 @@
render(); render();
render_clear(); render_clear();
draw_floral(9, 200, rotation *0, centerX, centerY, "red"); draw_floral(16, 200, rotation *0, centerX, centerY, "red");
}, 1000 / fps); }, 1000 / fps);

141
Catalogue/npoly twist - accident.html Normal file
View File

@ -0,0 +1,141 @@
<!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();
DrawSquareTwist_width(7,400,0,rotation,"red")
// DrawSquareTwist_angle(3,400,0,rotation,"red")
}, 1000 / fps);
rotation += deg_per_sec / fps; // was = j = innerRotation, now = rotation
currentFrame += 1; // was = i
}
}
render();
function DrawSquareTwist_angle(sides,width, rotation,innerRotation, colour){
let out_angle = innerRotation;
// let widthMultiplier = 169 / (239 * Math.sin(Math.PI / 180 * (135 - out_angle + 90 * Math.floor(out_angle / 90))))
// let widthMultiplier = Math.sqrt(0.5) * 1/ (Math.sin(Math.PI / 180 * (135 - out_angle + 90 * Math.floor(out_angle / 90))))
let widthMultiplier = Math.sqrt(0.5) * 1/ (Math.sin(Math.PI / 180 * (135 - out_angle + 90 * Math.floor(out_angle / 90))))
for (let i = 0; i < 25; i++) {
DrawPolygon(sides,width*widthMultiplier**i,innerRotation*i, colour)
}
}
function DrawSquareTwist_width(sides,width, rotation,innerRotation, colour){
// if(innerRotation >59){
// innerRotation=59
// }
let out_angle = 0
let innerAngle = 180 - ((sides-2) *180/sides);
// console.log(innerAngle);
let scopeAngle = innerRotation - (innerAngle*Math.floor(innerRotation/innerAngle));
if (scopeAngle < innerAngle/2) {
out_angle = innerAngle / (2 * Math.cos((2*Math.PI*scopeAngle)/(3*innerAngle))) - innerAngle/2
}
else {
out_angle = -innerAngle / (2 * Math.cos( ((2*Math.PI)/3) - ((2*Math.PI*scopeAngle)/(3*innerAngle))) ) + (innerAngle*3)/2
}
let minWidth = Math.sin(rad(innerAngle/2))*(0.5/Math.tan(rad(innerAngle/2)))*2;
console.log(minWidth);
// let widthMultiplier = 169 / (239 * Math.sin(Math.PI / 180 * (135 - out_angle + 90 * Math.floor(out_angle / 90))))
// let widthMultiplier = Math.sqrt(0.5) * 1/ (Math.sin(Math.PI / 180 * (((innerAngle/2)*3) - out_angle + innerAngle * Math.floor(out_angle / innerAngle))))
// let widthMultiplier = 1 / (2 * Math.sin(Math.PI / 180 * (150 - out_angle + 120 * Math.floor(out_angle / 120)))) //triangle
let widthMultiplier = minWidth / Math.sin(Math.PI / 180 * (90+innerAngle/2 - out_angle + innerAngle * Math.floor(out_angle / innerAngle))) //triangle
console.log(innerRotation + ": " + out_angle);
for (let i = 0; i < 25; i++) {
DrawPolygon(sides,width*widthMultiplier**i,out_angle*i, colour)
// draw_triangle(180+out_angle*i,width*widthMultiplier**i, colour)
}
}
function DrawPolygon(sides, width, rotation, colour) {
ctx.beginPath();
ctx.moveTo(centerX + width * Math.cos(((rotation*4)*Math.PI/180) / sides), centerY + width * Math.sin(((rotation*4)*Math.PI/180) / sides));
for (var i = 1; i <= sides; i += 1) {
ctx.lineTo(
centerX + width * Math.cos((i * 2 * Math.PI +((rotation*4)*Math.PI/180)) / sides),
centerY + width * Math.sin((i * 2 * Math.PI +((rotation*4)*Math.PI/180)) / sides)
);
}
ctx.strokeStyle = colour;
ctx.lineWidth = 1;
ctx.stroke();
}
function drawSquare(angle,size, colour) {
ctx.save();
ctx.translate(centerX, centerY)//-(Math.sin(rad(angle)) *centerX));
ctx.rotate(rad(angle + 180));
ctx.beginPath();
ctx.strokeStyle = colour;
ctx.rect(-size/2, -size/2, size, size);
ctx.stroke();
ctx.restore();
}
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>

109
Catalogue/npoly twist.html Normal file
View File

@ -0,0 +1,109 @@
<!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();
DrawPolyTwist_width(3,400,-90,rotation,"red")
// DrawSquareTwist_angle(3,400,0,rotation,"red")
}, 1000 / fps);
rotation += deg_per_sec / fps; // was = j = innerRotation, now = rotation
currentFrame += 1; // was = i
}
}
render();
function DrawSquareTwist_angle(sides,width, rotation,innerRotation, colour){
let out_angle = innerRotation;
// let widthMultiplier = 169 / (239 * Math.sin(Math.PI / 180 * (135 - out_angle + 90 * Math.floor(out_angle / 90))))
// let widthMultiplier = Math.sqrt(0.5) * 1/ (Math.sin(Math.PI / 180 * (135 - out_angle + 90 * Math.floor(out_angle / 90))))
let widthMultiplier = Math.sqrt(0.5) * 1/ (Math.sin(Math.PI / 180 * (135 - out_angle + 90 * Math.floor(out_angle / 90))))
for (let i = 0; i < 25; i++) {
DrawPolygon(sides,width*widthMultiplier**i,innerRotation*i, colour)
}
function DrawPolyTwist_width(sides,width, rotation,innerRotation, colour){
let out_angle = 0
let innerAngle = 180 - ((sides-2) *180/sides);
let scopeAngle = innerRotation - (innerAngle*Math.floor(innerRotation/innerAngle));
if (scopeAngle < innerAngle/2) {
out_angle = innerAngle / (2 * Math.cos((2*Math.PI*scopeAngle)/(3*innerAngle))) - innerAngle/2
}
else {
out_angle = -innerAngle / (2 * Math.cos( ((2*Math.PI)/3) - ((2*Math.PI*scopeAngle)/(3*innerAngle))) ) + (innerAngle*3)/2
}
let minWidth = Math.sin(rad(innerAngle/2))*(0.5/Math.tan(rad(innerAngle/2)))*2;
let widthMultiplier = minWidth / Math.sin(Math.PI / 180 * (90+innerAngle/2 - out_angle + innerAngle * Math.floor(out_angle / innerAngle)))
for (let i = 0; i < 25; i++) {
DrawPolygon(sides,width*widthMultiplier**i,out_angle*i+rotation, colour)
}
}
function DrawPolygon(sides, width, rotation, colour) {
ctx.beginPath();
ctx.moveTo (centerX + width * Math.cos(rotation*Math.PI/180), centerY + width * Math.sin(rotation*Math.PI/180));
for (var i = 1; i <= sides; i += 1) {
ctx.lineTo(
centerX + width * Math.cos(i * 2 * Math.PI / sides + (rotation*Math.PI/180)),
centerY + width * Math.sin(i * 2 * Math.PI / sides + (rotation*Math.PI/180))
);
}
ctx.strokeStyle = colour;
ctx.lineWidth = 1;
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>

71
Catalogue/npolygon.html Normal file
View File

@ -0,0 +1,71 @@
<!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();
DrawPolygon(4, 300, rotation, "red");
}, 1000 / fps);
rotation += deg_per_sec / fps; // was = j = angle, now = rotation
currentFrame += 1; // was = i
}
}
render();
function DrawPolygon(sides, width, rotation, colour) {
ctx.beginPath();
ctx.moveTo(
centerX + width * Math.cos((rotation * Math.PI) / 180),
centerY + width * Math.sin((rotation * Math.PI) / 180)
);
for (var i = 1; i <= sides; i += 1) {
ctx.lineTo(
centerX + width * Math.cos( (i * 2 * Math.PI) / sides + (rotation * Math.PI) / 180 ),
centerY + width * Math.sin( (i * 2 * Math.PI) / sides + (rotation * Math.PI) / 180 )
);
}
ctx.strokeStyle = colour;
ctx.lineWidth = 1;
ctx.stroke();
}
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>

BIN
Catalogue/poly last notes might delete.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 138 KiB

81
Catalogue/square accident.html Normal file
View File

@ -0,0 +1,81 @@
<!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();
DrawSquareTwist_angle(400,0,rotation,"red")
}, 1000 / fps);
rotation += deg_per_sec / fps; // was = j = innerRotation, now = rotation
currentFrame += 1; // was = i
}
}
render();
function DrawSquareTwist_angle(width, rotation,innerRotation, colour){
let out_angle = innerRotation;
let widthMultiplier = 1 / (2 * Math.sin(Math.PI / 180 * (130 - out_angle + 90 * Math.floor(out_angle / 90))))+0.5
for (let i = 0; i < 25; i++) {
drawSquare(innerRotation*i,width*widthMultiplier**i, colour)
}
}
function drawSquare(angle,size, colour) {
ctx.save();
ctx.translate(centerX, centerY)//-(Math.sin(rad(angle)) *centerX));
ctx.rotate(rad(angle + 180));
ctx.beginPath();
ctx.strokeStyle = colour;
ctx.rect(-size/2, -size/2, 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>

BIN
Catalogue/square answer simplified.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 176 KiB

20
Catalogue/triangle twist.html
View File

@ -2,7 +2,7 @@
<html> <html>
<!-- ahhh --> <!-- ahhh -->
<body style="margin:0;overflow: hidden;"> <body style="margin:0;">
<canvas id="myCanvas" width="10" height="10" <canvas id="myCanvas" width="10" height="10"
style="display: block;box-sizing: border-box;"> style="display: block;box-sizing: border-box;">
Your browser does not support the HTML5 canvas tag.</canvas> Your browser does not support the HTML5 canvas tag.</canvas>
@ -29,8 +29,8 @@
render(); render();
render_clear(); render_clear();
DrawTriangleTwist_angle(400,0,rotation,"red") // DrawTriangleTwist_angle(400,0,rotation,"red")
// DrawTriangleTwist_width(400,0,rotation,"red") DrawTriangleTwist_width(400,0,rotation,"red")
}, 1000 / fps); }, 1000 / fps);
rotation += deg_per_sec / fps; // was = j = innerRotation, now = rotation rotation += deg_per_sec / fps; // was = j = innerRotation, now = rotation
@ -41,9 +41,10 @@
render(); render();
function DrawTriangleTwist_width(width, rotation,innerRotation, colour){ function DrawTriangleTwist_angle(width, rotation,innerRotation, colour){
let out_angle = innerRotation;
let widthMultiplier = 1 / (2 * Math.sin(Math.PI / 180 * (150 - innerRotation + 120 * Math.floor(innerRotation / 120)))) // let widthMultiplier = 1 / (2 * Math.sin(Math.PI / 180 * (150 - innerRotation + 120 * Math.floor(innerRotation / 120))))
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++) { for (let i = 0; i < 25; i++) {
draw_triangle(180+innerRotation*i,width*widthMultiplier**i, colour) draw_triangle(180+innerRotation*i,width*widthMultiplier**i, colour)
@ -51,7 +52,7 @@
} }
function DrawTriangleTwist_angle(width, rotation,innerRotation, colour){ function DrawTriangleTwist_width(width, rotation,innerRotation, colour){
let out_angle = 0 let out_angle = 0
let innerAngle = innerRotation - (120*Math.floor(innerRotation/120)); let innerAngle = innerRotation - (120*Math.floor(innerRotation/120));
@ -62,7 +63,7 @@
out_angle = -120 / (2 * Math.cos(2 * Math.PI / 3 - (innerAngle * Math.PI / 180))) + 180 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)))) let widthMultiplier = 1 / (2 * Math.sin(Math.PI / 180 * (150 - out_angle + 120 * Math.floor(out_angle / 120)))) //150 = 90+innerangle/2
for (let i = 0; i < 25; i++) { for (let i = 0; i < 25; i++) {
draw_triangle(180+out_angle*i,width*widthMultiplier**i, colour) draw_triangle(180+out_angle*i,width*widthMultiplier**i, colour)
@ -70,9 +71,6 @@
} }
function draw_triangle(ang, radius, colour) { function draw_triangle(ang, radius, colour) {
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(centerX + Math.cos(rad(90 + 120 * 1 + ang)) * radius, centerY + 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);