giers10/auto-git-gui
1
0
Fork 0
Code Releases Activity

Refactor animeCat.js to improve glow animation logic and color interpolation

Browse Source
This commit is contained in:
Victor Giers
2025-05-26 07:20:09 +02:00
parent 35e695c983
commit d890b0b254
1 changed files with 48 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
animeCat.js
View File

@@ -143,40 +143,57 @@ window.AnimeCat = class AnimeCat {
} }
// Zeigt Progress der täglichen Commits an // Hilfsfunktionen zur Farbinterpolation
_lerp(a, b, t) { return a + (b - a) * t; } _lerp(a, b, t) { return a + (b - a) * t; }
_lerpColor(a, b, t) { _lerpColor(a, b, t) {
return [ return [
Math.round(this._lerp(a[0], b[0], t)), Math.round(this._lerp(a[0], b[0], t)),
Math.round(this._lerp(a[1], b[1], t)), Math.round(this._lerp(a[1], b[1], t)),
Math.round(this._lerp(a[2], b[2], t)), Math.round(this._lerp(a[2], b[2], t)),
]; ];
} }
animateCatGlow(commitCount) {
const glow = this.glow;
if (!glow) return;
// Farbinterpolation je nach Commits: // Animiert den Glow je nach Commit-Anzahl
function getGlowColor(count) { animateCatGlow(commitCount) {
if (count < 10) return [60, 230, 100]; // grün const glow = this.glow;
if (count < 50) return [100, 180, 255]; // blau if (!glow) return;
if (count < 100) return [180, 120, 255]; // lila
if (count < 500) return [255, 180, 60]; // orange // Glow-Farbstufen für die Commit-Bereiche
return [255, 100, 0]; // voll orange const stops = [
{ c: 0, color: [60, 230, 100], opacity: 0.00 }, // unsichtbar → grün
{ c: 10, color: [60, 230, 100], opacity: 0.25 }, // grün sichtbar
{ c: 50, color: [100, 180, 255], opacity: 0.40 }, // grün → blau
{ c: 100, color: [180, 120, 255], opacity: 0.55 }, // blau → lila
{ c: 500, color: [255, 180, 60], opacity: 0.90 }, // lila → orange
];
// Richtige Interpolationsstufe finden:
let lower = stops[0], upper = stops[stops.length - 1];
for (let i = 0; i < stops.length - 1; ++i) {
if (commitCount >= stops[i].c && commitCount < stops[i+1].c) {
lower = stops[i];
upper = stops[i+1];
break;
} }
const [r, g, b] = getGlowColor(commitCount);
// Skalierung bleibt wie gehabt
const minSize = 80, maxSize = 170;
const factor = Math.min(commitCount / 500, 1); // jetzt auf 500 skalieren!
const size = minSize + factor * (maxSize - minSize);
glow.style.width = `${size}px`;
glow.style.height = `${size}px`; // jetzt immer Kreis!
glow.style.opacity = 0.25 + 0.65 * factor;
glow.style.background = `radial-gradient(circle, rgba(${r},${g},${b},0.9) 0%, rgba(${r},${g},${b},0.13) 65%, rgba(0,0,0,0) 100%)`;
} }
const range = upper.c - lower.c || 1;
const t = Math.min(Math.max((commitCount - lower.c) / range, 0), 1);
// Farbe und Opazität sanft interpolieren
const [r, g, b] = this._lerpColor(lower.color, upper.color, t);
const opacity = this._lerp(lower.opacity, upper.opacity, t);
// Größe interpolieren (0–500 Commits)
const minSize = 80, maxSize = 170;
const sizeFactor = Math.min(commitCount / 500, 1);
const size = minSize + sizeFactor * (maxSize - minSize);
// Styles setzen
glow.style.width = `${size}px`;
glow.style.height = `${size}px`; // immer Kreis!
glow.style.opacity = opacity;
glow.style.background = `radial-gradient(circle, rgba(${r},${g},${b},0.85) 0%, rgba(${r},${g},${b},0.14) 70%, rgba(0,0,0,0) 100%)`;
}
// Bubble-Position absolut anpassen, wenn detached // Bubble-Position absolut anpassen, wenn detached
_positionBubbleDetached() { _positionBubbleDetached() {