علي ملص
علي ملص
بالتأكيد !
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Logo Particle Effect</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #000; overflow: hidden; }
canvas { display: block; } </style></head><body> <canvas id="canvas"></canvas>
<script> // Particle Class class Particle { constructor(x, y, size, baseX, baseY, ctx, color) { this.x = x; // Current X position this.y = y; // Current Y position this.size = size; // Size of the particle this.baseX = baseX; // Original X position this.baseY = baseY; // Original Y position this.ctx = ctx; // Canvas context this.color = color; // Color of the particle this.density = Math.random() * 30 + 2; // Random density for movement }
draw() { this.ctx.fillStyle = this.color; this.ctx.beginPath(); this.ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); this.ctx.closePath(); this.ctx.fill(); }
update(mouse) { let dx = mouse.x - this.x; let dy = mouse.y - this.y; let distance = Math.sqrt(dx * dx + dy * dy);
if (distance < mouse.radius) { // Move particles away from the mouse let forceDirectionX = dx / distance; let forceDirectionY = dy / distance; let maxDistance = mouse.radius; let force = (maxDistance - distance) / maxDistance; let directionX = forceDirectionX * force * this.density; let directionY = forceDirectionY * force * this.density;
this.x -= directionX; this.y -= directionY; } else { // Return particles to their original positions if (this.x !== this.baseX) { this.x += (this.baseX - this.x) * 0.05; } if (this.y !== this.baseY) { this.y += (this.baseY - this.y) * 0.05; } } } }
// Main App Class class App { constructor(canvas, imageSrc) { this.canvas = canvas; this.ctx = canvas.getContext('2d'); this.image = new Image(); this.image.src = imageSrc; this.particles = []; this.mouse = { x: null, y: null, radius: 150 }; this.init(); this.animate(); this.addEventListeners(); }
init() { this.canvas.width = window.innerWidth; this.canvas.height = window.innerHeight;
this.image.onload = () => { console.log('Image loaded successfully');
// Define the square size for the logo const logoSize = 400; // Fixed square size
// Calculate the aspect ratio of the image const imageAspectRatio = this.image.width / this.image.height;
// Determine the cropping dimensions to make the image square let sourceX = 0, sourceY = 0, sourceWidth = this.image.width, sourceHeight = this.image.height;
if (imageAspectRatio > 1) { // Image is wider than tall sourceWidth = this.image.height; sourceX = (this.image.width - sourceWidth) / 2; } else { // Image is taller than wide sourceHeight = this.image.width; sourceY = (this.image.height - sourceHeight) / 2; }
// Draw the cropped and centered image on the canvas const logoX = this.canvas.width / 2 - logoSize / 2; const logoY = this.canvas.height / 2 - logoSize / 2;
this.ctx.drawImage( this.image, sourceX, // Source X position sourceY, // Source Y position sourceWidth, // Source width sourceHeight, // Source height logoX, // Destination X position logoY, // Destination Y position logoSize, // Destination width logoSize // Destination height );
// Get image data for particles const imageData = this.ctx.getImageData(logoX, logoY, logoSize, logoSize).data;
const cols = 200; // Number of columns const rows = 200; // Number of rows
const particleWidth = logoSize / cols; const particleHeight = logoSize / rows;
for (let y = 0; y < rows; y++) { for (let x = 0; x < cols; x++) { const posX = x * particleWidth + logoX; const posY = y * particleHeight + logoY; const size = Math.random() * 0.5 + 0.5; // Smaller particle size
// Get pixel color const pixelIndex = (y * particleHeight * logoSize + x * particleWidth) * 4; const r = imageData[pixelIndex]; const g = imageData[pixelIndex + 1]; const b = imageData[pixelIndex + 2]; const a = imageData[pixelIndex + 3];
// Skip transparent pixels if (a > 0) { const color = `rgba(${r}, ${g}, ${b}, ${a / 255})`; this.particles.push(new Particle(posX, posY, size, posX, posY, this.ctx, color)); } } } };
this.image.onerror = () => { console.error('Error loading image:', this.image.src); }; }
animate() { this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.particles.forEach((particle) => { particle.update(this.mouse); particle.draw(); });
requestAnimationFrame(() => this.animate()); }
addEventListeners() { window.addEventListener('mousemove', (event) => { this.mouse.x = event.clientX; this.mouse.y = event.clientY; });
window.addEventListener('mouseleave', () => { this.mouse.x = null; this.mouse.y = null; }); } }
// Initialize the app const canvas = document.getElementById('canvas'); const imageSrc = 'logo3.png'; // Replace with your logo image path or URL new App(canvas, imageSrc); </script></body></html>
(للتنويه: مكان logo3.png) جرب وضع صورة لديك
