Ihor_Zhekov/Websites
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

5

Browse Source
This commit is contained in:
Ihor_Zhekov
2026-02-06 13:26:38 +01:00
parent 73968dfbd6
commit 44a88dcfad
2 changed files with 31 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
Profice WebSite/scripts/hex-background.js
View File

@@ -12,12 +12,14 @@
hexSize: 30,
lineWidth: 1,
maxLineWidth: 2.5,
baseOpacity: 0.2,
maxOpacity: 0.7,
magnetRadius: 180,
baseOpacity: 0.15,
maxOpacity: 0.6,
magnetRadius: 200,
maxDisplacement: 12,
returnSpeed: 0.1,
// Colors (teal to orange gradient based on proximity)
// Base color (neutral gray)
baseR: 119, baseG: 119, baseB: 100,
// Colors for proximity effect (teal to orange)
tealR: 38, tealG: 166, tealB: 154,
orangeR: 245, orangeG: 124, orangeB: 0
};
@@ -104,27 +106,28 @@
}
ctx.closePath();
// Interpolate color: base gray -> teal -> orange
if (this.colorInfluence > 0.01) {
let r, g, b;
if (this.colorInfluence < 0.5) {
// Gray to teal
const t = this.colorInfluence * 2;
r = Math.round(119 + (CONFIG.tealR - 119) * t);
g = Math.round(119 + (CONFIG.tealG - 119) * t);
b = Math.round(100 + (CONFIG.tealB - 100) * t);
} else {
// Teal to orange
const t = (this.colorInfluence - 0.5) * 2;
r = Math.round(CONFIG.tealR + (CONFIG.orangeR - CONFIG.tealR) * t);
g = Math.round(CONFIG.tealG + (CONFIG.orangeG - CONFIG.tealG) * t);
b = Math.round(CONFIG.tealB + (CONFIG.orangeB - CONFIG.tealB) * t);
}
ctx.strokeStyle = `rgba(${r}, ${g}, ${b}, ${this.opacity})`;
// Smooth color interpolation: gray -> teal -> orange based on proximity
let r, g, b;
if (this.colorInfluence < 0.01) {
// Base gray color
r = CONFIG.baseR;
g = CONFIG.baseG;
b = CONFIG.baseB;
} else if (this.colorInfluence < 0.6) {
// Gray to teal (smooth transition)
const t = this.colorInfluence / 0.6;
r = Math.round(CONFIG.baseR + (CONFIG.tealR - CONFIG.baseR) * t);
g = Math.round(CONFIG.baseG + (CONFIG.tealG - CONFIG.baseG) * t);
b = Math.round(CONFIG.baseB + (CONFIG.tealB - CONFIG.baseB) * t);
} else {
ctx.strokeStyle = `rgba(119, 119, 100, ${this.opacity})`;
// Teal to orange (only very close to cursor)
const t = (this.colorInfluence - 0.6) / 0.4;
r = Math.round(CONFIG.tealR + (CONFIG.orangeR - CONFIG.tealR) * t);
g = Math.round(CONFIG.tealG + (CONFIG.orangeG - CONFIG.tealG) * t);
b = Math.round(CONFIG.tealB + (CONFIG.orangeB - CONFIG.tealB) * t);
}
ctx.strokeStyle = `rgba(${r}, ${g}, ${b}, ${this.opacity})`;
ctx.lineWidth = this.lineWidth;
ctx.stroke();
}