From c8783a1bb4872c076acca7a7668663ecc2d95378 Mon Sep 17 00:00:00 2001
From: Sam <samkleinhanss98@gmail.com>
Date: Tue, 27 Sep 2022 19:11:03 +1300
Subject: [PATCH] getting video
Co-authored-by: lmill90 <lmill90@users.noreply.github.com>
---
Catalogue/phyllotaxis.html | 2 +-
animate 0.2/js/index.js | 6 +-
showcase/{template.html => index.js.html} | 70 ++++++++++++++---------
3 files changed, 46 insertions(+), 32 deletions(-)
rename showcase/{template.html => index.js.html} (89%)
diff --git a/Catalogue/phyllotaxis.html b/Catalogue/phyllotaxis.html
index da37d12..226fa38 100644
--- a/Catalogue/phyllotaxis.html
+++ b/Catalogue/phyllotaxis.html
@@ -14,7 +14,7 @@
let deg_per_sec = 30/5000;
- let time = 0.1;
+ let time = 99999999;
let fps = 60;
centerX = ctx.canvas.width / 2;
diff --git a/animate 0.2/js/index.js b/animate 0.2/js/index.js
index 3b6bbd9..02bf718 100644
--- a/animate 0.2/js/index.js
+++ b/animate 0.2/js/index.js
@@ -113,9 +113,9 @@ function main() {
setTimeout(() => {
main();
ctx.clearRect(0, 0, canvas.width, canvas.height);
- // drawStack[1].rotateAddX(1);
- // drawStack[1].rotateAddY(1);
- // drawStack[1].rotateAddZ(.2);
+ drawStack[1].rotateAddX(1);
+ drawStack[1].rotateAddY(1);
+ drawStack[1].rotateAddZ(.2);
// for (let i = 0; i < drawStack.length; i++) {
// drawStack[i].rotateAddY(0.005*(i+1));
diff --git a/showcase/template.html b/showcase/index.js.html
similarity index 89%
rename from showcase/template.html
rename to showcase/index.js.html
index e58beed..f73c210 100644
--- a/showcase/template.html
+++ b/showcase/index.js.html
@@ -38,15 +38,16 @@
currentFrame = 0; //was = i
let nPoly1 = {
- colour1: [0, 255, 0],
- colour2: [255, 0, 0],
+ colour1: [187,58,242],
+ colour2: [40,183,235],
speedMult: 0.20,
depth: 22,
width: 0,
widthMax: 400,
+ line_width:1,
sides: 4,
rotation: 0,
- duration: 90*0.2, //rotation
+ duration: 90, //rotation
draw: function () {
DrawPolyTwistColour_width(
this.sides,
@@ -55,7 +56,8 @@
-90,
this.rotation * this.speedMult,
this.colour1,
- this.colour2
+ this.colour2,
+ this.line_width
);
},
};
@@ -67,9 +69,10 @@
depth: 100,
width: 0,
widthMax: 400,
+ line_width: 1,
sides: 8,
rotation: 0,
- duration: 120 *0.05,
+ duration: 960*0.05,
draw: function () {
DrawPolyTwistColour_width(
this.sides,
@@ -78,7 +81,8 @@
-90,
this.rotation * this.speedMult,
this.colour1,
- this.colour2
+ this.colour2,
+ this.line_width
);
},
@@ -88,11 +92,12 @@
speedMult: 1,
width: 0,
widthMax: 250,
+ line_width: 1,
sides: 5,
rotation: 0,
- duration: deg_per_sec*10,
+ duration: deg_per_sec*20,
draw: function () {
- Draw_Spiral_Pattern(this.sides, this.width, this.rotation*this.speedMult, centerX, centerY, 'red');
+ Draw_Spiral_Pattern(this.sides, this.width, this.rotation*this.speedMult, 'red',this.line_width);
},
};
let floralInv2 = {
@@ -100,11 +105,12 @@
speedMult: 1,
width: 0,
widthMax: 250,
+ line_width: 1,
sides: 12,
rotation: 0,
- duration: deg_per_sec*10,
+ duration: deg_per_sec*20,
draw: function () {
- Draw_Spiral_Pattern(this.sides, this.width, this.rotation*this.speedMult, 'red');
+ Draw_Spiral_Pattern(this.sides, this.width, this.rotation*this.speedMult, 'red', this.line_width);
},
};
let floralInv3 = {
@@ -112,11 +118,12 @@
speedMult: 1,
width: 0,
widthMax: 225,
+ line_width: 1,
sides: 40,
rotation: 0,
- duration: deg_per_sec*5,
+ duration: deg_per_sec*20,
draw: function () {
- Draw_Spiral_Pattern(this.sides, this.width, this.rotation*this.speedMult, 'red');
+ Draw_Spiral_Pattern(this.sides, this.width, this.rotation*this.speedMult, 'red', this.line_width);
},
};
let floralAcc1 = {
@@ -124,11 +131,12 @@
speedMult: 1,
width: 0,
widthMax: 225,
+ line_width: 1,
sides: 3,
rotation: 0,
- duration: deg_per_sec*5,
+ duration: deg_per_sec*20,
draw: function () {
- Draw_Shape_accident(this.sides,this.width,this.rotation*this.speedMult,'red')
+ Draw_Shape_accident(this.sides,this.width,this.rotation*this.speedMult,'red',this.line_width)
},
};
let floralAcc2 = {
@@ -136,11 +144,12 @@
speedMult: 1,
width: 0,
widthMax: 225,
+ line_width: 1,
sides: 12,
rotation: 0,
duration: deg_per_sec*14,
draw: function () {
- Draw_Shape_accident(this.sides,this.width,this.rotation*this.speedMult,'red')
+ Draw_Shape_accident(this.sides,this.width,this.rotation*this.speedMult,'red',this.line_width)
},
};
let nodal1 = {
@@ -153,12 +162,12 @@
colourChange: 1,
lineWidth: 4,
rotation: 0,
- duration: deg_per_sec*5,
+ duration: deg_per_sec*330,
draw: function () {
Draw_nodal_expanding(
this.width,
this.points,
- this.rotation*this.speedMult +2000,
+ this.rotation*this.speedMult,
0,
this.colour1,
this.colour2,
@@ -173,10 +182,11 @@
speedMult: 1/5000,
width: 0,
widthMax: 24,
+ line_width: 1,
dots: 300,
dotWidth: 8,
rotation: 0,
- duration: deg_per_sec*5 /5000,
+ duration: deg_per_sec*522 /5000,
draw: function () {
Draw_Phyllotaxis(
this.width,
@@ -184,27 +194,29 @@
this.dots,
this.dotWidth,
this.colour1,
- this.colour2);
+ this.colour2,
+ this.line_width);
},
};
let mathPoly = {
speedMult: 1,
width: 0,
widthMax: 500,
- duration: deg_per_sec*20,
+ duration: deg_per_sec*10,
draw: function () {
Draw_Math_Node(100,this.file,this.width);
}
};
- let aniObj = [mathPoly,nodal1,floralAcc1,floralInv3,phyllo1,nPoly2];
+ let aniObj = [mathPoly,nPoly1,nPoly2,floralInv1,floralInv2,floralInv3,floralAcc1,floralAcc2,nodal1,phyllo1];
+ // let aniObj = [phyllo1];
let ind = 0;
function render() {
setTimeout(() => {
render();
render_clear();
-
+ console.log(aniObj[ind].duration/aniObj[ind].speedMult)
if (aniObj[ind].width < aniObj[ind].widthMax && rotation <= aniObj[ind].duration/aniObj[ind].speedMult) {
aniObj[ind].width += aniObj[ind].widthMax/100
}
@@ -292,7 +304,7 @@
}
- function Draw_Shape_accident(sides, radius, rotation, colour) {
+ function Draw_Shape_accident(sides, radius, rotation, colour,line_width) {
let rot = Math.round((sides - 2) * 180 / sides * 2)
let piv = 360 / sides;
let stt = 0.5 * Math.PI - rad(rot) //+ rad(rotation);
@@ -315,6 +327,7 @@
ctx.beginPath();
+ ctx.lineWidth = line_width;
ctx.arc(centerX + Math.cos(rad(90 + piv * i - rotation)) * radius, centerY + Math.sin(rad(90 + piv * i - rotation)) * radius, radius, stt, end - (end - stt - rad(rotation)) / 2 + rad(n), 0);
ctx.strokeStyle = colour;
ctx.stroke();
@@ -325,7 +338,7 @@
}
- function Draw_Spiral_Pattern(sides, radius, rotation, colour) {
+ function Draw_Spiral_Pattern(sides, radius, rotation, colour,line_width) {
let rot = Math.round((sides - 2) * 180 / sides * 2)
let piv = 360 / sides;
let stt = 0.5 * Math.PI - rad(rot) //+ rad(rotation);
@@ -348,6 +361,7 @@
ctx.beginPath();
+ ctx.lineWidth = line_width;
ctx.arc(centerX + Math.cos(rad(90 + piv * i - rotation)) * radius, centerY + 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();
@@ -358,7 +372,7 @@
}
- function DrawPolyTwistColour_width(sides,depth, width, rotation,innerRotation, colour1,colour2){
+ function DrawPolyTwistColour_width(sides,depth, width, rotation,innerRotation, colour1,colour2,line_width){
let out_angle = 0
let innerAngle = 180 - ((sides-2) *180/sides);
let scopeAngle = innerRotation - (innerAngle*Math.floor(innerRotation/innerAngle));
@@ -376,12 +390,13 @@
for (let i = 0; i < depth; i++) {
let fraction = i/depth;
let ncolour = LerpRGB(colour1,colour2,fraction);
- DrawPolygon(sides,width*widthMultiplier**i,out_angle*i+rotation, colourToText(ncolour))
+ DrawPolygon(sides,width*widthMultiplier**i,out_angle*i+rotation, colourToText(ncolour), line_width)
}
}
- function DrawPolygon(sides, width, rotation, colour) {
+ function DrawPolygon(sides, width, rotation, colour, line_width) {
ctx.beginPath();
+ ctx.lineWidth = line_width;
ctx.moveTo (centerX + width * Math.cos(rotation*Math.PI/180), centerY + width * Math.sin(rotation*Math.PI/180));
for (let i = 1; i <= sides; i += 1) {
@@ -392,7 +407,6 @@
}
ctx.strokeStyle = colour;
- ctx.lineWidth = 1;
ctx.stroke();
}