marwinm/website
3
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

background, mindmap

Browse Source
This commit is contained in:
Till Tomczak
2025-04-29 10:27:07 +02:00
parent 0852ea070b
commit 63f45abb3e
9 changed files with 442 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
static/neural-network-background.js
View File

@@ -52,39 +52,39 @@ class NeuralNetworkBackground {
// Colors - Subtilere Farben mit weniger Intensität
this.darkModeColors = {
background: '#030610', // Dunkler Hintergrund beibehalten
nodeColor: '#6685cc', // Gedämpftere Knotenfarbe
nodePulse: '#a0b5e0', // Weniger intensives Pulsieren
nodeColor: '#5a75b0', // Gedämpftere Knotenfarbe
nodePulse: '#94a7d0', // Weniger intensives Pulsieren
connectionColor: '#485880', // Subtilere Verbindungen
flowColor: '#c0d7f0' // Sanfteres Blitz-Blau
flowColor: '#a0c7e0' // Sanfteres Blitz-Blau
};
// Farben für Light Mode dezenter und harmonischer gestalten
this.lightModeColors = {
background: '#f5f7fa', // Hellerer Hintergrund für subtileren Kontrast
nodeColor: '#5a77c2', // Gedämpfteres Blau
nodePulse: '#80b9e0', // Sanfteres Türkis für Glow
nodeColor: '#5570b0', // Gedämpfteres Blau
nodePulse: '#7aa8d0', // Sanfteres Türkis für Glow
connectionColor: '#8a8fc0', // Dezenteres Lila
flowColor: '#6d97d0' // Sanfteres Blau für Blitze
};
// Konfigurationsobjekt für subtilere, sanftere Neuronen
this.config = {
nodeCount: 45, // Weniger Knoten für bessere Leistung und subtileres Aussehen
nodeCount: 35, // Reduziert für bessere Leistung und subtileres Aussehen
nodeSize: 3.5, // Größere Knoten für bessere Sichtbarkeit
nodeVariation: 0.5, // Weniger Varianz für gleichmäßigeres Erscheinungsbild
connectionDistance: 250, // Größere Verbindungsdistanz
connectionOpacity: 0.22, // Deutlichere Verbindungen
animationSpeed: 0.02, // Langsamere Animation für sanftere Bewegung
pulseSpeed: 0.002, // Langsameres Pulsieren für subtilere Animation
flowSpeed: 0.6, // Langsamer für bessere Sichtbarkeit
flowDensity: 0.005, // Mehr Blitze gleichzeitig erzeugen
flowLength: 0.12, // Kürzere Blitze für dezentere Effekte
maxConnections: 4, // Mehr Verbindungen pro Neuron
connectionOpacity: 0.18, // Schwächere Verbindungen für subtileren Effekt
animationSpeed: 0.015, // Langsamere Animation für sanftere Bewegung
pulseSpeed: 0.0015, // Langsameres Pulsieren für subtilere Animation
flowSpeed: 0.45, // Langsamer für bessere Sichtbarkeit
flowDensity: 0.003, // Weniger Blitze gleichzeitig erzeugen
flowLength: 0.1, // Kürzere Blitze für dezentere Effekte
maxConnections: 3, // Weniger Verbindungen pro Neuron
clusteringFactor: 0.45, // Stärkeres Clustering
linesFadeDuration: 4000, // Längere Dauer für sanfteres Ein-/Ausblenden von Linien (ms)
linesWidth: 0.9, // Dickere unterliegende Linien für bessere Sichtbarkeit
linesOpacity: 0.35, // Höhere Opazität für Linien
maxFlowCount: 10 // Maximale Anzahl gleichzeitiger Flüsse
linesWidth: 0.7, // Dünnere unterliegende Linien für subtileren Eindruck
linesOpacity: 0.3, // Geringere Opazität für Linien
maxFlowCount: 8 // Begrenzte Anzahl gleichzeitiger Flüsse
};
// Initialize
@@ -414,7 +414,7 @@ class NeuralNetworkBackground {
}
// Zufällig neue Flows zwischen Knoten initiieren
if (Math.random() < 0.02) { // 2% Chance in jedem Frame
if (Math.random() < 0.015) { // Reduzierte Chance in jedem Frame (1.5% statt 2%)
const randomNodeIdx = Math.floor(Math.random() * this.nodes.length);
const node = this.nodes[randomNodeIdx];
@@ -659,8 +659,8 @@ class NeuralNetworkBackground {
positions[i * 2 + 1] = node.y;
// Sanftere Pulsation mit moderaterem Aktivierungsboost
const activationBoost = node.isActive ? 1.4 : 1.0;
let pulse = (Math.sin(node.pulsePhase) * 0.35 + 1.3) * activationBoost;
const activationBoost = node.isActive ? 1.3 : 1.0;
let pulse = (Math.sin(node.pulsePhase) * 0.25 + 1.2) * activationBoost;
// Größe basierend auf Konnektivität und Wichtigkeit, aber subtiler
const connectivityFactor = 1 + (node.connections.length / this.config.maxConnections) * 1.1;
@@ -722,7 +722,7 @@ class NeuralNetworkBackground {
this.gl.uniform4f(
this.programInfo.uniformLocations.color,
r, g, b,
node.isActive ? 0.85 : 0.75 // Geringere Sichtbarkeit für subtileres Erscheinungsbild
node.isActive ? 0.75 : 0.65 // Geringere Sichtbarkeit für subtileres Erscheinungsbild
);
// Draw each node individually for better control
@@ -744,7 +744,7 @@ class NeuralNetworkBackground {
const y2 = fromNode.y + (toNode.y - fromNode.y) * progress;
// Calculate opacity based on fade state
let opacity = connection.opacity * connection.fadeProgress;
let opacity = connection.opacity * connection.fadeProgress * 0.85; // Reduzierte Gesamtopazität
// Erhöhe kurzzeitig die Opazität bei kürzlich aktivierten Verbindungen
if (connection.lastActivated && now - connection.lastActivated < 800) {
@@ -846,7 +846,7 @@ class NeuralNetworkBackground {
flowColor.r / 255,
flowColor.g / 255,
flowColor.b / 255,
0.55 // Dezent, aber sichtbar
0.7 * fadeFactor // Reduced from higher values
);
this.gl.enable(this.gl.BLEND);
this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE);
@@ -1107,20 +1107,20 @@ class NeuralNetworkBackground {
this.ctx.beginPath();
this.ctx.moveTo(p1.x, p1.y);
this.ctx.lineTo(p2.x, p2.y);
this.ctx.strokeStyle = `rgba(${rgbFlowColor.r}, ${rgbFlowColor.g}, ${rgbFlowColor.b}, ${0.15 * fadeFactor})`;
this.ctx.lineWidth = 3;
this.ctx.shadowColor = `rgba(${rgbFlowColor.r}, ${rgbFlowColor.g}, ${rgbFlowColor.b}, ${0.1 * fadeFactor})`;
this.ctx.shadowBlur = 7;
this.ctx.strokeStyle = `rgba(${rgbFlowColor.r}, ${rgbFlowColor.g}, ${rgbFlowColor.b}, ${0.12 * fadeFactor})`; // Reduziert von 0.15
this.ctx.lineWidth = 2.5; // Reduziert von 3
this.ctx.shadowColor = `rgba(${rgbFlowColor.r}, ${rgbFlowColor.g}, ${rgbFlowColor.b}, ${0.08 * fadeFactor})`; // Reduziert von 0.1
this.ctx.shadowBlur = 6; // Reduziert von 7
this.ctx.stroke();
// Zickzack-Blitz mit geringerer Vibration generieren
const zigzag = this.generateZigZagPoints(p1, p2, 6, 7);
// Hauptblitz mit dezenterem Ein-/Ausblendeffekt
this.ctx.strokeStyle = `rgba(${rgbFlowColor.r}, ${rgbFlowColor.g}, ${rgbFlowColor.b}, ${0.5 * fadeFactor})`;
this.ctx.lineWidth = 1.2;
this.ctx.shadowColor = `rgba(${rgbFlowColor.r}, ${rgbFlowColor.g}, ${rgbFlowColor.b}, ${0.25 * fadeFactor})`;
this.ctx.shadowBlur = 6;
this.ctx.strokeStyle = `rgba(${rgbFlowColor.r}, ${rgbFlowColor.g}, ${rgbFlowColor.b}, ${0.4 * fadeFactor})`; // Reduziert von 0.5
this.ctx.lineWidth = 1.0; // Reduziert von 1.2
this.ctx.shadowColor = `rgba(${rgbFlowColor.r}, ${rgbFlowColor.g}, ${rgbFlowColor.b}, ${0.2 * fadeFactor})`; // Reduziert von 0.25
this.ctx.shadowBlur = 5; // Reduziert von 6
this.ctx.beginPath();
this.ctx.moveTo(zigzag[0].x, zigzag[0].y);
for (let i = 1; i < zigzag.length; i++) {
@@ -1128,11 +1128,11 @@ class NeuralNetworkBackground {
}
this.ctx.stroke();
// Weniger Funken mit geringerer Vibration
const sparks = this.generateSparkPoints(zigzag, 4 + Math.floor(Math.random() * 2));
// Intensivere und mehr Funken
const sparks = this.generateSparkPoints(zigzag, 8 + Math.floor(Math.random() * 5));
// Intensiveres Funkenlicht mit dynamischem Ein-/Ausblendeffekt
const sparkBaseOpacity = this.isDarkMode ? 0.75 : 0.65;
const sparkBaseOpacity = this.isDarkMode ? 0.85 : 0.75;
const sparkBaseColor = this.isDarkMode
? `rgba(230, 240, 250, ${sparkBaseOpacity * fadeFactor})`
: `rgba(190, 230, 250, ${sparkBaseOpacity * fadeFactor})`;
@@ -1140,10 +1140,10 @@ class NeuralNetworkBackground {
for (const spark of sparks) {
this.ctx.beginPath();
// Subtilere Stern/Funken-Form
const points = 4 + Math.floor(Math.random() * 3); // 4-6 Spitzen
const outerRadius = spark.size * 1.8;
const innerRadius = spark.size * 0.4;
// Dynamischere Stern/Funken-Form
const points = 4 + Math.floor(Math.random() * 4); // 4-7 Spitzen
const outerRadius = spark.size * 2.0;
const innerRadius = spark.size * 0.35;
for (let i = 0; i < points * 2; i++) {
const radius = i % 2 === 0 ? outerRadius : innerRadius;
@@ -1159,12 +1159,24 @@ class NeuralNetworkBackground {
}
this.ctx.closePath();
this.ctx.fillStyle = sparkBaseColor;
// Intensiveres Glühen
this.ctx.shadowColor = this.isDarkMode
? `rgba(170, 215, 245, ${0.4 * fadeFactor})`
: `rgba(140, 200, 245, ${0.3 * fadeFactor})`;
this.ctx.shadowBlur = 7;
? `rgba(200, 225, 255, ${0.6 * fadeFactor})`
: `rgba(160, 220, 255, ${0.5 * fadeFactor})`;
this.ctx.shadowBlur = 12;
this.ctx.fillStyle = sparkBaseColor;
this.ctx.fill();
// Zusätzlicher innerer Glüheffekt für ausgewählte Funken
if (spark.size > 4 && Math.random() > 0.5) {
this.ctx.beginPath();
this.ctx.arc(spark.x, spark.y, spark.size * 0.6, 0, Math.PI * 2);
this.ctx.fillStyle = this.isDarkMode
? `rgba(240, 250, 255, ${0.7 * fadeFactor})`
: `rgba(220, 240, 255, ${0.6 * fadeFactor})`;
this.ctx.fill();
}
}
// Deutlicherer und länger anhaltender Fortschrittseffekt an der Spitze des Blitzes
@@ -1183,23 +1195,6 @@ class NeuralNetworkBackground {
this.ctx.fill();
}
// Verstärkter Start- und Endblitz-Fade mit längerer Sichtbarkeit
if (startProgress < 0.15) {
const startFade = startProgress / 0.15; // 0 bis 1
const startGlow = this.ctx.createRadialGradient(
p1.x, p1.y, 0,
p1.x, p1.y, 12 * startFade
);
startGlow.addColorStop(0, `rgba(${rgbFlowColor.r}, ${rgbFlowColor.g}, ${rgbFlowColor.b}, ${0.6 * fadeFactor * startFade})`);
startGlow.addColorStop(0.7, `rgba(${rgbFlowColor.r}, ${rgbFlowColor.g}, ${rgbFlowColor.b}, ${0.3 * fadeFactor * startFade})`);
startGlow.addColorStop(1, `rgba(${rgbFlowColor.r}, ${rgbFlowColor.g}, ${rgbFlowColor.b}, 0)`);
this.ctx.fillStyle = startGlow;
this.ctx.beginPath();
this.ctx.arc(p1.x, p1.y, 12 * startFade, 0, Math.PI * 2);
this.ctx.fill();
}
this.ctx.restore();
}
}