635 lines
27 KiB
HTML
635 lines
27 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Welle Hintergrund (SVG)</title>
|
|
<style type="text/css">
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
background-color: #f0f0f0;
|
|
margin: 0;
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
h1 {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
svg {
|
|
border: 1px solid #ccc; /* Optional: Rahmen zur Visualisierung */
|
|
overflow: visible; /* Damit Punkte am Rand nicht abgeschnitten werden */
|
|
}
|
|
|
|
.point {
|
|
fill: #000000; /* Farbe der Punkte */
|
|
opacity: 0.8; /* Punkte sichtbar machen */
|
|
r: 3.5; /* Einheitliche Punktgröße */
|
|
}
|
|
|
|
.line {
|
|
fill: none; /* Keine Füllung für die Linie */
|
|
stroke-width: 2; /* Dickere Hauptlinie */
|
|
}
|
|
|
|
.offset-spline {
|
|
fill: none;
|
|
stroke-width: 1; /* Dickere mittlere Linien */
|
|
stroke-opacity: 0.6; /* Angepasste Transparenz */
|
|
transition: stroke-opacity 0.3s ease;
|
|
}
|
|
|
|
.offset-spline-far {
|
|
fill: none;
|
|
stroke-width: 1; /* Etwas dickere äußere Linien */
|
|
stroke-opacity: 0.4; /* Höhere Transparenz */
|
|
transition: stroke-opacity 0.3s ease;
|
|
}
|
|
.offset-spline-far-2 {
|
|
fill: none;
|
|
stroke-width: 1; /* Etwas dickere äußere Linien */
|
|
stroke-opacity: 0.2; /* Höhere Transparenz */
|
|
transition: stroke-opacity 0.3s ease;
|
|
}
|
|
|
|
/* Steuerelemente für die Slider */
|
|
.controls {
|
|
margin-top: 20px;
|
|
padding: 15px;
|
|
background-color: #fff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
width: 600px;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.control-group {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.control-row {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.control-label {
|
|
width: 140px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.control-slider {
|
|
flex-grow: 1;
|
|
margin: 0 10px;
|
|
}
|
|
|
|
.control-value {
|
|
width: 50px;
|
|
text-align: right;
|
|
}
|
|
|
|
input[type="range"] {
|
|
width: 100%;
|
|
}
|
|
|
|
input[type="number"] {
|
|
width: 60px;
|
|
text-align: center;
|
|
}
|
|
|
|
.control-header {
|
|
font-weight: bold;
|
|
margin-bottom: 10px;
|
|
color: #333;
|
|
border-bottom: 1px solid #eee;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
button {
|
|
padding: 8px 15px;
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: #45a049;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Welleneffekt (SVG)</h1>
|
|
|
|
<svg width="600" height="200" id="point-canvas">
|
|
<defs>
|
|
<linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
<stop offset="0%" style="stop-color:rgb(226, 245, 172);stop-opacity:1" />
|
|
<stop offset="35%" style="stop-color:rgb(135, 241, 36);stop-opacity:1" />
|
|
<stop offset="70%" style="stop-color:rgb(62, 200, 232);stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:rgb(4, 162, 254);stop-opacity:1" />
|
|
</linearGradient>
|
|
</defs>
|
|
<!-- Punkte und Linie werden hier per JavaScript hinzugefügt -->
|
|
</svg>
|
|
|
|
<!-- Steuerelemente hinzufügen -->
|
|
<div class="controls">
|
|
<div class="control-header">Wellenanimation einstellen</div>
|
|
|
|
<div class="control-group">
|
|
<div class="control-row">
|
|
<div class="control-label">Zeitfaktor:</div>
|
|
<input type="range" id="time-factor" class="control-slider" min="0.2" max="3.0" step="0.1" value="1.0">
|
|
<div class="control-value"><span id="time-factor-value">1.0</span></div>
|
|
</div>
|
|
|
|
<div class="control-row">
|
|
<div class="control-label">Amplitude:</div>
|
|
<input type="range" id="amplitude-factor" class="control-slider" min="0.2" max="3.0" step="0.1" value="1.0">
|
|
<div class="control-value"><span id="amplitude-factor-value">1.0</span></div>
|
|
</div>
|
|
|
|
<div class="control-row">
|
|
<div class="control-label">Turbulenz:</div>
|
|
<input type="range" id="turbulence" class="control-slider" min="0" max="3" step="0.1" value="0.5">
|
|
<div class="control-value"><span id="turbulence-value">0.5</span></div>
|
|
</div>
|
|
|
|
<div class="control-row">
|
|
<div class="control-label">Geschwindigkeit:</div>
|
|
<input type="range" id="animation-speed" class="control-slider" min="0.2" max="10.0" step="0.1" value="1.0">
|
|
<div class="control-value"><span id="animation-speed-value">1.0</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="control-header">Linieneinstellungen</div>
|
|
|
|
<div class="control-group">
|
|
<div class="control-row">
|
|
<div class="control-label">Linienanzahl:</div>
|
|
<input type="range" id="total-lines" class="control-slider" min="4" max="24" step="1" value="12">
|
|
<div class="control-value"><span id="total-lines-value">12</span></div>
|
|
</div>
|
|
|
|
<div class="control-row">
|
|
<div class="control-label">Linienabstand:</div>
|
|
<input type="range" id="line-offset" class="control-slider" min="5" max="30" step="1" value="12">
|
|
<div class="control-value"><span id="line-offset-value">12</span></div>
|
|
</div>
|
|
|
|
<div class="control-row">
|
|
<div class="control-label">Linienspannung:</div>
|
|
<input type="range" id="tension" class="control-slider" min="0.5" max="5.0" step="0.1" value="1.5">
|
|
<div class="control-value"><span id="tension-value">1.5</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="reset-button">Zurücksetzen</button>
|
|
</div>
|
|
|
|
<!-- Anime.js wird vorerst nicht benötigt, kann aber später wieder eingebunden werden -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
|
|
|
|
<script>
|
|
// Konstanten und Konfigurationen
|
|
const svg = document.getElementById('point-canvas');
|
|
const svgNS = "http://www.w3.org/2000/svg";
|
|
let TENSION = 1.5;
|
|
const MIN_OFFSET_FACTOR = 0.2;
|
|
const OFFSET_NEAR = 5;
|
|
let OFFSET_FAR = 12;
|
|
let TOTAL_LINES = 12; // Mehr Linien für ein dichteres Aussehen
|
|
|
|
// Neue Variable für Animationsgeschwindigkeit
|
|
let animationSpeed = 1.0;
|
|
|
|
// Variablen für die Animation
|
|
let currentAnimation = null;
|
|
let continuousAnimation = null;
|
|
|
|
// DOM-Elemente für Steuerelemente
|
|
const timeFactorSlider = document.getElementById('time-factor');
|
|
const timeFactorValue = document.getElementById('time-factor-value');
|
|
const amplitudeFactorSlider = document.getElementById('amplitude-factor');
|
|
const amplitudeFactorValue = document.getElementById('amplitude-factor-value');
|
|
const turbulenceSlider = document.getElementById('turbulence');
|
|
const turbulenceValue = document.getElementById('turbulence-value');
|
|
const totalLinesSlider = document.getElementById('total-lines');
|
|
const totalLinesValue = document.getElementById('total-lines-value');
|
|
const lineOffsetSlider = document.getElementById('line-offset');
|
|
const lineOffsetValue = document.getElementById('line-offset-value');
|
|
const tensionSlider = document.getElementById('tension');
|
|
const tensionValue = document.getElementById('tension-value');
|
|
const animationSpeedSlider = document.getElementById('animation-speed');
|
|
const animationSpeedValue = document.getElementById('animation-speed-value');
|
|
const resetButton = document.getElementById('reset-button');
|
|
|
|
// Mouse-tracking Variablen
|
|
let isMouseOver = false;
|
|
let mouseX = 0;
|
|
let mouseY = 0;
|
|
|
|
// Dynamische Faktoren
|
|
let timeFactor = 1.0;
|
|
let amplitudeFactor = 1.0;
|
|
let turbulence = 0.5;
|
|
|
|
// Basispunkte definieren
|
|
const points = [
|
|
{ x: 20, y: 100 },
|
|
{ x: 150, y: 60 },
|
|
{ x: 300, y: 140 },
|
|
{ x: 450, y: 60 },
|
|
{ x: 580, y: 100 }
|
|
];
|
|
|
|
// Speichern der DOM-Elemente für Punkte
|
|
let pointElements = [];
|
|
|
|
// Container für Pfad-Referenzen
|
|
const pathElements = {};
|
|
|
|
// Berechnet Normalen für alle Punkte
|
|
function calculateNormals(points) {
|
|
const normals = [];
|
|
for (let i = 0; i < points.length; i++) {
|
|
const p0 = i > 0 ? points[i - 1] : points[i];
|
|
const p1 = points[i];
|
|
const p2 = i < points.length - 1 ? points[i + 1] : points[i];
|
|
|
|
let dx = p2.x - p0.x;
|
|
let dy = p2.y - p0.y;
|
|
|
|
// Tangente an Endpunkten approximieren
|
|
if (i === 0) {
|
|
dx = points[1].x - points[0].x;
|
|
dy = points[1].y - points[0].y;
|
|
} else if (i === points.length - 1) {
|
|
dx = points[i].x - points[i-1].x;
|
|
dy = points[i].y - points[i-1].y;
|
|
}
|
|
|
|
const length = Math.sqrt(dx * dx + dy * dy);
|
|
let normalX = 0, normalY = 0;
|
|
|
|
if (length > 0) {
|
|
normalX = -dy / length;
|
|
normalY = dx / length;
|
|
}
|
|
|
|
normals.push({ x: normalX, y: normalY });
|
|
}
|
|
return normals;
|
|
}
|
|
|
|
// Erzeugt Pfad mit variablem Offset
|
|
function generateOffsetSplinePath(originalPoints, normals, offsetDistance) {
|
|
if (originalPoints.length < 2) return "";
|
|
|
|
// Startpunkt des Offset-Pfades
|
|
const startNormal = normals[0];
|
|
const startOffsetX = originalPoints[0].x + startNormal.x * offsetDistance * MIN_OFFSET_FACTOR;
|
|
const startOffsetY = originalPoints[0].y + startNormal.y * offsetDistance * MIN_OFFSET_FACTOR;
|
|
let d = `M ${startOffsetX} ${startOffsetY}`;
|
|
|
|
for (let i = 0; i < originalPoints.length - 1; i++) {
|
|
const p0 = i > 0 ? originalPoints[i - 1] : originalPoints[0];
|
|
const p1 = originalPoints[i];
|
|
const p2 = originalPoints[i + 1];
|
|
const p3 = i < originalPoints.length - 2 ? originalPoints[i + 2] : originalPoints[originalPoints.length - 1];
|
|
|
|
// Originale Kontrollpunkte berechnen
|
|
const cp1x = p1.x + (p2.x - p0.x) / 6 * TENSION;
|
|
const cp1y = p1.y + (p2.y - p0.y) / 6 * TENSION;
|
|
const cp2x = p2.x - (p3.x - p1.x) / 6 * TENSION;
|
|
const cp2y = p2.y - (p3.y - p1.y) / 6 * TENSION;
|
|
|
|
// Normalen an den relevanten Punkten
|
|
const n1 = normals[i];
|
|
const n2 = normals[i+1];
|
|
|
|
// Offset-Kontrollpunkte und Endpunkt berechnen
|
|
const offsetCp1x = cp1x + n1.x * offsetDistance;
|
|
const offsetCp1y = cp1y + n1.y * offsetDistance;
|
|
const offsetCp2x = cp2x + n2.x * offsetDistance;
|
|
const offsetCp2y = cp2y + n2.y * offsetDistance;
|
|
const offsetP2x = p2.x + n2.x * offsetDistance * MIN_OFFSET_FACTOR;
|
|
const offsetP2y = p2.y + n2.y * offsetDistance * MIN_OFFSET_FACTOR;
|
|
|
|
// Füge kubisches Bézier-Segment hinzu
|
|
d += ` C ${offsetCp1x} ${offsetCp1y}, ${offsetCp2x} ${offsetCp2y}, ${offsetP2x} ${offsetP2y}`;
|
|
}
|
|
return d;
|
|
}
|
|
|
|
// Erstellt oder aktualisiert einen Pfad
|
|
function updateOrCreatePath(existingPath, points, normals, offsetDistance, className) {
|
|
const d = generateOffsetSplinePath(points, normals, offsetDistance);
|
|
|
|
if (existingPath) {
|
|
existingPath.setAttribute('d', d);
|
|
return existingPath;
|
|
} else {
|
|
const path = document.createElementNS(svgNS, 'path');
|
|
path.setAttribute('class', className);
|
|
path.setAttribute('stroke', 'url(#lineGradient)');
|
|
path.setAttribute('d', d);
|
|
svg.appendChild(path);
|
|
return path;
|
|
}
|
|
}
|
|
|
|
// Erstellt SVG-Punktelemente
|
|
function createPoints(points) {
|
|
return points.map(p => {
|
|
const circle = document.createElementNS(svgNS, 'circle');
|
|
circle.setAttribute('class', 'point');
|
|
circle.setAttribute('cx', p.x);
|
|
circle.setAttribute('cy', p.y);
|
|
circle.setAttribute('r', 3.5);
|
|
svg.appendChild(circle);
|
|
return circle;
|
|
});
|
|
}
|
|
|
|
// Aktualisiert Punktpositionen
|
|
function updatePointsVisualization(points, pointElements) {
|
|
points.forEach((p, i) => {
|
|
if (pointElements[i]) {
|
|
pointElements[i].setAttribute('cx', p.x);
|
|
pointElements[i].setAttribute('cy', p.y);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Hauptaktualisierungsfunktion für die Animation
|
|
function updateVisualization() {
|
|
const normals = calculateNormals(points);
|
|
|
|
// Zeit-basierter Animationsfaktor für die Offset-Linien
|
|
const time = Date.now() / 1000;
|
|
|
|
// Füge turbulente Bewegung hinzu wenn Maus über SVG
|
|
const turbulenceFactor = true ?
|
|
turbulence * Math.sin(time * 3) :
|
|
turbulence * 0.3 * Math.sin(time * 1.5);
|
|
|
|
// Zeichne die Hauptlinie
|
|
pathElements.main = updateOrCreatePath(pathElements.main, points, normals, 0, 'line');
|
|
|
|
// Zeichne mehrere Offset-Linien in unterschiedlichen Abständen
|
|
for (let i = 1; i <= TOTAL_LINES; i++) {
|
|
// Berechne einen variablen Offset für jede Linie
|
|
const offsetFactor = i / TOTAL_LINES;
|
|
const maxOffset = OFFSET_FAR * 2.5;
|
|
|
|
|
|
// Verschiedene dynamische Wellenkomponenten
|
|
const primaryWave = Math.sin(time * timeFactor * 0.8 + i * 0.2) * 2 * amplitudeFactor;
|
|
const secondaryWave = Math.cos(time * timeFactor * 0.5 + i * 0.3) * 2 * amplitudeFactor;
|
|
const tertiaryWave = Math.sin(time * timeFactor * 1.2 + i * 0.15) * turbulenceFactor;
|
|
|
|
// Kombiniere alle Wellenkomponenten
|
|
const wavePhase1 = primaryWave + tertiaryWave;
|
|
const wavePhase2 = secondaryWave + tertiaryWave * 0.7;
|
|
|
|
// Positive Offsets (oberhalb der Hauptlinie)
|
|
const offsetPositive = maxOffset * offsetFactor + wavePhase1;
|
|
const className = offsetFactor < 0.3 ? 'offset-spline' :
|
|
offsetFactor < 0.6 ? 'offset-spline-far' : 'offset-spline-far-2';
|
|
|
|
// Speichere jede Linie mit einem eindeutigen Schlüssel
|
|
const keyPos = `line_pos_${i}`;
|
|
pathElements[keyPos] = updateOrCreatePath(
|
|
pathElements[keyPos],
|
|
points,
|
|
normals,
|
|
offsetPositive,
|
|
className
|
|
);
|
|
|
|
// Negative Offsets (unterhalb der Hauptlinie)
|
|
const offsetNegative = -maxOffset * offsetFactor + wavePhase2;
|
|
const keyNeg = `line_neg_${i}`;
|
|
pathElements[keyNeg] = updateOrCreatePath(
|
|
pathElements[keyNeg],
|
|
points,
|
|
normals,
|
|
offsetNegative,
|
|
className
|
|
);
|
|
}
|
|
|
|
// Aktualisiere Punkte
|
|
updatePointsVisualization(points, pointElements);
|
|
|
|
// Alle Punkteelemente nach vorne bringen
|
|
pointElements.forEach(p => svg.appendChild(p));
|
|
}
|
|
|
|
// Animation starten
|
|
function startAnimation() {
|
|
// Alle bestehenden Animationen stoppen
|
|
if (currentAnimation) anime.remove(currentAnimation);
|
|
if (continuousAnimation) anime.remove(continuousAnimation);
|
|
|
|
// Basis-Animation
|
|
currentAnimation = anime({
|
|
targets: points,
|
|
y: function(p, i) {
|
|
const baseY = [100, 60, 140, 60, 100][i];
|
|
return baseY;
|
|
},
|
|
duration: 100 / animationSpeed,
|
|
direction: 'alternate',
|
|
loop: true,
|
|
easing: 'easeInOutSine',
|
|
delay: anime.stagger(100 / animationSpeed),
|
|
update: updateVisualization,
|
|
complete: startContinuousAnimation
|
|
});
|
|
}
|
|
|
|
// Kontinuierliche wellenförmige Animation
|
|
function startContinuousAnimation() {
|
|
// Stoppen einer möglicherweise noch laufenden Animation
|
|
if (continuousAnimation) anime.remove(continuousAnimation);
|
|
|
|
continuousAnimation = anime({
|
|
targets: points,
|
|
y: function(p, i) {
|
|
const baseY = i % 2 === 0 ? 100 : i % 3 === 0 ? 60 : 140;
|
|
const amplitude = 20;
|
|
return function() {
|
|
// Komplexere Wellenbewegung mit mehreren Frequenzen und dynamischen Faktoren
|
|
const t = Date.now() / 1000 * animationSpeed; // Direkte Multiplikation der Zeit mit der Geschwindigkeit
|
|
|
|
// Berechne dynamische Amplitude basierend auf Position und Zeit
|
|
const dynamicAmplitude = amplitude * amplitudeFactor;
|
|
|
|
// Mehrere überlagerte Wellen mit dynamischen Faktoren
|
|
const wave1 = dynamicAmplitude * Math.sin(t * timeFactor * 0.8 + i * 0.7);
|
|
const wave2 = dynamicAmplitude/2 * Math.sin(t * timeFactor * 1.2 + i * 0.5);
|
|
const wave3 = dynamicAmplitude/4 * Math.sin(t * timeFactor * 2.1 + i * 0.3);
|
|
|
|
// Füge Mauseinfluss hinzu wenn Maus über dem SVG
|
|
let mouseEffect = 0;
|
|
if (isMouseOver) {
|
|
const dx = p.x - mouseX;
|
|
const distanceFactor = Math.max(0, 1 - Math.abs(dx) / 200);
|
|
mouseEffect = (mouseY - baseY) * distanceFactor * 0.3;
|
|
}
|
|
|
|
return baseY + wave1 + wave2 + wave3 + mouseEffect;
|
|
};
|
|
},
|
|
duration: (1000 / animationSpeed),
|
|
autoplay: true,
|
|
easing: 'linear',
|
|
loop: true,
|
|
update: function() {
|
|
requestAnimationFrame(updateVisualization);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Event-Listener für Steuerelemente
|
|
function setupControlListeners() {
|
|
// Zeitfaktor
|
|
timeFactorSlider.addEventListener('input', function() {
|
|
timeFactor = parseFloat(this.value);
|
|
timeFactorValue.textContent = timeFactor.toFixed(1);
|
|
});
|
|
|
|
// Amplitudenfaktor
|
|
amplitudeFactorSlider.addEventListener('input', function() {
|
|
amplitudeFactor = parseFloat(this.value);
|
|
amplitudeFactorValue.textContent = amplitudeFactor.toFixed(1);
|
|
});
|
|
|
|
// Turbulenz
|
|
turbulenceSlider.addEventListener('input', function() {
|
|
turbulence = parseFloat(this.value);
|
|
turbulenceValue.textContent = turbulence.toFixed(1);
|
|
});
|
|
|
|
// Animationsgeschwindigkeit
|
|
animationSpeedSlider.addEventListener('input', function() {
|
|
const newSpeed = parseFloat(this.value);
|
|
|
|
// Nur aktualisieren, wenn sich der Wert tatsächlich ändert
|
|
if (newSpeed !== animationSpeed) {
|
|
animationSpeed = newSpeed;
|
|
animationSpeedValue.textContent = animationSpeed.toFixed(1);
|
|
// Animation komplett neu starten, um Geschwindigkeitsänderungen zu übernehmen
|
|
anime.remove(points);
|
|
if (currentAnimation) anime.remove(currentAnimation);
|
|
if (continuousAnimation) anime.remove(continuousAnimation);
|
|
startAnimation();
|
|
}
|
|
});
|
|
|
|
// Gesamtanzahl der Linien
|
|
totalLinesSlider.addEventListener('input', function() {
|
|
TOTAL_LINES = parseInt(this.value);
|
|
totalLinesValue.textContent = TOTAL_LINES;
|
|
|
|
// Bestehende Linien entfernen, die nicht mehr benötigt werden
|
|
for (let key in pathElements) {
|
|
if (key.startsWith('line_pos_') || key.startsWith('line_neg_')) {
|
|
const lineNum = parseInt(key.split('_').pop());
|
|
if (lineNum > TOTAL_LINES) {
|
|
if (pathElements[key].parentNode) {
|
|
pathElements[key].parentNode.removeChild(pathElements[key]);
|
|
}
|
|
delete pathElements[key];
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Linienabstand
|
|
lineOffsetSlider.addEventListener('input', function() {
|
|
OFFSET_FAR = parseInt(this.value);
|
|
lineOffsetValue.textContent = OFFSET_FAR;
|
|
});
|
|
|
|
// Linienspannung
|
|
tensionSlider.addEventListener('input', function() {
|
|
TENSION = parseFloat(this.value);
|
|
tensionValue.textContent = TENSION.toFixed(1);
|
|
});
|
|
|
|
// Zurücksetzen-Button
|
|
resetButton.addEventListener('click', function() {
|
|
// Standardwerte wiederherstellen
|
|
timeFactorSlider.value = 1.0;
|
|
amplitudeFactorSlider.value = 1.0;
|
|
turbulenceSlider.value = 0.5;
|
|
totalLinesSlider.value = 12;
|
|
lineOffsetSlider.value = 12;
|
|
tensionSlider.value = 1.5;
|
|
animationSpeedSlider.value = 1.0;
|
|
|
|
// UI-Werte aktualisieren
|
|
timeFactorValue.textContent = "1.0";
|
|
amplitudeFactorValue.textContent = "1.0";
|
|
turbulenceValue.textContent = "0.5";
|
|
totalLinesValue.textContent = "12";
|
|
lineOffsetValue.textContent = "12";
|
|
tensionValue.textContent = "1.5";
|
|
animationSpeedValue.textContent = "1.0";
|
|
|
|
// Variablen zurücksetzen
|
|
timeFactor = 1.0;
|
|
amplitudeFactor = 1.0;
|
|
turbulence = 0.5;
|
|
TOTAL_LINES = 12;
|
|
OFFSET_FAR = 12;
|
|
TENSION = 1.5;
|
|
animationSpeed = 1.0;
|
|
|
|
// Animation neu starten
|
|
anime.remove(points);
|
|
if (currentAnimation) anime.remove(currentAnimation);
|
|
if (continuousAnimation) anime.remove(continuousAnimation);
|
|
startAnimation();
|
|
});
|
|
|
|
// Mouse-Tracking für SVG
|
|
svg.addEventListener('mouseover', function() {
|
|
isMouseOver = true;
|
|
});
|
|
|
|
svg.addEventListener('mouseout', function() {
|
|
isMouseOver = false;
|
|
});
|
|
|
|
svg.addEventListener('mousemove', function(e) {
|
|
const rect = svg.getBoundingClientRect();
|
|
mouseX = e.clientX - rect.left;
|
|
mouseY = e.clientY - rect.top;
|
|
});
|
|
}
|
|
|
|
// Initialisierung
|
|
function init() {
|
|
pointElements = createPoints(points);
|
|
setupControlListeners();
|
|
updateVisualization();
|
|
startAnimation();
|
|
}
|
|
|
|
// Starte die Anwendung
|
|
init();
|
|
</script>
|
|
</body>
|
|
</html>
|