// Handschriftliches Kritzeln - EXTREME Mausreaktion, schreibt bis alles voll ist // Helfer: paper, rnd(a,b), rndI(a,b), rcFor(key), W(), H() var paths = []; var currentPath = null; var strokeWidth = 0.5; var maxStrokeWidth = 25; var strokeGrowthPerPath = 0.15; var coverage = 0; var maxCoverage = 1.2; var writings = []; // Maus-Variablen var mousePos = new paper.Point(W() / 2, H() / 2); var lastMousePos = new paper.Point(W() / 2, H() / 2); var mouseInfluence = 0; var mouseSpeed = 0; var mouseAngle = 0; var mouseDistance = 0; var chaosLevel = 0; var mouseTrail = []; var maxTrailLength = 50; // Startposition oben links var currentX = 50; var currentY = 50; var textIndex = 0; var charIndex = 0; var text = "may you be happy "; // Neue Schreibbewegung starten function startNewWriting() { // Strichstärke wird bei jedem neuen Schreiben dicker strokeWidth = Math.min(strokeWidth + strokeGrowthPerPath, maxStrokeWidth); // EXTREME Maus-Beeinflussung der Position if (writings.length < 2) { currentX = rnd(20, 150); currentY = rnd(20, 150); } else { // Maus bestimmt stark wo geschrieben wird var mouseAttraction = mouseInfluence * 2.5; var mouseRepulsion = Math.sin(frameCount * 0.1) * mouseSpeed * 5; currentX = rnd(0, W()) + (mousePos.x - W() / 2) * mouseAttraction + mouseRepulsion * Math.cos(mouseAngle); currentY = rnd(0, H()) + (mousePos.y - H() / 2) * mouseAttraction + mouseRepulsion * Math.sin(mouseAngle); // Manchmal direkt bei der Maus starten if (mouseSpeed > 10 && rnd(0, 1) > 0.6) { currentX = mousePos.x + rnd(-100, 100); currentY = mousePos.y + rnd(-100, 100); } // Begrenzungen lockerer currentX = Math.max(-50, Math.min(W() + 50, currentX)); currentY = Math.max(-50, Math.min(H() + 50, currentY)); } currentPath = new paper.Path({ strokeColor: '#f1cedd', strokeWidth: strokeWidth, strokeCap: 'round', strokeJoin: 'round' }); currentPath.moveTo(new paper.Point(currentX, currentY)); paths.push(currentPath); charIndex = 0; } // Handschriftliche Buchstaben zeichnen function drawNextChar() { if (!currentPath) return; var char = text[textIndex % text.length]; // EXTREME Größen-Beeinflussung durch Maus var mouseSizeInfluence = Math.sin(mouseDistance * 0.05) * mouseSpeed * 2; var sizeMultiplier = 1 + mouseInfluence * 3 + Math.abs(Math.cos(mouseAngle * 5)) * mouseSpeed * 0.3; var size = (strokeWidth * 3 + rnd(5, 15) + mouseSizeInfluence * 20) * sizeMultiplier; // EXTREME Wobble durch Maus var wobbleIntensity = 5 + mouseInfluence * 40 + Math.abs(Math.sin(mouseAngle * 7)) * chaosLevel * 10 + mouseSpeed * 2; var wobble = rnd(-wobbleIntensity, wobbleIntensity); // EXTREME Rotation durch Mausbewegung var rotation = mouseAngle * mouseInfluence * 2 + Math.sin(frameCount * 0.05) * mouseSpeed * 0.5; // EXTREME Verzerrung durch Mausgeschwindigkeit var distortion = mouseSpeed * 3 + mouseInfluence * 20; // Maus-Trail Einfluss var trailInfluence = 0; if (mouseTrail.length > 0) { var lastTrail = mouseTrail[mouseTrail.length - 1]; trailInfluence = Math.sin(lastTrail.x * 0.1) * Math.cos(lastTrail.y * 0.1) * 30; } if (char === ' ') { currentX += size * 0.8 + distortion * rnd(-10, 10); } else if (char === 'm') { currentPath.lineTo(new paper.Point(currentX + wobble * 2, currentY - size + wobble + trailInfluence)); currentPath.lineTo(new paper.Point(currentX + size * 0.3 + distortion * 2, currentY + wobble * 3)); currentPath.lineTo(new paper.Point(currentX + size * 0.3 + wobble, currentY - size * 0.7 + wobble * 4)); currentPath.lineTo(new paper.Point(currentX + size * 0.6 + distortion * 2, currentY + wobble * 2)); currentPath.lineTo(new paper.Point(currentX + size * 0.6 + wobble, currentY - size * 0.7 + wobble * 4)); currentX += size * 0.7; } else if (char === 'a') { currentPath.quadraticCurveTo( new paper.Point(currentX + size * 0.3 + wobble * 3, currentY - size + wobble * 2 + distortion * 2), new paper.Point(currentX + size * 0.5 + trailInfluence, currentY - size * 0.5 + wobble * 2) ); currentPath.quadraticCurveTo( new paper.Point(currentX + size * 0.5 + distortion * 3, currentY + wobble * 2), new paper.Point(currentX + size * 0.2 + wobble, currentY + wobble) ); currentPath.moveTo(new paper.Point(currentX + size * 0.5, currentY - size * 0.5 + wobble * 2)); currentPath.lineTo(new paper.Point(currentX + size * 0.5 + distortion * 2, currentY + wobble * 3)); currentX += size * 0.6; } else if (char === 'y') { currentPath.lineTo(new paper.Point(currentX + size * 0.25 + wobble * 3, currentY - size * 0.3 + wobble * 2)); currentPath.lineTo(new paper.Point(currentX + size * 0.5 + trailInfluence, currentY - size * 0.7 + wobble * 2 + distortion)); currentPath.moveTo(new paper.Point(currentX + size * 0.25 + wobble, currentY - size * 0.3 + wobble * 2)); currentPath.lineTo(new paper.Point(currentX + size * 0.3 + distortion * 3, currentY + size * 0.5 + wobble * 3)); currentPath.quadraticCurveTo( new paper.Point(currentX + size * 0.2 + wobble * 4, currentY + size * 0.7 + wobble * 2), new paper.Point(currentX + trailInfluence, currentY + size * 0.5 + wobble) ); currentX += size * 0.6; } else if (char === 'o') { var centerX = currentX + size * 0.3; var centerY = currentY - size * 0.4; // EXTREME elliptische Verzerrung durch Maus var ellipseX = 1 + mouseInfluence * 2 + Math.sin(mouseAngle * 3) * mouseSpeed * 0.2; var ellipseY = 1 - mouseInfluence * 1.5 + Math.cos(mouseAngle * 3) * mouseSpeed * 0.2; currentPath.moveTo(new paper.Point(centerX + wobble, centerY - size * 0.3 * ellipseY + wobble * 2)); currentPath.quadraticCurveTo( new paper.Point(centerX + size * 0.35 * ellipseX + distortion * 3 + trailInfluence, centerY + wobble * 3), new paper.Point(centerX + wobble * 2, centerY + size * 0.3 * ellipseY + wobble) ); currentPath.quadraticCurveTo( new paper.Point(centerX - size * 0.35 * ellipseX - distortion * 3, centerY + wobble * 2), new paper.Point(centerX + wobble, centerY - size * 0.3 * ellipseY + wobble * 2) ); currentX += size * 0.7; } else if (char === 'u') { currentPath.lineTo(new paper.Point(currentX + wobble * 4, currentY - size * 0.7 + wobble * 2)); currentPath.lineTo(new paper.Point(currentX + trailInfluence, currentY - size * 0.2 + wobble * 3 + distortion * 2)); currentPath.quadraticCurveTo( new paper.Point(currentX + size * 0.2 + wobble * 3, currentY + wobble * 2), new paper.Point(currentX + size * 0.4 + distortion, currentY - size * 0.2 + wobble) ); currentPath.lineTo(new paper.Point(currentX + size * 0.4 + distortion * 3, currentY - size * 0.7 + wobble * 2)); currentPath.lineTo(new paper.Point(currentX + size * 0.4 + wobble, currentY + wobble * 3)); currentX += size * 0.5; } else if (char === 'b') { currentPath.lineTo(new paper.Point(currentX + wobble * 3, currentY - size * 1.2 + wobble * 2 + distortion * 2)); currentPath.lineTo(new paper.Point(currentX + trailInfluence, currentY + wobble * 2)); currentPath.moveTo(new paper.Point(currentX, currentY - size * 0.4 + wobble * 2)); currentPath.quadraticCurveTo( new paper.Point(currentX + size * 0.4 + distortion * 3, currentY - size * 0.8 + wobble * 3), new paper.Point(currentX + wobble, currentY - size * 0.1 + wobble) ); currentX += size * 0.5; } else if (char === 'e') { currentPath.lineTo(new paper.Point(currentX + size * 0.4 + distortion * 3, currentY - size * 0.4 + wobble * 2)); currentPath.quadraticCurveTo( new paper.Point(currentX + size * 0.4 + wobble * 3 + trailInfluence, currentY - size * 0.8 + wobble * 2), new paper.Point(currentX + size * 0.2 + wobble, currentY - size * 0.8 + wobble * 3 + distortion * 2) ); currentPath.quadraticCurveTo( new paper.Point(currentX - size * 0.1 + wobble * 4, currentY - size * 0.5 + wobble * 2), new paper.Point(currentX + size * 0.1, currentY + wobble * 3) ); currentPath.quadraticCurveTo( new paper.Point(currentX + size * 0.4 + distortion * 3, currentY + wobble * 2), new paper.Point(currentX + size * 0.45 + trailInfluence, currentY - size * 0.2 + wobble) ); currentX += size * 0.5; } else if (char === 'h') { currentPath.lineTo(new paper.Point(currentX + wobble * 3, currentY - size * 1.2 + wobble * 2 + distortion * 2)); currentPath.lineTo(new paper.Point(currentX + trailInfluence, currentY + wobble * 2)); currentPath.moveTo(new paper.Point(currentX, currentY - size * 0.5 + wobble * 2)); currentPath.quadraticCurveTo( new paper.Point(currentX + size * 0.3 + wobble * 3 + distortion * 3, currentY - size * 0.8 + wobble * 2), new paper.Point(currentX + size * 0.4, currentY - size * 0.5 + wobble * 3) ); currentPath.lineTo(new paper.Point(currentX + size * 0.4 + distortion * 3, currentY + wobble * 2)); currentX += size * 0.5; } else if (char === 'p') { currentPath.lineTo(new paper.Point(currentX + wobble * 3, currentY - size * 0.7 + wobble * 2)); currentPath.lineTo(new paper.Point(currentX + distortion * 2 + trailInfluence, currentY + size * 0.6 + wobble * 3)); currentPath.moveTo(new paper.Point(currentX, currentY - size * 0.4 + wobble * 2)); currentPath.quadraticCurveTo( new paper.Point(currentX + size * 0.4 + distortion * 3, currentY - size * 0.8 + wobble * 3), new paper.Point(currentX + wobble, currentY - size * 0.1 + wobble) ); currentX += size * 0.5; } // EXTREME Maus-Einfluss auf X-Position currentX += Math.sin(mouseDistance * 0.02) * mouseInfluence * 30; currentX += Math.cos(frameCount * 0.1 + mouseAngle) * mouseSpeed * 3; // Maus "zieht" die Schrift mit var pullX = (mousePos.x - currentX) * 0.05 * mouseInfluence; var pullY = (mousePos.y - currentY) * 0.05 * mouseInfluence; currentX += pullX * mouseSpeed * 0.5; currentY += pullY * mouseSpeed * 0.5; textIndex++; charIndex++; // Nach paar Buchstaben neue Zeile oder Position var lineLength = Math.max(5, rndI(15, 35) - Math.floor(mouseSpeed * 5)); if (charIndex > lineLength) { currentY += size * 1.5 + rnd(-10, 10) + Math.cos(mouseAngle) * mouseInfluence * 40; currentX += rnd(-60, -10) + Math.sin(mouseDistance * 0.05) * 50; // Wenn außerhalb, neue Position - aber schreibe weiter! if (currentX > W() + 100 || currentY > H() + 100 || currentX < -100 || currentY < -100) { currentPath = null; setTimeout(startNewWriting, rndI(10, 50)); } } } // Berechne Abdeckung function updateCoverage() { var totalArea = W() * H(); var coveredArea = 0; for (var i = 0; i < paths.length; i++) { if (paths[i].length) { coveredArea += paths[i].length * paths[i].strokeWidth; } } coverage = Math.min(coveredArea / totalArea, 1); } // Initialisierung startNewWriting(); var frameCount = 0; // Animation Loop paper.view.on('frame', function(event) { frameCount++; // Maus-Einfluss berechnen mouseDistance = mousePos.getDistance(new paper.Point(W() / 2, H() / 2)); mouseInfluence = Math.min(mouseDistance / (W() * 0.5), 2); chaosLevel = Math.sin(frameCount * 0.08) * mouseInfluence; // Zeichne kontinuierlich - NIEMALS AUFHÖREN if (currentPath) { // VIEL MEHR Zeichen pro Frame - beeinflusst von Maus var charsPerFrame = Math.floor(strokeWidth * 3) + 3 + Math.floor(mouseSpeed * 2) + Math.floor(mouseInfluence * 5); for (var i = 0; i < charsPerFrame; i++) { drawNextChar(); } } // Coverage updaten if (frameCount % 20 === 0) { updateCoverage(); if (!currentPath) { startNewWriting(); } } // STÄNDIG neue Schreibpfade starten - besonders bei Mausbewegung var newPathChance = Math.max(10, 60 - Math.floor(mouseSpeed * 10) - Math.floor(mouseInfluence * 20)); if (frameCount % newPathChance === 0 && rnd(0, 1) > 0.1) { startNewWriting(); } // Bei schneller Mausbewegung SOFORT neue Pfade if (mouseSpeed > 15 && frameCount % 5 === 0) { startNewWriting(); } // Mausgeschwindigkeit langsam abklingen lassen mouseSpeed *= 0.92; // EXTREME Pfad-Verzerrung durch Maus if (mouseSpeed > 3) { var affectedPaths = Math.min(20, paths.length); for (var i = Math.max(0, paths.length - affectedPaths); i < paths.length; i++) { if (paths[i] && paths[i].segments) { for (var j = 0; j < paths[i].segments.length; j++) { var segment = paths[i].segments[j]; var distToMouse = segment.point.getDistance(mousePos); if (distToMouse < 500) { var influence = (500 - distToMouse) / 500; var shake = rnd(-15, 15) * influence * mouseSpeed * 0.5; var spiral = Math.sin(frameCount * 0.1 + j * 0.1) * influence * mouseSpeed; segment.point.x += shake * Math.cos(mouseAngle + rnd(-2, 2)) + spiral; segment.point.y += shake * Math.sin(mouseAngle + rnd(-2, 2)) + spiral; // Maus "wirbelt" die Pfade if (mouseSpeed > 10) { var angle = Math.atan2(segment.point.y - mousePos.y, segment.point.x - mousePos.x); var rotationForce = mouseSpeed * 0.3 * influence; segment.point.x += Math.cos(angle + Math.PI / 2) * rotationForce; segment.point.y += Math.sin(angle + Math.PI / 2) * rotationForce; } } } } } } }); // EXTREME Maus-Interaktion paper.view.on('mousemove', function(event) { lastMousePos = mousePos.clone(); mousePos = event.point; // Maus-Trail speichern mouseTrail.push(mousePos.clone()); if (mouseTrail.length > maxTrailLength) { mouseTrail.shift(); } // Berechne Mausgeschwindigkeit var delta = mousePos.subtract(lastMousePos); mouseSpeed = Math.min(delta.length * 2, 50); // Berechne Mauswinkel mouseAngle = Math.atan2(delta.y, delta.x); // EXTREME Reaktion: Maus "explodiert" Pfade if (mouseSpeed > 20) { var explosionPaths = Math.min(30, paths.length); for (var i = Math.max(0, paths.length - explosionPaths); i < paths.length; i++) { if (paths[i] && paths[i].segments) { for (var j = 0; j < paths[i].segments.length; j++) { var segment = paths[i].segments[j]; var distToMouse = segment.point.getDistance(mousePos); if (distToMouse < 300) { var explosionForce = (300 - distToMouse) / 300 * mouseSpeed * 2; var awayAngle = Math.atan2(segment.point.y - mousePos.y, segment.point.x - mousePos.x); segment.point.x += Math.cos(awayAngle) * explosionForce; segment.point.y += Math.sin(awayAngle) * explosionForce; } } } } } // EXTREME Anziehung: Maus "zieht" an aktueller Schreibposition if (currentPath && mouseSpeed > 1) { var pullStrength = mouseSpeed * 2; var directionToMouse = mousePos.subtract(new paper.Point(currentX, currentY)); var distance = directionToMouse.length; if (distance > 0) { directionToMouse = directionToMouse.normalize(); // Oszilliert zwischen Anziehung und Abstoßung var oscillation = Math.sin(frameCount * 0.2 + mouseAngle * 5); if (oscillation > 0) { // Zur Maus hin currentX += directionToMouse.x * pullStrength * rnd(1, 4); currentY += directionToMouse.y * pullStrength * rnd(1, 4); } else { // Von Maus weg currentX -= directionToMouse.x * pullStrength * rnd(0.5, 3); currentY -= directionToMouse.y * pullStrength * rnd(0.5, 3); } } } // Bei schneller Bewegung: Starte VIELE neue Pfade if (mouseSpeed > 25 && rnd(0, 1) > 0.5) { for (var k = 0; k < 3; k++) { startNewWriting(); } } });

Wenn Design denkt.