diff --git a/app.js b/app.js index 45deaf9..df4daf0 100644 --- a/app.js +++ b/app.js @@ -11,34 +11,63 @@ canvas.height = height; let points = []; +const fallSpeed = 5; // Adjust for desired falling speed +const minimumSpacing = 50; // Adjust for desired spacing between stars +const rotationSpeed = .015; // Adjust for base rotation speed + window.addEventListener("mousemove", (event) => { const x = event.clientX; const y = event.clientY; - // Add a new point to the trail - points.push({ x, y }); + // Check if there are any existing points + if (!points.length) { + points.push({ x, y, timestamp: Date.now(), rotation: Math.random() * Math.PI * 2 }); // Add first star with random rotation + return; + } + + // Calculate distance between the current and last point + const lastPoint = points[points.length - 1]; + const distance = Math.sqrt(Math.pow(x - lastPoint.x, 2) + Math.pow(y - lastPoint.y, 2)); + + // Add a new star only if the distance is greater than the minimum spacing + if (distance > minimumSpacing) { + points.push({ x, y, timestamp: Date.now(), rotation: Math.random() * Math.PI * 2 }); // Add new star with random rotation + } +}); - // Limit the number of points for performance - points = points.slice(-20); +window.requestAnimationFrame(draw); +function draw() { ctx.clearRect(0, 0, width, height); - // Draw the trail - for (let i = 0; i < points.length - 1; i++) { - const current = points[i]; - const next = points[i + 1]; - - ctx.beginPath(); - ctx.moveTo(current.x, current.y); - ctx.lineTo(next.x, next.y); - ctx.strokeStyle = "white"; // Trail color - ctx.lineWidth = 2; // Trail thickness - ctx.stroke(); + // Loop through points and update their positions + for (let i = 0; i < points.length; i++) { + const point = points[i]; + const elapsedTime = (Date.now() - point.timestamp) / 1000; // Time in seconds + const opacity = 1 - elapsedTime; // Fading factor based on time + + if (opacity > 0) { // Only draw visible stars + point.y += fallSpeed * elapsedTime; // Update y position for falling + + // Update rotation based on elapsed time and adjusted rotation speed + point.rotation += (rotationSpeed + (1 - elapsedTime) * rotationSpeed) * elapsedTime; // Gradually decreasing rotation speed + + // Draw the star emoji with adjusted properties + ctx.save(); + ctx.translate(point.x, point.y); + ctx.rotate(point.rotation); // Apply accumulated rotation + ctx.scale(1, 1); // No scaling in this version + ctx.font = `20px sans-serif`; // Adjust font size as desired + ctx.textAlign = "center"; + ctx.textBaseline = "middle"; + ctx.fillStyle = `rgba(255, 255, 255, ${opacity})`; // White with adjustable opacity + ctx.fillText("⭐", 0, 0); + ctx.restore(); + } } - // Draw the star - ctx.beginPath(); - ctx.arc(x, y, 5, 0, Math.PI * 2); // Star size and shape - ctx.fillStyle = "yellow"; // Star color - ctx.fill(); -}); + // Remove old points after 2 seconds + points = points.filter(point => (Date.now() - point.timestamp) < 2000); + + window.requestAnimationFrame(draw); +} diff --git a/index.html b/index.html index a5a2016..d2d0114 100644 --- a/index.html +++ b/index.html @@ -1,3 +1,4 @@ + diff --git a/style.css b/style.css index 2e8c60d..ed8d2eb 100644 --- a/style.css +++ b/style.css @@ -1,82 +1,9 @@ -:root { - --glow-rgb: 239 42 201; - } - - body { - background: linear-gradient(90deg, rgb(119, 46, 195), rgb(58, 18, 153)); - height: 100vh; - overflow: hidden; - } - - * { - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .glow-point { - position: absolute; - box-shadow: 0rem 0rem 1.2rem 0.6rem rgb(var(--glow-rgb)); - pointer-events: none; - } - - .star { - position: absolute; - z-index: 2; - color: white; - font-size: 1rem; - animation-duration: 1500ms; - animation-fill-mode: forwards; - pointer-events: none; - } - - @keyframes fall-1 { - 0% { - transform: translate(0px, 0px) rotateX(45deg) rotateY(30deg) rotateZ(0deg) scale(0.25); - opacity: 0; - } - - 5% { - transform: translate(10px, -10px) rotateX(45deg) rotateY(30deg) rotateZ(0deg) scale(1); - opacity: 1; - } - - 100% { - transform: translate(25px, 200px) rotateX(180deg) rotateY(270deg) rotateZ(90deg) scale(1); - opacity: 0; - } - } - - @keyframes fall-2 { - 0% { - transform: translate(0px, 0px) rotateX(-20deg) rotateY(10deg) scale(0.25); - opacity: 0; - } - - 10% { - transform: translate(-10px, -5px) rotateX(-20deg) rotateY(10deg) scale(1); - opacity: 1; - } - - 100% { - transform: translate(-10px, 160px) rotateX(-90deg) rotateY(45deg) scale(0.25); - opacity: 0; - } - } - - @keyframes fall-3 { - 0% { - transform: translate(0px, 0px) rotateX(0deg) rotateY(45deg) scale(0.5); - opacity: 0; - } - - 15% { - transform: translate(7px, 5px) rotateX(0deg) rotateY(45deg) scale(1); - opacity: 1; - } - - 100% { - transform: translate(20px, 120px) rotateX(-180deg) rotateY(-90deg) scale(0.5); - opacity: 0; - } - } \ No newline at end of file +body { + background: linear-gradient(to bottom, darkviolet, black); +} + +canvas { + top: 0; + left: 0; + z-index: -1; +} \ No newline at end of file