technicalkiwi/animate
1
0
Fork 0
mirror of https://github.com/SamEyeBam/animate.git synced 2025-09-28 15:05:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Sam
2023-03-21 19:08:08 +13:00
parent c15e5b1722
commit 572f9b4401
5 changed files with 350 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
docs/js/helper.js
View File

@@ -8,7 +8,7 @@ async function fetchConfig(className) {
{
type: "range",
min: -180,
max: 180 ,
max: 180,
defaultValue: -90,
property: "rotation",
},
@@ -22,10 +22,28 @@ async function fetchConfig(className) {
{ type: "color", defaultValue: "#4287f5", property: "colour2" },
],
Spiral1: [
{ type: "range", min: 1, max: 50, defaultValue: 20, property: "sides" },
{ type: "range", min: 1, max: 50, defaultValue: 20, property: "sides" },
{ type: "range", min: 1, max: 600, defaultValue: 240, property: "width" },
{ type: "color", defaultValue: "#4287f5", property: "colour" },
],
FloralAccident: [
{ type: "range", min: 1, max: 50, defaultValue: 20, property: "sides" },
{ type: "range", min: 1, max: 600, defaultValue: 240, property: "width" },
{ type: "color", defaultValue: "#4287f5", property: "colour" },
],
FloralPhyllo_Accident: [
{ type: "range", min: 1, max: 50, defaultValue: 20, property: "sides" },
{ type: "range", min: 1, max: 600, defaultValue: 240, property: "width" },
{ type: "color", defaultValue: "#2D81FC", property: "colour1" },
{ type: "color", defaultValue: "#FC0362", property: "colour2" },
],
Nodal_expanding: [
{ type: "range", min: 1, max: 100, defaultValue: 5, property: "expand" },
{ type: "range", min: 1, max: 100000, defaultValue: 100000, property: "points" },
{ type: "range", min: 1, max: 10, defaultValue: 3, property: "line_width" },
{ type: "color", defaultValue: "#2D81FC", property: "colour1" },
{ type: "color", defaultValue: "#FC0362", property: "colour2" },
],
};
return config[className];
}
@@ -110,6 +128,66 @@ function drawEyelid(width, x1, y1, colour) {
ctx.stroke();
}
function drawEyelidAccident(x1, y1) {
let leafWidth = 120;
let leafHeight = 60;
x1 -= centerX;
y1 -= centerY;
let angle = Math.atan(y1 / x1);
// if(angle >=Math.PI){
// angle -=Math.PI
// console.log("greater called")
// }
angle = Math.abs(angle);
let x2Old = 0 + leafWidth;
let y2Old = 0;
let x3Old = 0 + leafWidth / 2;
let y3Old = 0 + leafHeight / 2;
let x4Old = 0 + leafWidth / 2;
let y4Old = 0 - leafHeight / 2;
let x2 = x2Old * Math.cos(angle) - y2Old * Math.sin(angle);
let y2 = x2Old * Math.sin(angle) + y2Old * Math.cos(angle);
let x3 = x3Old * Math.cos(angle) - y3Old * Math.sin(angle);
let y3 = x3Old * Math.sin(angle) + y3Old * Math.cos(angle);
let x4 = x4Old * Math.cos(angle) - y4Old * Math.sin(angle);
let y4 = x4Old * Math.sin(angle) + y4Old * Math.cos(angle);
let oldx1 = x1;
let oldy1 = y1;
x1 += centerX; // +x2/2
y1 += centerY; // +x2/2
x2 += x1;
y2 += y1;
x3 += x1;
y3 += y1;
x4 += x1;
y4 += y1;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.quadraticCurveTo(x3, y3, x2, y2);
ctx.moveTo(x1, y1);
ctx.quadraticCurveTo(x4, y4, x2, y2);
ctx.fillStyle = "black";
ctx.fill();
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.quadraticCurveTo(x3, y3, x2, y2);
ctx.moveTo(x1, y1);
ctx.quadraticCurveTo(x4, y4, x2, y2);
ctx.strokeStyle = "orange";
ctx.stroke();
}
function DrawPolygon(sides, width, rotation, colour) {
ctx.beginPath();
ctx.moveTo(