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

more shapes

This commit is contained in:
Sam 2023-03-23 17:28:46 +13:00
parent 572f9b4401
commit e3d07a3c4e
4 changed files with 158 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/index.html
View File

@ -5,9 +5,9 @@
<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;" onclick="manualToggleSettings()">
<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">
@ -17,6 +17,8 @@
<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="Phyllotaxis">Phyllotaxis</option>
</select> </select>
<div id="custom"></div> <div id="custom"></div>
<br> <br>

14
docs/js/helper.js
View File

@ -43,6 +43,20 @@ async function fetchConfig(className) {
{ type: "range", min: 1, max: 10, defaultValue: 3, property: "line_width" }, { type: "range", min: 1, max: 10, defaultValue: 3, property: "line_width" },
{ type: "color", defaultValue: "#2D81FC", property: "colour1" }, { type: "color", defaultValue: "#2D81FC", property: "colour1" },
{ type: "color", defaultValue: "#FC0362", property: "colour2" }, { type: "color", defaultValue: "#FC0362", property: "colour2" },
{ type: "range", min: 0, max: 10, defaultValue: 5, property: "colour_change" },
],
Nodal: [
{ type: "range", min: 1, max: 1000, defaultValue: 400, property: "width" },
{ type: "range", min: 1, max: 20, defaultValue: 10, property: "points" },
{ type: "range", min: 1, max: 10, defaultValue: 3, property: "line_width" },
{ type: "range", min: 1, max: 20, defaultValue: 1, property: "step" },
{ type: "color", defaultValue: "#2D81FC", property: "colour" },
],
Phyllotaxis: [
{ type: "range", min: 1, max: 40, defaultValue: 24, property: "width" },
{ type: "range", min: 1, max: 1000, defaultValue: 300, property: "nMax" },
{ type: "color", defaultValue: "#2D81FC", property: "colour1" },
{ type: "color", defaultValue: "#FC0362", property: "colour2" },
], ],
}; };
return config[className]; return config[className];

13
docs/js/index.js
View File

@ -24,6 +24,8 @@ function createInstance(className, args) {
FloralAccident: FloralAccident, FloralAccident: FloralAccident,
FloralPhyllo_Accident: FloralPhyllo_Accident, FloralPhyllo_Accident: FloralPhyllo_Accident,
Nodal_expanding: Nodal_expanding, Nodal_expanding: Nodal_expanding,
Nodal: Nodal,
Phyllotaxis:Phyllotaxis
// Add more class constructors here as needed // Add more class constructors here as needed
}; };
@ -76,6 +78,17 @@ document
let toolbarShowing = true; let toolbarShowing = true;
document.addEventListener("keydown", toggleSettings); document.addEventListener("keydown", toggleSettings);
function manualToggleSettings(){
console.log("hi")
toolbarShowing = !toolbarShowing;
let tb = document.getElementById("toolbar");
if (toolbarShowing) {
tb.style.display = "flex";
} else {
tb.style.display = "none";
}
}
function toggleSettings(e) { function toggleSettings(e) {
if (e.key == "p") { if (e.key == "p") {
toolbarShowing = !toolbarShowing; toolbarShowing = !toolbarShowing;

129
docs/js/objects.js
View File

@ -181,17 +181,18 @@ class FloralPhyllo_Accident extends BaseShape {
} }
} }
class Nodal_expanding extends BaseShape { class Nodal_expanding extends BaseShape {
constructor(expand,points,line_width,colour1,colour2) { constructor(expand,points,line_width,colour1,colour2,colour_change) {
super(); super();
this.expand = expand; this.expand = expand;
this.points = points; this.points = points;
this.line_width = line_width; this.line_width = line_width;
this.colour1 = colour1; this.colour1 = colour1;
this.colour2 = colour2; this.colour2 = colour2;
this.colour_change = colour_change
} }
draw(step) { draw(step) {
let colour_change = 0.5 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;
@ -216,4 +217,128 @@ class Nodal_expanding extends BaseShape {
} }
} }
class Nodal extends BaseShape {
constructor(width,points,line_width,step,colour) {
super();
this.width = width;
this.points = points;
this.line_width = line_width;
this.step = step;
this.colour = colour;
}
// Draw_nodal(300, 100, 31, rotation, "blue");
draw(rotate) {
// console.log(rotate)
var angle = 360 / this.points * this.step
ctx.beginPath();
var start_angle = angle;
var done = false;
var total_moves = 1;
ctx.moveTo(centerX + (Math.cos(rad(angle + rotate)) * this.width), centerY + (Math.sin(rad(angle + rotate)) * this.width));
while (done != true) {
if ((total_moves * this.step) % this.points != 0) {
total_moves++
}
else {
total_moves++
done = true
}
}
for (let z = 1; z <= total_moves; z++) {
ctx.lineTo(centerX + (Math.cos(rad(angle * z + rotate)) * this.width), centerY + (Math.sin(rad(angle * z + rotate)) * this.width));
}
ctx.lineWidth = this.line_width;//try 1
ctx.strokeStyle = this.colour;
ctx.stroke();
}
}
class Phyllotaxis extends BaseShape {
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(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)**2);
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;
ctx.beginPath();
ctx.arc(x, y, 8, 0, 2 * Math.PI);
ctx.fillStyle = ncolour;
// ctx.fillStyle = colourToText(ncolour);
ctx.fill();
// console.log(this.c)
}
}
}
class SquareTwist_angle extends BaseShape {
constructor(expand,points,line_width,colour1,colour2,colour_change) {
super();
this.expand = expand;
this.points = points;
this.line_width = line_width;
this.colour1 = colour1;
this.colour2 = colour2;
this.colour_change = colour_change
}
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.stroke();
ctx.restore();
}
// DrawSquareTwist_angle(400,0,rotation,"red")
draw (width, rotation,innerRotation, colour){
let out_angle = innerRotation;
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)
}
}
}
class rectangle_pattern1 extends BaseShape {
constructor(expand,points,line_width,colour1,colour2,colour_change) {
super();
this.expand = expand;
this.points = points;
this.line_width = line_width;
this.colour1 = colour1;
this.colour2 = colour2;
this.colour_change = colour_change
}
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.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);
}
}
}