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

added a few

This commit is contained in:
Sam 2023-04-08 11:20:14 +12:00
parent eadf04184e
commit aeed45cc70
5 changed files with 270 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
docs/css/styles.css
View File

@ -1,9 +1,13 @@
body { body {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox, other Gecko */ /* Safari/Chrome, other WebKit */
box-sizing: border-box; /* Opera/IE 8+ */ -moz-box-sizing: border-box;
/* Firefox, other Gecko */
box-sizing: border-box;
/* Opera/IE 8+ */
height: 100% height: 100%
} }
p { p {
margin: 0px; margin: 0px;
} }
@ -11,6 +15,7 @@ p{
canvas { canvas {
position: absolute; position: absolute;
} }
#toolbar { #toolbar {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
@ -22,6 +27,7 @@ canvas {
height: 100vh; height: 100vh;
background-color: rgb(189, 189, 189); background-color: rgb(189, 189, 189);
} }
#custom { #custom {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
@ -33,6 +39,7 @@ canvas {
/* height: 100vh; */ /* height: 100vh; */
background-color: rgb(189, 189, 189); background-color: rgb(189, 189, 189);
} }
.button { .button {
display: block; display: block;
position: absolute; position: absolute;
@ -42,5 +49,63 @@ canvas {
.controls { .controls {
display: block; 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;
} }

25
docs/index.html
View File

@ -1,13 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<!-- ahhh --> <!-- ahhh -->
<head> <head>
<title>Document</title> <title>Document</title>
<link rel="stylesheet" href="./css/styles.css"> <link rel="stylesheet" href="./css/styles.css">
</head> </head>
<body style="margin:0;"> <body style="margin:0;">
<canvas id="myCanvas" <canvas id="myCanvas" style="display: block;box-sizing: border-box;"></canvas>
style="display: block;box-sizing: border-box;" ></canvas>
<div id="toolbar"> <div id="toolbar">
<br> <br>
<select id="shape-selector"> <select id="shape-selector">
@ -19,19 +20,30 @@
<option value="Nodal_expanding">Nodal_expanding</option> <option value="Nodal_expanding">Nodal_expanding</option>
<option value="Nodal">Nodal</option> <option value="Nodal">Nodal</option>
<option value="Phyllotaxis">Phyllotaxis</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> </select>
<div id="custom"></div> <div id="custom"></div>
<br> <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> <p>Degrees Per Second</p>
<input type="text" id="inputDegPerSec" value="5" onchange="ChangeDegPerSec(this.value)"> <input type="text" id="inputDegPerSec" value="5" onchange="ChangeDegPerSec(this.value)">
<br> <br>
<p>Controls</p> <p>Controls</p>
<button id="resetButton" onclick="Reset()">Reset</button>
<div class="controls"> <div class="controls">
<button onclick="BackwardFrame()"><</button> <button class="controlFrameButton button-8" onclick="BackwardFrame()"><</button>
<button id="pauseButton" onclick="TogglePause()">Play</button> <button class="controlPauseButton button-8" id="pauseButton" onclick="TogglePause()">Play</button>
<button onclick="ForwardFrame()">></button> <button class="controlFrameButton button-8" onclick="ForwardFrame()">></button>
</div> </div>
<button class="buttonReset button-8" id="resetButton" onclick="Reset()">Reset Rotation</button>
</div> </div>
<div> <div>
<button onclick="manualToggleSettings()" class="button">Show/hide</button> <button onclick="manualToggleSettings()" class="button">Show/hide</button>
@ -42,4 +54,5 @@
<script src="./js/math.js" type="text/javascript"></script> <script src="./js/math.js" type="text/javascript"></script>
<script src="./js/objects.js" type="text/javascript"></script> <script src="./js/objects.js" type="text/javascript"></script>
<script src="./js/index.js"></script> <script src="./js/index.js"></script>
</html> </html>

17
docs/js/helper.js
View File

@ -58,6 +58,23 @@ async function fetchConfig(className) {
{ type: "color", defaultValue: "#2D81FC", property: "colour1" }, { type: "color", defaultValue: "#2D81FC", property: "colour1" },
{ type: "color", defaultValue: "#FC0362", property: "colour2" }, { 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]; return config[className];
} }

5
docs/js/index.js
View File

@ -25,7 +25,10 @@ function createInstance(className, args) {
FloralPhyllo_Accident: FloralPhyllo_Accident, FloralPhyllo_Accident: FloralPhyllo_Accident,
Nodal_expanding: Nodal_expanding, Nodal_expanding: Nodal_expanding,
Nodal: Nodal, Nodal: Nodal,
Phyllotaxis:Phyllotaxis Phyllotaxis:Phyllotaxis,
SquareTwist_angle:SquareTwist_angle,
rectangle_pattern1:rectangle_pattern1,
EyePrototype:EyePrototype,
// Add more class constructors here as needed // Add more class constructors here as needed
}; };

135
docs/js/objects.js
View File

@ -284,14 +284,11 @@ class Phyllotaxis extends BaseShape {
} }
} }
class SquareTwist_angle extends BaseShape { class SquareTwist_angle extends BaseShape {
constructor(expand,points,line_width,colour1,colour2,colour_change) { constructor(width, line_width, colour1) {
super(); super();
this.expand = expand; this.width = width;
this.points = points;
this.line_width = line_width; this.line_width = line_width;
this.colour1 = colour1; this.colour1 = colour1;
this.colour2 = colour2;
this.colour_change = colour_change
} }
drawSquare(angle, size, colour) { drawSquare(angle, size, colour) {
ctx.save(); ctx.save();
@ -299,30 +296,29 @@ class SquareTwist_angle extends BaseShape {
ctx.rotate(rad(angle + 180)); ctx.rotate(rad(angle + 180));
ctx.beginPath(); ctx.beginPath();
ctx.strokeStyle = colour; ctx.strokeStyle = colour;
ctx.lineWidth = this.line_width;
ctx.rect(-size / 2, -size / 2, size, size); ctx.rect(-size / 2, -size / 2, size, size);
ctx.stroke(); ctx.stroke();
ctx.restore(); ctx.restore();
} }
// DrawSquareTwist_angle(400,0,rotation,"red") // DrawSquareTwist_angle(400,0,rotation,"red")
draw (width, rotation,innerRotation, colour){ draw(innerRotation) {
let out_angle = 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++) { 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 { class rectangle_pattern1 extends BaseShape {
constructor(expand,points,line_width,colour1,colour2,colour_change) { constructor(width, squares, line_width, colour1) {
super(); super();
this.expand = expand; this.width = width;
this.points = points; this.squares = squares;
this.line_width = line_width; this.line_width = line_width;
this.colour1 = colour1; this.colour1 = colour1;
this.colour2 = colour2;
this.colour_change = colour_change
} }
drawSquare(angle, size, colour) { drawSquare(angle, size, colour) {
ctx.save(); ctx.save();
@ -330,15 +326,124 @@ class rectangle_pattern1 extends BaseShape {
ctx.rotate(rad(angle + 180)); ctx.rotate(rad(angle + 180));
ctx.beginPath(); ctx.beginPath();
ctx.strokeStyle = colour; ctx.strokeStyle = colour;
ctx.lineWidth = this.line_width;
ctx.rect(-size / 2, -size / 2, size, size); ctx.rect(-size / 2, -size / 2, size, size);
ctx.stroke(); ctx.stroke();
ctx.restore(); ctx.restore();
} }
// Draw_rectangle_pattern1(rotation, squares, 200, "blue"); // Draw_rectangle_pattern1(rotation, squares, 200, "blue");
draw (rotation, squares, size, colour) { draw(rotation) {
for (let z = 0; z < 360; z += 360 / squares) { for (let z = 0; z < 360; z += 360 / this.squares) {
drawSquare(z + rotation,size,colour); 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++;
}
}