<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kurveh Ein's Diamond Waterfall</title>
<style>
body {
margin: 0;
background-color: deeppink;
}
canvas {
background-image: url('diamond.svg'); /* Replace with your image path */
/*background-size: cover; Or 'contain', '100% 100%', etc. */
background-repeat: no-repeat;
background-position: center center;
}
</style>
</head>
<body>
<canvas width="500" height="500" id="waterDripCanvas"></canvas>
<script src="diamondwaterfall.js"></script>
</body>
</html>
// Get the canvas and its context
const canvas = document.getElementById('waterDripCanvas');
const ctx = canvas.getContext('2d');
/*
const img = new Image();
img.src = 'diamond.svg';
ctx.drawImage(img, 0, 0, canvas.height, canvas.width);
*/
// Set canvas dimensions to full screen
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// --- Animation parameters ---
const drips = []; // Array to hold all drip objects
const dripInterval = 100; // Time in ms between creating new drips
let lastDripTime = Date.now();
// Define the source area where drips will start
const source = {
x: canvas.width / 2, // Center of the canvas
y: canvas.height / 1.8,
width: 20, // Width of the dripping section
};
// --- Drip class ---
class Drip {
constructor(x, y) {
this.x = x;
this.y = y;
this.radius = Math.random() * 2 + 12; // Random radius between 1 and 3
this.speed = this.radius / 2; // Speed related to its size
this.gravity = 0.05;
this.vy = this.speed;
this.opacity = .7;
}
// Update drip position
update() {
this.vy += this.gravity;
this.y += this.vy;
this.opacity -= .005; // Fade out over time
}
// Draw the drip on the canvas
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = `rgba(256, 256, 256, ${this.opacity})`;
ctx.fill();
ctx.closePath();
}
}
// Create a new drip within the source area
function createDrip() {
const x = source.x - source.width / 2 + Math.random() * source.width;
const y = source.y;
drips.push(new Drip(x, y));
}
// Main animation loop
function animate() {
// Clear the canvas on each frame
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Create a new drip if the interval has passed
const currentTime = Date.now();
if (currentTime - lastDripTime > dripInterval) {
createDrip();
lastDripTime = currentTime;
}
// Loop through drips, update, draw, and remove old ones
for (let i = drips.length - 1; i >= 0; i--) {
const drip = drips[i];
drip.update();
drip.draw();
// Remove drip if it goes off-screen or becomes invisible
if (drip.y > canvas.height || drip.opacity <= 0) {
drips.splice(i, 1);
}
}
requestAnimationFrame(animate);
}
// Adjust canvas size on window resize
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
source.x = canvas.width / 2; // Reposition the source
});
// Start the animation
animate();
