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;
+}
+/* <!-- HTML !-->
+<button class="button-8" role="button">Button 8</button> */
+
+/* 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 @@
<!DOCTYPE html>
<html>
<!-- ahhh -->
+
<head>
<title>Document</title>
<link rel="stylesheet" href="./css/styles.css">
</head>
-<body style="margin:0;" >
- <canvas id="myCanvas"
- style="display: block;box-sizing: border-box;" ></canvas>
+
+<body style="margin:0;">
+ <canvas id="myCanvas" style="display: block;box-sizing: border-box;"></canvas>
<div id="toolbar">
<br>
<select id="shape-selector">
<option value="PolyTwistColourWidth">PolyTwistColourWidth</option>
- <option value="FloralPhyllo">FloralPhyllo</option>
- <option value="FloralPhyllo_Accident">FloralPhyllo_Accident</option>
- <option value="Spiral1">Spiral1</option>
- <option value="FloralAccident">FloralAccident</option>
- <option value="Nodal_expanding">Nodal_expanding</option>
- <option value="Nodal">Nodal</option>
- <option value="Phyllotaxis">Phyllotaxis</option>
+ <option value="FloralPhyllo">FloralPhyllo</option>
+ <option value="FloralPhyllo_Accident">FloralPhyllo_Accident</option>
+ <option value="Spiral1">Spiral1</option>
+ <option value="FloralAccident">FloralAccident</option>
+ <option value="Nodal_expanding">Nodal_expanding</option>
+ <option value="Nodal">Nodal</option>
+ <option value="Phyllotaxis">Phyllotaxis</option>
+ <option value="SquareTwist_angle">SquareTwist_angle</option>
+ <option value="rectangle_pattern1">rectangle_pattern1</option>
+ <option value="EyePrototype">EyePrototype</option>
</select>
<div id="custom"></div>
<br>
+ <p>Controls:</p>
+ <p>
+ Press "Space" to pause and start the animation
+ </p>
+ <p>
+ Press "P" to show/hide the control panel
+ </p>
+ <br>
<p>Degrees Per Second</p>
<input type="text" id="inputDegPerSec" value="5" onchange="ChangeDegPerSec(this.value)">
<br>
<p>Controls</p>
- <button id="resetButton" onclick="Reset()">Reset</button>
<div class="controls">
- <button onclick="BackwardFrame()"><</button>
- <button id="pauseButton" onclick="TogglePause()">Play</button>
- <button onclick="ForwardFrame()">></button>
+ <button class="controlFrameButton button-8" onclick="BackwardFrame()"><</button>
+ <button class="controlPauseButton button-8" id="pauseButton" onclick="TogglePause()">Play</button>
+ <button class="controlFrameButton button-8" onclick="ForwardFrame()">></button>
</div>
+ <button class="buttonReset button-8" id="resetButton" onclick="Reset()">Reset Rotation</button>
</div>
<div>
<button onclick="manualToggleSettings()" class="button">Show/hide</button>
@@ -42,4 +54,5 @@
<script src="./js/math.js" type="text/javascript"></script>
<script src="./js/objects.js" type="text/javascript"></script>
<script src="./js/index.js"></script>
+
</html>
\ 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++;
+ }
+}