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

rfid

Browse Source
This commit is contained in:
Sam
2023-04-17 18:10:38 +12:00
parent aeed45cc70
commit ff94cff820
15 changed files with 1493 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/index.html
View File

@@ -34,8 +34,8 @@
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)">
<p>Speed</p>
<input type="text" id="inputDegPerSec" value="10" onchange="ChangeDegPerSec(this.value)">
<br>
<p>Controls</p>
<div class="controls">

22
docs/js/helper.js
View File

@@ -3,15 +3,11 @@ async function fetchConfig(className) {
const config = {
PolyTwistColourWidth: [
{ type: "range", min: 3, max: 10, defaultValue: 5, property: "sides" },
{ type: "range", min: 1, max: 600, defaultValue: 400, property: "width" },
{ type: "range", min: 400, max: 400, defaultValue: 400, property: "width" },
{ type: "range", min: 2, max: 5, defaultValue: 5, property: "line_width" },
{ type: "range", min: 1, max: 100, defaultValue: 50, property: "depth" },
{
type: "range",
min: -180,
max: 180,
defaultValue: -90,
property: "rotation",
},
{ type: "range", min: -180, max: 180, defaultValue: -90, property: "rotation", },
{ type: "range", min: 1, max: 500, defaultValue: 100, property: "speedMultiplier", },
{ type: "color", defaultValue: "#4287f5", property: "colour1" },
{ type: "color", defaultValue: "#42f57b", property: "colour2" },
],
@@ -219,7 +215,7 @@ function drawEyelidAccident(x1, y1) {
ctx.stroke();
}
function DrawPolygon(sides, width, rotation, colour) {
function DrawPolygon(sides, width, rotation, colour,line_width) {
ctx.beginPath();
ctx.moveTo(
centerX + width * Math.cos((rotation * Math.PI) / 180),
@@ -229,14 +225,14 @@ function DrawPolygon(sides, width, rotation, colour) {
for (var i = 1; i <= sides; i += 1) {
ctx.lineTo(
centerX +
width *
Math.cos((i * 2 * Math.PI) / sides + (rotation * Math.PI) / 180),
width *
Math.cos((i * 2 * Math.PI) / sides + (rotation * Math.PI) / 180),
centerY +
width * Math.sin((i * 2 * Math.PI) / sides + (rotation * Math.PI) / 180)
width * Math.sin((i * 2 * Math.PI) / sides + (rotation * Math.PI) / 180)
);
}
ctx.strokeStyle = colour;
ctx.lineWidth = 3;
ctx.lineWidth = line_width;
ctx.stroke();
}

7
docs/js/index.js
View File

@@ -7,7 +7,7 @@ centerX = ctx.canvas.width / 2;
centerY = ctx.canvas.height / 2;
let deg_per_sec = 5;
let deg_per_sec = 10;
let targetFps = 60;
let frameDuration = 1000 / targetFps;
@@ -39,6 +39,8 @@ function createInstance(className, args) {
}
}
async function updateDrawObj() {
const shapeSelector = document.getElementById("shape-selector");
const selectedShape = shapeSelector.value;
@@ -52,6 +54,9 @@ async function updateDrawObj() {
.map((item) => item.defaultValue);
drawObj = createInstance(selectedShape, defaultValues);
// drawObj = await createShapeWithRandomProperties(813311281, config1);
console.log(drawObj)
drawObj.initialise(config);
}

68
docs/js/objects.js
View File

@@ -1,6 +1,7 @@
class BaseShape {
constructor() {
this.controls = []; // Keep track of created elements and event listeners
this.speedMultiplier = 100;
}
initialise(config) {
@@ -8,6 +9,9 @@ class BaseShape {
const { element, listener } = addControl(item, this);
this.controls.push({ element, listener });
}
const { element, listener } = addControl({ type: "range", min: 1, max: 500, defaultValue: 100, property: "speedMultiplier", }, this);
this.controls.push({ element, listener });
}
remove() {
@@ -30,20 +34,23 @@ class BaseShape {
}
class PolyTwistColourWidth extends BaseShape {
constructor(sides, width, depth, rotation, colour1, colour2) {
constructor(sides, width,line_width, depth, rotation, speedMultiplier,colour1, colour2) {
super();
this.sides = sides;
this.width = width;
this.line_width = line_width;
this.depth = depth;
this.rotation = rotation;
this.speedMultiplier = speedMultiplier;
this.colour1 = colour1;
this.colour2 = colour2;
}
draw(innerRotation) {
draw(rotation) {
rotation*=(this.speedMultiplier/100)
let out_angle = 0;
const innerAngle = 180 - ((this.sides - 2) * 180) / this.sides;
const scopeAngle = innerRotation - (innerAngle * Math.floor(innerRotation / innerAngle));
const scopeAngle = rotation - (innerAngle * Math.floor(rotation / innerAngle));
if (scopeAngle < innerAngle / 2) {
out_angle = innerAngle / (2 * Math.cos((2 * Math.PI * scopeAngle) / (3 * innerAngle))) - innerAngle / 2;
@@ -57,7 +64,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,this.line_width);
}
}
}
@@ -68,19 +75,22 @@ class FloralPhyllo extends BaseShape {
this.depth = depth;
this.colour1 = colour1;
this.colour2 = colour2;
this.speedMultiplier = 500;
}
draw(angle) {
draw(rotation) {
rotation*=(this.speedMultiplier/100)
// var c = 24; //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
for (let n = 200; n > 0; n -= 1) {
const a = n * angle / 1000; //137.5;
// let ncolour = LerpHex(this.colour1, this.colour2, n);
const a = n * rotation / 1000; //137.5;
const r = c * Math.sqrt(n);
const x = r * Math.cos(a) + centerX;
const y = r * Math.sin(a) + centerY;
drawEyelid(n * 2.4 + 40, x, y, this.colour1);
drawEyelid(n * 2.4 + 40, x, y, ncolour);
}
}
}
@@ -93,6 +103,7 @@ class Spiral1 extends BaseShape {
}
draw(rotation) {
rotation*=(this.speedMultiplier/100)
var rot = Math.round((this.sides - 2) * 180 / this.sides * 2)
var piv = 360 / this.sides;
var stt = 0.5 * Math.PI - rad(rot) //+ rad(rotation);
@@ -129,6 +140,7 @@ class FloralAccident extends BaseShape {
}
draw(rotation) {
rotation*=(this.speedMultiplier/100)
var rot = Math.round((this.sides - 2) * 180 / this.sides * 2)
var piv = 360 / this.sides;
var stt = 0.5 * Math.PI - rad(rot) //+ rad(rotation);
@@ -164,13 +176,13 @@ class FloralPhyllo_Accident extends BaseShape {
this.colour2 = colour2;
}
draw(angle) {
draw(rotation) {
rotation*=(this.speedMultiplier/100)
var c = 24; //something to do with width. but not width
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 * (rotation / 1000 + 100); //137.5;
let r = c * Math.sqrt(n);
let x = r * Math.cos(a) + centerX;
let y = r * Math.sin(a) + centerY;
@@ -191,9 +203,10 @@ class Nodal_expanding extends BaseShape {
this.colour_change = colour_change
}
draw(step) {
let colour_change = this.colour_change / 10
var angle = 360 / this.points * step
draw(rotation) {
rotation*=(this.speedMultiplier/100)
let colour_change = this.colour_change / 8
var angle = 360 / this.points * rotation
var start_angle = angle;
var done = false;
@@ -209,6 +222,7 @@ class Nodal_expanding extends BaseShape {
length += this.expand;
ctx.lineWidth = this.line_width;//try 1
ctx.strokeStyle = ncolour;
ctx.lineCap = "round"
// ctx.strokeStyle = colourToText(ncolour);
console.log(ncolour)
ctx.stroke();
@@ -227,14 +241,15 @@ class Nodal extends BaseShape {
this.colour = colour;
}
// Draw_nodal(300, 100, 31, rotation, "blue");
draw(rotate) {
draw(rotation) {
rotation*=(this.speedMultiplier/100)
// 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));
ctx.moveTo(centerX + (Math.cos(rad(angle + rotation)) * this.width), centerY + (Math.sin(rad(angle + rotation)) * this.width));
while (done != true) {
if ((total_moves * this.step) % this.points != 0) {
@@ -246,7 +261,7 @@ class Nodal extends BaseShape {
}
}
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.lineTo(centerX + (Math.cos(rad(angle * z + rotation)) * this.width), centerY + (Math.sin(rad(angle * z + rotation)) * this.width));
}
ctx.lineWidth = this.line_width;//try 1
ctx.strokeStyle = this.colour;
@@ -263,12 +278,12 @@ class Phyllotaxis extends BaseShape {
this.colour2 = colour2;
}
// Draw_nodal(300, 100, 31, rotation, "blue");
draw(angle) {
draw(rotation) {
rotation*=(this.speedMultiplier/100)
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 a = n * (rotation / 1000)//137.5;
const r = this.width * Math.sqrt(n);
const x = r * Math.cos(a) + centerX;
const y = r * Math.sin(a) + centerY;
@@ -302,12 +317,13 @@ class SquareTwist_angle extends BaseShape {
ctx.restore();
}
// DrawSquareTwist_angle(400,0,rotation,"red")
draw(innerRotation) {
let out_angle = innerRotation;
draw(rotation) {
rotation*=(this.speedMultiplier/100)
let out_angle = rotation;
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++) {
this.drawSquare(innerRotation * i, this.width * widthMultiplier ** i, this.colour1)
this.drawSquare(rotation * i, this.width * widthMultiplier ** i, this.colour1)
}
}
@@ -333,6 +349,7 @@ class rectangle_pattern1 extends BaseShape {
}
// Draw_rectangle_pattern1(rotation, squares, 200, "blue");
draw(rotation) {
rotation*=(this.speedMultiplier/100)
for (let z = 0; z < 360; z += 360 / this.squares) {
this.drawSquare(z + rotation, this.width, this.colour1);
}
@@ -354,14 +371,15 @@ class EyePrototype extends BaseShape {
];
this.cooldown = 0;
}
drawEyelid(step) {
drawEyelid(rotation) {
rotation*=(this.speedMultiplier/100)
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.quadraticCurveTo(250, 250 - rotation, 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.quadraticCurveTo(250, 250 + rotation, this.points[1][0], this.points[0][1]);
ctx.stroke();
}
eyelidCut(step) {