diff --git a/docs/css/styles.css b/docs/css/styles.css index 3f1e9eb..612d6e4 100644 --- a/docs/css/styles.css +++ b/docs/css/styles.css @@ -1,18 +1,23 @@ body { - -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ - -moz-box-sizing: border-box; /* Firefox, other Gecko */ - box-sizing: border-box; /* Opera/IE 8+ */ - height:100% + -webkit-box-sizing: border-box; + /* Safari/Chrome, other WebKit */ + -moz-box-sizing: border-box; + /* Firefox, other Gecko */ + box-sizing: border-box; + /* Opera/IE 8+ */ + height: 100% } -p{ - margin: 0px; + +p { + margin: 0px; } canvas { position: absolute; } + #toolbar { - display: flex; + display: flex; flex-flow: column; height: 100%; @@ -22,8 +27,9 @@ canvas { height: 100vh; background-color: rgb(189, 189, 189); } + #custom { - display: flex; + display: flex; flex-flow: column; height: 100%; @@ -33,14 +39,73 @@ canvas { /* height: 100vh; */ background-color: rgb(189, 189, 189); } -.button{ - display:block; + +.button { + display: block; position: absolute; right: 20px; z-index: 100; } -.controls{ - display: block; +.controls { + display: flex; + margin: 8px 0px; +} + +.controlFrameButton { + width: 8%; +} +.controlPauseButton { + width: 80%; + margin: auto; +} +/* + */ + +/* CSS */ +.button-8 { + background-color: #e1ecf4; + border-radius: 3px; + border: 1px solid #7aa7c7; + box-shadow: rgba(255, 255, 255, .7) 0 1px 0 0 inset; + box-sizing: border-box; + color: #1f3f55; + cursor: pointer; + display: inline-block; + /* font-family: -apple-system,system-ui,"Segoe UI","Liberation Sans",sans-serif; */ + font-size: 13px; + font-weight: 400; + line-height: 1.15385; + /* margin: 0; */ + outline: none; + padding: 8px .8em; + position: relative; + text-align: center; + text-decoration: none; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; + vertical-align: baseline; + white-space: nowrap; +} + +.button-8:hover, +.button-8:focus { + background-color: #b3d3ea; + color: #2c5777; +} + +.button-8:focus { + box-shadow: 0 0 0 4px rgba(0, 149, 255, .15); +} + +.button-8:active { + background-color: #a0c7e4; + box-shadow: none; + color: #2c5777; +} + +.buttonReset{ + background-color: #f4e1e1; } \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 2c386ec..c5306aa 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,37 +1,49 @@ + Document - - + + +


+

Controls:

+

+ Press "Space" to pause and start the animation +

+

+ Press "P" to show/hide the control panel +

+

Degrees Per Second


Controls

-
- - - + + +
+
@@ -42,4 +54,5 @@ + \ No newline at end of file diff --git a/docs/js/helper.js b/docs/js/helper.js index b278aab..ca19152 100644 --- a/docs/js/helper.js +++ b/docs/js/helper.js @@ -58,6 +58,23 @@ async function fetchConfig(className) { { type: "color", defaultValue: "#2D81FC", property: "colour1" }, { type: "color", defaultValue: "#FC0362", property: "colour2" }, ], + SquareTwist_angle: [ + { type: "range", min: 1, max: 800, defaultValue: 400, property: "width" }, + { type: "range", min: 1, max: 10, defaultValue: 1, property: "line_width" }, + { type: "color", defaultValue: "#2D81FC", property: "colour1" }, + ], + rectangle_pattern1: [ + { type: "range", min: 1, max: 800, defaultValue: 400, property: "width" }, + { type: "range", min: 1, max: 100, defaultValue: 10, property: "squares" }, + { type: "range", min: 1, max: 10, defaultValue: 1, property: "line_width" }, + { type: "color", defaultValue: "#2D81FC", property: "colour1" }, + ], + EyePrototype: [ + { type: "range", min: 1, max: 800, defaultValue: 400, property: "width" }, + { type: "range", min: 1, max: 100, defaultValue: 10, property: "squares" }, + { type: "range", min: 1, max: 10, defaultValue: 1, property: "line_width" }, + { type: "color", defaultValue: "#2D81FC", property: "colour1" }, + ], }; return config[className]; } diff --git a/docs/js/index.js b/docs/js/index.js index 94bb768..cb14579 100644 --- a/docs/js/index.js +++ b/docs/js/index.js @@ -25,7 +25,10 @@ function createInstance(className, args) { FloralPhyllo_Accident: FloralPhyllo_Accident, Nodal_expanding: Nodal_expanding, Nodal: Nodal, - Phyllotaxis:Phyllotaxis + Phyllotaxis:Phyllotaxis, + SquareTwist_angle:SquareTwist_angle, + rectangle_pattern1:rectangle_pattern1, + EyePrototype:EyePrototype, // Add more class constructors here as needed }; diff --git a/docs/js/objects.js b/docs/js/objects.js index 1686ed9..e070318 100644 --- a/docs/js/objects.js +++ b/docs/js/objects.js @@ -5,7 +5,7 @@ class BaseShape { initialise(config) { for (let item of config) { - const { element, listener } = addControl(item,this); + const { element, listener } = addControl(item, this); this.controls.push({ element, listener }); } } @@ -57,7 +57,7 @@ class PolyTwistColourWidth extends BaseShape { for (let i = 0; i < this.depth; i++) { const fraction = i / this.depth; const ncolour = LerpHex(this.colour1, this.colour2, fraction); - DrawPolygon(this.sides, this.width * widthMultiplier ** i, out_angle * i + this.rotation , ncolour); + DrawPolygon(this.sides, this.width * widthMultiplier ** i, out_angle * i + this.rotation, ncolour); } } } @@ -75,7 +75,7 @@ class FloralPhyllo extends BaseShape { var c = 1; //something to do with width. but not width //dont make larger than 270 unless altering the number of colours in lerpedColours for (let n = 200; n > 0; n -= 1) { - const a = n * angle/1000; //137.5; + const a = n * angle / 1000; //137.5; const r = c * Math.sqrt(n); const x = r * Math.cos(a) + centerX; const y = r * Math.sin(a) + centerY; @@ -85,7 +85,7 @@ class FloralPhyllo extends BaseShape { } } class Spiral1 extends BaseShape { - constructor(sides,width, colour) { + constructor(sides, width, colour) { super(); this.sides = sides; this.width = width; @@ -121,7 +121,7 @@ class Spiral1 extends BaseShape { } class FloralAccident extends BaseShape { - constructor(sides,width, colour) { + constructor(sides, width, colour) { super(); this.sides = sides; this.width = width; @@ -156,7 +156,7 @@ class FloralAccident extends BaseShape { } } class FloralPhyllo_Accident extends BaseShape { - constructor(sides,width, colour1,colour2) { + constructor(sides, width, colour1, colour2) { super(); this.sides = sides; this.width = width; @@ -170,7 +170,7 @@ class FloralPhyllo_Accident extends BaseShape { for (let n = 0; n < 300; n += 1) { let ncolour = LerpHex(this.colour1, this.colour2, Math.cos(rad(n / 2))); - let a = n * (angle/1000+100); //137.5; + let a = n * (angle / 1000 + 100); //137.5; let r = c * Math.sqrt(n); let x = r * Math.cos(a) + centerX; let y = r * Math.sin(a) + centerY; @@ -181,7 +181,7 @@ class FloralPhyllo_Accident extends BaseShape { } } class Nodal_expanding extends BaseShape { - constructor(expand,points,line_width,colour1,colour2,colour_change) { + constructor(expand, points, line_width, colour1, colour2, colour_change) { super(); this.expand = expand; this.points = points; @@ -192,7 +192,7 @@ class Nodal_expanding extends BaseShape { } draw(step) { - let colour_change = this.colour_change/10 + let colour_change = this.colour_change / 10 var angle = 360 / this.points * step var start_angle = angle; @@ -218,7 +218,7 @@ class Nodal_expanding extends BaseShape { } } class Nodal extends BaseShape { - constructor(width,points,line_width,step,colour) { + constructor(width, points, line_width, step, colour) { super(); this.width = width; this.points = points; @@ -226,7 +226,7 @@ class Nodal extends BaseShape { this.step = step; this.colour = colour; } -// Draw_nodal(300, 100, 31, rotation, "blue"); + // Draw_nodal(300, 100, 31, rotation, "blue"); draw(rotate) { // console.log(rotate) var angle = 360 / this.points * this.step @@ -255,20 +255,20 @@ class Nodal extends BaseShape { } } class Phyllotaxis extends BaseShape { - constructor(width,nMax,colour1,colour2) { + constructor(width, nMax, colour1, colour2) { super(); this.width = width; this.nMax = nMax; this.colour1 = colour1; this.colour2 = colour2; } -// Draw_nodal(300, 100, 31, rotation, "blue"); + // Draw_nodal(300, 100, 31, rotation, "blue"); draw(angle) { for (let n = 0; n < this.nMax; n += 1) { - const ncolour = LerpHex(this.colour1, this.colour2, n/this.nMax); + const ncolour = LerpHex(this.colour1, this.colour2, n / this.nMax); // const ncolour = LerpHex(this.colour1, this.colour2, (n/this.nMax)**2); - const a = n * (angle/1000)//137.5; + const a = n * (angle / 1000)//137.5; const r = this.width * Math.sqrt(n); const x = r * Math.cos(a) + centerX; const y = r * Math.sin(a) + centerY; @@ -284,61 +284,166 @@ class Phyllotaxis extends BaseShape { } } class SquareTwist_angle extends BaseShape { - constructor(expand,points,line_width,colour1,colour2,colour_change) { + constructor(width, line_width, colour1) { super(); - this.expand = expand; - this.points = points; + this.width = width; this.line_width = line_width; this.colour1 = colour1; - this.colour2 = colour2; - this.colour_change = colour_change } - drawSquare(angle,size, colour) { + 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.lineWidth = this.line_width; + ctx.rect(-size / 2, -size / 2, size, size); ctx.stroke(); ctx.restore(); - } - // DrawSquareTwist_angle(400,0,rotation,"red") - draw (width, rotation,innerRotation, colour){ + } + // DrawSquareTwist_angle(400,0,rotation,"red") + draw(innerRotation) { let out_angle = innerRotation; - let widthMultiplier = 1 / (2 * Math.sin(Math.PI / 180 * (130 - out_angle + 90 * Math.floor(out_angle / 90))))+0.5 + 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) - } + this.drawSquare(innerRotation * i, this.width * widthMultiplier ** i, this.colour1) + } } } class rectangle_pattern1 extends BaseShape { - constructor(expand,points,line_width,colour1,colour2,colour_change) { + constructor(width, squares, line_width, colour1) { super(); - this.expand = expand; - this.points = points; + this.width = width; + this.squares = squares; this.line_width = line_width; this.colour1 = colour1; - this.colour2 = colour2; - this.colour_change = colour_change } - drawSquare(angle,size, colour) { + 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.lineWidth = this.line_width; + ctx.rect(-size / 2, -size / 2, size, size); ctx.stroke(); ctx.restore(); - } - // Draw_rectangle_pattern1(rotation, squares, 200, "blue"); - draw (rotation, squares, size, colour) { - for (let z = 0; z < 360; z += 360 / squares) { - drawSquare(z + rotation,size,colour); + } + // Draw_rectangle_pattern1(rotation, squares, 200, "blue"); + draw(rotation) { + for (let z = 0; z < 360; z += 360 / this.squares) { + this.drawSquare(z + rotation, this.width, this.colour1); } } } +class EyePrototype extends BaseShape { + constructor(width, line_width, colour1) { + super(); + this.width = width; + this.line_width = line_width; + this.colour1 = colour1; + this.step = 0; + this.speed = 8; + this.opening = true; + this.counter = 0; + this.points = [ + [50, 250], + [450, 250], + ]; + this.cooldown = 0; + } + drawEyelid(step) { + ctx.lineWidth = 1; + ctx.beginPath(); + ctx.moveTo(this.points[0][0], this.points[0][1]); + ctx.quadraticCurveTo(250, 250 - step, this.points[1][0], this.points[0][1]); + + ctx.moveTo(this.points[0][0], this.points[0][1]); + ctx.quadraticCurveTo(250, 250 + step, this.points[1][0], this.points[0][1]); + ctx.stroke(); + } + eyelidCut(step) { + // ctx.lineWidth = 1; + let squarePath = new Path2D(); + squarePath.moveTo(this.points[0][0], this.points[0][1]); + squarePath.quadraticCurveTo(250, 250 - step, this.points[1][0], this.points[0][1]); + + squarePath.moveTo(this.points[0][0], this.points[0][1]); + squarePath.quadraticCurveTo(250, 250 + step, this.points[1][0], this.points[0][1]); + + ctx.clip(squarePath); + } + drawGrowEye(step) { + console.log(step) + ctx.strokeStyle = "aqua"; + ctx.beginPath(); + ctx.lineWidth = 5; + ctx.arc(250, 250, step, 0, 2 * Math.PI); + ctx.stroke(); + ctx.strokeStyle = "orange"; + } + drawCircle(step) { + ctx.beginPath(); + ctx.lineWidth = 5; + ctx.arc(250, 250, step, 0, 2 * Math.PI); + ctx.stroke(); + } + stepFunc() { + if (this.cooldown != 0) { + this.cooldown--; + } else { + if (this.opening == true) { + if (this.step >= 200) { + this.cooldown = 200; + this.opening = false; + this.step -= this.speed; + } else { + this.step += this.speed; + } + } else { + if (this.step <= 0) { + this.opening = true; + this.step += this.speed; + } else { + this.step -= this.speed; + } + } + } + } + + draw(rotation) { + console.log(this.counter) + ctx.strokeStyle = "orange"; + ctx.fillStyle = "black"; + // ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); + // ctx.fillRect(0, 0, 500, 500); + + // let newPath = new Path2D(); + // newPath.arc(150, 75, 75, 0, 2 * Math.PI); + + ctx.beginPath(); + ctx.rect(100, 100, 300, 300); + ctx.stroke(); + + this.drawEyelid(this.step); + + ctx.save(); + // squareCut(); + this.eyelidCut(this.step); + + if (this.counter % 100 == 0) { + this.counter = 0; + } + this.drawGrowEye(100 + this.counter); + + this.drawCircle(100); + + ctx.restore(); + + this.stepFunc(); + this.counter++; + } +}