added a few
This commit is contained in:
parent
eadf04184e
commit
aeed45cc70
|
@ -1,18 +1,23 @@
|
||||||
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;
|
||||||
height:100%
|
/* Firefox, other Gecko */
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* Opera/IE 8+ */
|
||||||
|
height: 100%
|
||||||
}
|
}
|
||||||
p{
|
|
||||||
margin: 0px;
|
p {
|
||||||
|
margin: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
canvas {
|
canvas {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
#toolbar {
|
#toolbar {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column;
|
flex-flow: column;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
|
@ -22,8 +27,9 @@ 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;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
|
@ -33,14 +39,73 @@ canvas {
|
||||||
/* height: 100vh; */
|
/* height: 100vh; */
|
||||||
background-color: rgb(189, 189, 189);
|
background-color: rgb(189, 189, 189);
|
||||||
}
|
}
|
||||||
.button{
|
|
||||||
display:block;
|
.button {
|
||||||
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 20px;
|
right: 20px;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.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;
|
||||||
}
|
}
|
|
@ -1,37 +1,49 @@
|
||||||
<!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;" >
|
|
||||||
<canvas id="myCanvas"
|
<body style="margin:0;">
|
||||||
style="display: block;box-sizing: border-box;" ></canvas>
|
<canvas id="myCanvas" style="display: block;box-sizing: border-box;"></canvas>
|
||||||
<div id="toolbar">
|
<div id="toolbar">
|
||||||
<br>
|
<br>
|
||||||
<select id="shape-selector">
|
<select id="shape-selector">
|
||||||
<option value="PolyTwistColourWidth">PolyTwistColourWidth</option>
|
<option value="PolyTwistColourWidth">PolyTwistColourWidth</option>
|
||||||
<option value="FloralPhyllo">FloralPhyllo</option>
|
<option value="FloralPhyllo">FloralPhyllo</option>
|
||||||
<option value="FloralPhyllo_Accident">FloralPhyllo_Accident</option>
|
<option value="FloralPhyllo_Accident">FloralPhyllo_Accident</option>
|
||||||
<option value="Spiral1">Spiral1</option>
|
<option value="Spiral1">Spiral1</option>
|
||||||
<option value="FloralAccident">FloralAccident</option>
|
<option value="FloralAccident">FloralAccident</option>
|
||||||
<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>
|
|
@ -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];
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -5,7 +5,7 @@ class BaseShape {
|
||||||
|
|
||||||
initialise(config) {
|
initialise(config) {
|
||||||
for (let item of config) {
|
for (let item of config) {
|
||||||
const { element, listener } = addControl(item,this);
|
const { element, listener } = addControl(item, this);
|
||||||
this.controls.push({ element, listener });
|
this.controls.push({ element, listener });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -57,7 +57,7 @@ class PolyTwistColourWidth extends BaseShape {
|
||||||
for (let i = 0; i < this.depth; i++) {
|
for (let i = 0; i < this.depth; i++) {
|
||||||
const fraction = i / this.depth;
|
const fraction = i / this.depth;
|
||||||
const ncolour = LerpHex(this.colour1, this.colour2, fraction);
|
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
|
var c = 1; //something to do with width. but not width
|
||||||
//dont make larger than 270 unless altering the number of colours in lerpedColours
|
//dont make larger than 270 unless altering the number of colours in lerpedColours
|
||||||
for (let n = 200; n > 0; n -= 1) {
|
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 r = c * Math.sqrt(n);
|
||||||
const x = r * Math.cos(a) + centerX;
|
const x = r * Math.cos(a) + centerX;
|
||||||
const y = r * Math.sin(a) + centerY;
|
const y = r * Math.sin(a) + centerY;
|
||||||
|
@ -85,7 +85,7 @@ class FloralPhyllo extends BaseShape {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
class Spiral1 extends BaseShape {
|
class Spiral1 extends BaseShape {
|
||||||
constructor(sides,width, colour) {
|
constructor(sides, width, colour) {
|
||||||
super();
|
super();
|
||||||
this.sides = sides;
|
this.sides = sides;
|
||||||
this.width = width;
|
this.width = width;
|
||||||
|
@ -121,7 +121,7 @@ class Spiral1 extends BaseShape {
|
||||||
}
|
}
|
||||||
|
|
||||||
class FloralAccident extends BaseShape {
|
class FloralAccident extends BaseShape {
|
||||||
constructor(sides,width, colour) {
|
constructor(sides, width, colour) {
|
||||||
super();
|
super();
|
||||||
this.sides = sides;
|
this.sides = sides;
|
||||||
this.width = width;
|
this.width = width;
|
||||||
|
@ -156,7 +156,7 @@ class FloralAccident extends BaseShape {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
class FloralPhyllo_Accident extends BaseShape {
|
class FloralPhyllo_Accident extends BaseShape {
|
||||||
constructor(sides,width, colour1,colour2) {
|
constructor(sides, width, colour1, colour2) {
|
||||||
super();
|
super();
|
||||||
this.sides = sides;
|
this.sides = sides;
|
||||||
this.width = width;
|
this.width = width;
|
||||||
|
@ -170,7 +170,7 @@ class FloralPhyllo_Accident extends BaseShape {
|
||||||
|
|
||||||
for (let n = 0; n < 300; n += 1) {
|
for (let n = 0; n < 300; n += 1) {
|
||||||
let ncolour = LerpHex(this.colour1, this.colour2, Math.cos(rad(n / 2)));
|
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 r = c * Math.sqrt(n);
|
||||||
let x = r * Math.cos(a) + centerX;
|
let x = r * Math.cos(a) + centerX;
|
||||||
let y = r * Math.sin(a) + centerY;
|
let y = r * Math.sin(a) + centerY;
|
||||||
|
@ -181,7 +181,7 @@ class FloralPhyllo_Accident extends BaseShape {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
class Nodal_expanding 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();
|
super();
|
||||||
this.expand = expand;
|
this.expand = expand;
|
||||||
this.points = points;
|
this.points = points;
|
||||||
|
@ -192,7 +192,7 @@ class Nodal_expanding extends BaseShape {
|
||||||
}
|
}
|
||||||
|
|
||||||
draw(step) {
|
draw(step) {
|
||||||
let colour_change = this.colour_change/10
|
let colour_change = this.colour_change / 10
|
||||||
var angle = 360 / this.points * step
|
var angle = 360 / this.points * step
|
||||||
|
|
||||||
var start_angle = angle;
|
var start_angle = angle;
|
||||||
|
@ -218,7 +218,7 @@ class Nodal_expanding extends BaseShape {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
class Nodal extends BaseShape {
|
class Nodal extends BaseShape {
|
||||||
constructor(width,points,line_width,step,colour) {
|
constructor(width, points, line_width, step, colour) {
|
||||||
super();
|
super();
|
||||||
this.width = width;
|
this.width = width;
|
||||||
this.points = points;
|
this.points = points;
|
||||||
|
@ -226,7 +226,7 @@ class Nodal extends BaseShape {
|
||||||
this.step = step;
|
this.step = step;
|
||||||
this.colour = colour;
|
this.colour = colour;
|
||||||
}
|
}
|
||||||
// Draw_nodal(300, 100, 31, rotation, "blue");
|
// Draw_nodal(300, 100, 31, rotation, "blue");
|
||||||
draw(rotate) {
|
draw(rotate) {
|
||||||
// console.log(rotate)
|
// console.log(rotate)
|
||||||
var angle = 360 / this.points * this.step
|
var angle = 360 / this.points * this.step
|
||||||
|
@ -255,20 +255,20 @@ class Nodal extends BaseShape {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
class Phyllotaxis extends BaseShape {
|
class Phyllotaxis extends BaseShape {
|
||||||
constructor(width,nMax,colour1,colour2) {
|
constructor(width, nMax, colour1, colour2) {
|
||||||
super();
|
super();
|
||||||
this.width = width;
|
this.width = width;
|
||||||
this.nMax = nMax;
|
this.nMax = nMax;
|
||||||
this.colour1 = colour1;
|
this.colour1 = colour1;
|
||||||
this.colour2 = colour2;
|
this.colour2 = colour2;
|
||||||
}
|
}
|
||||||
// Draw_nodal(300, 100, 31, rotation, "blue");
|
// Draw_nodal(300, 100, 31, rotation, "blue");
|
||||||
draw(angle) {
|
draw(angle) {
|
||||||
|
|
||||||
for (let n = 0; n < this.nMax; n += 1) {
|
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 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 r = this.width * Math.sqrt(n);
|
||||||
const x = r * Math.cos(a) + centerX;
|
const x = r * Math.cos(a) + centerX;
|
||||||
const y = r * Math.sin(a) + centerY;
|
const y = r * Math.sin(a) + centerY;
|
||||||
|
@ -284,61 +284,166 @@ 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();
|
||||||
ctx.translate(centerX, centerY)//-(Math.sin(rad(angle)) *centerX));
|
ctx.translate(centerX, centerY)//-(Math.sin(rad(angle)) *centerX));
|
||||||
ctx.rotate(rad(angle + 180));
|
ctx.rotate(rad(angle + 180));
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
ctx.strokeStyle = colour;
|
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.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();
|
||||||
ctx.translate(centerX, centerY)//-(Math.sin(rad(angle)) *centerX));
|
ctx.translate(centerX, centerY)//-(Math.sin(rad(angle)) *centerX));
|
||||||
ctx.rotate(rad(angle + 180));
|
ctx.rotate(rad(angle + 180));
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
ctx.strokeStyle = colour;
|
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.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++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue