Skip to content

Commit d036248

Browse files
TruckerbugTruckerbug
committed
a
1 parent 07fc41d commit d036248

File tree

3 files changed

+60
-103
lines changed

3 files changed

+60
-103
lines changed

‎app.js

Lines changed: 50 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -11,34 +11,63 @@ canvas.height = height;
1111

1212
let points = [];
1313

14+
const fallSpeed = 5; // Adjust for desired falling speed
15+
const minimumSpacing = 50; // Adjust for desired spacing between stars
16+
const rotationSpeed = .015; // Adjust for base rotation speed
17+
1418
window.addEventListener("mousemove", (event) => {
1519
const x = event.clientX;
1620
const y = event.clientY;
1721

18-
// Add a new point to the trail
19-
points.push({ x, y });
22+
// Check if there are any existing points
23+
if (!points.length) {
24+
points.push({ x, y, timestamp: Date.now(), rotation: Math.random() * Math.PI * 2 }); // Add first star with random rotation
25+
return;
26+
}
27+
28+
// Calculate distance between the current and last point
29+
const lastPoint = points[points.length - 1];
30+
const distance = Math.sqrt(Math.pow(x - lastPoint.x, 2) + Math.pow(y - lastPoint.y, 2));
31+
32+
// Add a new star only if the distance is greater than the minimum spacing
33+
if (distance > minimumSpacing) {
34+
points.push({ x, y, timestamp: Date.now(), rotation: Math.random() * Math.PI * 2 }); // Add new star with random rotation
35+
}
36+
});
2037

21-
// Limit the number of points for performance
22-
points = points.slice(-20);
38+
window.requestAnimationFrame(draw);
2339

40+
function draw() {
2441
ctx.clearRect(0, 0, width, height);
2542

26-
// Draw the trail
27-
for (let i = 0; i < points.length - 1; i++) {
28-
const current = points[i];
29-
const next = points[i + 1];
30-
31-
ctx.beginPath();
32-
ctx.moveTo(current.x, current.y);
33-
ctx.lineTo(next.x, next.y);
34-
ctx.strokeStyle = "white"; // Trail color
35-
ctx.lineWidth = 2; // Trail thickness
36-
ctx.stroke();
43+
// Loop through points and update their positions
44+
for (let i = 0; i < points.length; i++) {
45+
const point = points[i];
46+
const elapsedTime = (Date.now() - point.timestamp) / 1000; // Time in seconds
47+
const opacity = 1 - elapsedTime; // Fading factor based on time
48+
49+
if (opacity > 0) { // Only draw visible stars
50+
point.y += fallSpeed * elapsedTime; // Update y position for falling
51+
52+
// Update rotation based on elapsed time and adjusted rotation speed
53+
point.rotation += (rotationSpeed + (1 - elapsedTime) * rotationSpeed) * elapsedTime; // Gradually decreasing rotation speed
54+
55+
// Draw the star emoji with adjusted properties
56+
ctx.save();
57+
ctx.translate(point.x, point.y);
58+
ctx.rotate(point.rotation); // Apply accumulated rotation
59+
ctx.scale(1, 1); // No scaling in this version
60+
ctx.font = `20px sans-serif`; // Adjust font size as desired
61+
ctx.textAlign = "center";
62+
ctx.textBaseline = "middle";
63+
ctx.fillStyle = `rgba(255, 255, 255, ${opacity})`; // White with adjustable opacity
64+
ctx.fillText("⭐", 0, 0);
65+
ctx.restore();
66+
}
3767
}
3868

39-
// Draw the star
40-
ctx.beginPath();
41-
ctx.arc(x, y, 5, 0, Math.PI * 2); // Star size and shape
42-
ctx.fillStyle = "yellow"; // Star color
43-
ctx.fill();
44-
});
69+
// Remove old points after 2 seconds
70+
points = points.filter(point => (Date.now() - point.timestamp) < 2000);
71+
72+
window.requestAnimationFrame(draw);
73+
}

‎index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
<!-- Generated using Gemini -->
12
<!DOCTYPE html>
23
<html lang="en">
34
<head>

‎style.css

Lines changed: 9 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,9 @@
1-
:root {
2-
--glow-rgb: 239 42 201;
3-
}
4-
5-
body {
6-
background: linear-gradient(90deg, rgb(119, 46, 195), rgb(58, 18, 153));
7-
height: 100vh;
8-
overflow: hidden;
9-
}
10-
11-
* {
12-
margin: 0;
13-
padding: 0;
14-
box-sizing: border-box;
15-
}
16-
17-
.glow-point {
18-
position: absolute;
19-
box-shadow: 0rem 0rem 1.2rem 0.6rem rgb(var(--glow-rgb));
20-
pointer-events: none;
21-
}
22-
23-
.star {
24-
position: absolute;
25-
z-index: 2;
26-
color: white;
27-
font-size: 1rem;
28-
animation-duration: 1500ms;
29-
animation-fill-mode: forwards;
30-
pointer-events: none;
31-
}
32-
33-
@keyframes fall-1 {
34-
0% {
35-
transform: translate(0px, 0px) rotateX(45deg) rotateY(30deg) rotateZ(0deg) scale(0.25);
36-
opacity: 0;
37-
}
38-
39-
5% {
40-
transform: translate(10px, -10px) rotateX(45deg) rotateY(30deg) rotateZ(0deg) scale(1);
41-
opacity: 1;
42-
}
43-
44-
100% {
45-
transform: translate(25px, 200px) rotateX(180deg) rotateY(270deg) rotateZ(90deg) scale(1);
46-
opacity: 0;
47-
}
48-
}
49-
50-
@keyframes fall-2 {
51-
0% {
52-
transform: translate(0px, 0px) rotateX(-20deg) rotateY(10deg) scale(0.25);
53-
opacity: 0;
54-
}
55-
56-
10% {
57-
transform: translate(-10px, -5px) rotateX(-20deg) rotateY(10deg) scale(1);
58-
opacity: 1;
59-
}
60-
61-
100% {
62-
transform: translate(-10px, 160px) rotateX(-90deg) rotateY(45deg) scale(0.25);
63-
opacity: 0;
64-
}
65-
}
66-
67-
@keyframes fall-3 {
68-
0% {
69-
transform: translate(0px, 0px) rotateX(0deg) rotateY(45deg) scale(0.5);
70-
opacity: 0;
71-
}
72-
73-
15% {
74-
transform: translate(7px, 5px) rotateX(0deg) rotateY(45deg) scale(1);
75-
opacity: 1;
76-
}
77-
78-
100% {
79-
transform: translate(20px, 120px) rotateX(-180deg) rotateY(-90deg) scale(0.5);
80-
opacity: 0;
81-
}
82-
}
1+
body {
2+
background: linear-gradient(to bottom, darkviolet, black);
3+
}
4+
5+
canvas {
6+
top: 0;
7+
left: 0;
8+
z-index: -1;
9+
}

0 commit comments

Comments
 (0)