Coding a 'Smart' Particle System (Text to Dots Tutorial)
.png)
Youtube video
In this blog i have share the source code the video .
Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="canvas1"></canvas>
</body>
<script src="script.js"></script>
</html>
Css
body { margin: 0; background: #000; overflow: hidden; font-family: sans-serif; }
canvas { display: block; }
Javascript
const canvas = document.getElementById('canvas1');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let particles = [];
const mouse = { x: 0, y: 0, radius: 100 };
window.addEventListener('mousemove', (e) => {
mouse.x = e.x;
mouse.y = e.y;
});
class Particle {
constructor(x, y) {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.baseX = x;
this.baseY = y;
this.size = 3;
this.density = (Math.random() * 30) + 1;
}
draw() {
ctx.fillStyle = '#00ff41';
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
}
update() {
let dx = mouse.x - this.x;
let dy = mouse.y - this.y;
let distance = Math.sqrt(dx * dx + dy * dy);
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;
if (distance < mouse.radius) {
this.x -= directionX;
this.y -= directionY;
} else {
if (this.x !== this.baseX) {
let dx = this.x - this.baseX;
this.x -= dx / 10;
}
if (this.y !== this.baseY) {
let dy = this.y - this.baseY;
this.y -= dy / 10;
}
}
}
}
function init() {
particles = [];
ctx.fillStyle = 'white';
ctx.font = '30px Verdana';
const data = ctx.getImageData(0, 0, 100, 100);
for (let y = 0, y2 = data.height; y < y2; y++) {
for (let x = 0, x2 = data.width; x < x2; x++) {
if (data.data[(y * 4 * data.width) + (x * 4) + 3] > 128) {
particles.push(new Particle(x * 10, y * 10));
}
}
}
}
init();
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < particles.length; i++) {
particles[i].update();
particles[i].draw();
}
requestAnimationFrame(animate);
}
animate();
Thanks for coming !!
Comments
Post a Comment