From c8783a1bb4872c076acca7a7668663ecc2d95378 Mon Sep 17 00:00:00 2001 From: Sam Date: Tue, 27 Sep 2022 19:11:03 +1300 Subject: [PATCH] getting video Co-authored-by: lmill90 --- 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(); }