a

Truckerbug · Feb 28, 2024 · d036248 · d036248
1 parent 07fc41d
commit d036248
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 103 deletions.
diff --git 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
@@ -1,3 +1,4 @@
+<!-- Generated using Gemini -->
 <!DOCTYPE html>
 <html lang="en">
 <head>

diff --git 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;
- }
- }
+body {
+ background: linear-gradient(to bottom, darkviolet, black);
+}
+
+canvas {
+ top: 0;
+ left: 0;
+ z-index: -1;
+}