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

rau options and fixes

This commit is contained in:
Sam 2025-04-12 00:48:34 +12:00
parent a05627e456
commit fc6e2026b7
2 changed files with 122 additions and 28 deletions

93
docs/js/helper.js
View File

@ -101,17 +101,49 @@ async function fetchConfig(className) {
],
RaysInShape: [
{ type: "range", min: 50, max: 1000, defaultValue: 300, property: "rays" },
{ type: "range", min: 1, max: 1000, defaultValue: 2, property: "speed" },
{ type: "range", min: 1, max: 30, defaultValue: 2, property: "speed" },
{ type: "checkbox", defaultValue: true, property: "doesWave" },
{ type: "range", min: 1, max: 200, defaultValue: 100, property: "speedVertRate" },
{ type: "range", min: 1, max: 200, defaultValue: 100, property: "speedHorrRate" },
{ type: "range", min: 1, max: 200, defaultValue: 100, property: "speedVert" },
{ type: "range", min: 1, max: 200, defaultValue: 100, property: "speedHorr" },
{ type: "range", min: 10, max: 2000, defaultValue: 800, property: "boxSize" },
{ type: "range", min: 10, max: 200, defaultValue: 50, property: "trailLength" },
{ type: "range", min: 1, max: 200, defaultValue: 20, property: "trailLength" },
{ type: "range", min: 1, max: 500, defaultValue: 5, property: "lineWidth" },
{ type: "color", defaultValue: "#43dbad", property: "colourFree" },
{ type: "color", defaultValue: "#f05c79", property: "colourContained" },
{ type: "header", text: "--CollisionBox---" },
{ type: "checkbox", defaultValue: false, property: "boxVisible" },
// {
// type: "dropdown",
// property: "exampleDropdown",
// defaultValue: "",
// options: [
// { value: "", label: "None" },
// { value: "field_white", label: "Field Whtie" },
// ]
// },
// {
// type: "button",
// label: "Apply Background",
// method: "applyBackground"
// }
// {
// type: "range",
// min: 1,
// max: 10,
// defaultValue: 5,
// property: "magnitude",
// callback: (instance, newValue) => instance.setMagnitude(newValue)
// },
],
};
return config[className];
}
function addControl(item, instance) {
let parentDiv = document.getElementById("custom");
@ -124,6 +156,7 @@ function addControl(item, instance) {
if (item.type === "range") {
control = document.createElement("input");
control.type = "range";
control.id = "el" + item.property;
control.min = item.min;
control.max = item.max;
control.value = item.defaultValue;
@ -176,12 +209,24 @@ function addControl(item, instance) {
instance[item.property] = newValue;
title.innerText = item.property + ": " + newValue;
})
}
else if (item.type === "checkbox") {
control = document.createElement("input");
control.type = item.type;
control.checked = item.defaultValue;
instance[item.property] = item.defaultValue;
control.id = "el" + item.property;
// control.height = "20px";
control.addEventListener("change", (event) => {
const newValue = event.target.checked;
instance[item.property] = newValue;
title.innerText = item.property + ": " + newValue;
})
}
if (item.type != "header") {
control.className = "control";
control.id = "el" + item.property;
// control.id = "el" + item.property;
}
if (item.type != "button" && item.type != "header") {
@ -192,6 +237,23 @@ function addControl(item, instance) {
return { element: control };
}
function updateControlInput(value, controlName) {// Find and update the slider element
const elementSlider = document.querySelector('input[type="range"][id="el'+controlName+'"]');
if (elementSlider) {
// Update the slider value
elementSlider.value = value;
// Update the text display
const elementSliderText = document.getElementById('elTextspeedVert');
if (elementSliderText) {
elementSliderText.innerText = "speedVert: " + Math.round(this.speedVert);
}
}
console.log("Updated control input:", controlName, value);
}
function drawEyelid(width, x1, y1, colour) {
x1 -= centerX;
y1 -= centerY;
@ -331,6 +393,15 @@ function waveNormal(x, max) {
return val
}
function hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
function LerpHex(a, b, amount) {
var ah = parseInt(a.replace(/#/g, ""), 16),
ar = ah >> 16,
@ -404,17 +475,17 @@ function rotatePointTmp(x, y, centerXX, centerYY, rotation) {
console.log(Math.cos(orgAngle - rad(rotation)) * d)
console.log(d)
// console.log(d)
let newPointX = Math.cos(orgAngle - rad(rotation+90)) * d + centerXX;
let newPointY = Math.sin(orgAngle - rad(rotation+90)) * d + centerYY;
let newPointX = Math.cos(orgAngle - rad(rotation + 90)) * d + centerXX;
let newPointY = Math.sin(orgAngle - rad(rotation + 90)) * d + centerYY;
return [newPointX, newPointY]
}
function rotatePoint(x,y,rotation){
function rotatePoint(x, y, rotation) {
let nCos = Math.cos(rad(rotation))
// console.log(nCos*(180/Math.PI))
// console.log(rad(rotation))
let nSin = Math.sin(rad(rotation))
let newX = x*nCos - y*nSin
let newY = y*nCos + x*nSin
return [newX,newY]
}
let newX = x * nCos - y * nSin
let newY = y * nCos + x * nSin
return [newX, newY]
}

57
docs/js/objects.js
View File

@ -19,6 +19,7 @@ class BaseShape {
if (element && listener) {
element.removeEventListener("input", listener);
element.removeEventListener("click", listener);
element.removeEventListener("change", listener);
}
if (element && element.parentElement) {
element.parentElement.removeChild(element);
@ -676,7 +677,7 @@ class NewWave extends BaseShape {
}
class RaysInShape extends BaseShape {
constructor(rays, speed, speedVert, speedHorr, boxSize, trailLength = 50) {
constructor(rays, speed, doesWave,speedVertRate, speedHorrRate,speedVert, speedHorr, boxSize, trailLength = 50, lineWidth, colourFree, colourContained, boxVisible,) {
super();
this.rays = rays;
this.speed = speed;
@ -686,9 +687,16 @@ class RaysInShape extends BaseShape {
this.trailLength = trailLength;
this.rayObjects = [];
this.centerRays = []; // New array for rays heading to center
this.lineWidth = lineWidth;
this.boxVisible = boxVisible;
this.doesWave = doesWave;
this.colourFree = colourFree;
this.colourContained = colourContained;
this.speedHorrRate = speedHorrRate;
this.speedVertRate = speedVertRate;
}
initialise(config) {
initialise(config) { //is overide
for (let item of config) {
const { element, listener } = addControl(item, this);
this.controls.push({ element, listener });
@ -700,10 +708,10 @@ class RaysInShape extends BaseShape {
}, this);
this.controls.push({ element: speedElement, listener: speedListener });
const { element: trailElement, listener: trailListener } = addControl({
type: "range", min: 5, max: 200, defaultValue: this.trailLength, property: "trailLength"
}, this);
this.controls.push({ element: trailElement, listener: trailListener });
// const { element: trailElement, listener: trailListener } = addControl({
// type: "range", min: 5, max: 200, defaultValue: this.trailLength, property: "trailLength"
// }, this);
// this.controls.push({ element: trailElement, listener: trailListener });
// Prepare rayObjects for the first draw
this.prepareRayObjects();
@ -798,21 +806,22 @@ class RaysInShape extends BaseShape {
}
}
// Draw all segments of the trail
ctx.lineWidth = 3;
// Draw segments
for (let j = 1; j < ray.positions.length; j++) {
const prev = ray.positions[j - 1];
const curr = ray.positions[j];
// Fade color based on position in trail (newer = brighter)
// Fade alpha (newer = brighter)
const alpha = (j / ray.positions.length) * 0.8 + 0.2;
ctx.beginPath();
ctx.moveTo(prev.x, prev.y);
ctx.lineTo(curr.x, curr.y);
// Center-bound rays are pink
ctx.strokeStyle = `rgba(255, 51, 170, ${alpha})`;
// Contained rays
const col = hexToRgb(this.colourFree);
ctx.strokeStyle = `rgba(${col.r}, ${col.g}, ${col.b}, ${alpha})`;
ctx.stroke();
}
}
@ -821,6 +830,16 @@ class RaysInShape extends BaseShape {
draw(elapsed, deltaTime) {
deltaTime *= this.speedMultiplier / 100;
if (this.doesWave) {
const vertRate = this.speedVertRate /100;
const horrRate = this.speedHorrRate /100;
this.speedVert = Math.sin(elapsed / 10 * vertRate) * 100 + 100;
this.speedHorr = Math.sin(elapsed / 10 * horrRate) * 100 + 100;
updateControlInput(this.speedVert, "speedVert");
updateControlInput(this.speedHorr, "speedHorr");
console.log(this.controls)
}
// Define the box boundaries
const boxLeft = centerX - this.boxSize / 2;
const boxRight = centerX + this.boxSize / 2;
@ -828,10 +847,12 @@ class RaysInShape extends BaseShape {
const boxBottom = centerY + this.boxSize / 2;
// Draw the box boundary for visualization
ctx.strokeStyle = "white";
ctx.lineWidth = 1;
ctx.strokeRect(boxLeft, boxTop, this.boxSize, this.boxSize);
if (this.boxVisible) {
ctx.strokeStyle = "white";
ctx.lineWidth = 1;
ctx.strokeRect(boxLeft, boxTop, this.boxSize, this.boxSize);
}
ctx.lineWidth = this.lineWidth;
// Process ray movements and collisions
for (let j = 0; j < this.rayObjects.length; j++) {
const ray = this.rayObjects[j];
@ -945,7 +966,7 @@ class RaysInShape extends BaseShape {
}
// Draw the trail
ctx.lineWidth = 3;
// Draw all segments of the trail
for (let i = 1; i < ray.positions.length; i++) {
@ -963,7 +984,9 @@ class RaysInShape extends BaseShape {
if (curr.collision) {
ctx.strokeStyle = `rgba(255, 255, 0, ${alpha})`;
} else {
ctx.strokeStyle = `rgba(50, 50, 50, ${alpha})`; // Changed from pink to gray
const col = hexToRgb(this.colourContained);
ctx.strokeStyle = `rgba(${col.r}, ${col.g}, ${col.b}, ${alpha})`;
// ctx.strokeStyle = `rgba(50, 50, 50, ${alpha})`; // Changed from pink to gray
}
ctx.stroke();