How can i achive this, without changing behaviour in the code, rather the forces array. i want them to move, and not just fight in 1 place.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Magnet Sprites</title>
<style>
.sprite {
width: 5px;
height: 5px;
position: absolute;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="game-container"></div>
<script>
class Sprite {
constructor(posX, posY) {
this.posX = posX;
this.posY = posY;
this.vx = 0;
this.vy = 0;
this.element = document.createElement("div");
this.element.classList.add("sprite");
document.getElementById("game-container").appendChild(this.element);
this.element.style.backgroundColor = colors[Math.floor(Math.random()*colors.length)];
}
updatePosition() {
this.posX += this.vx;
this.posY += this.vy;
this.element.style.left = `${this.posX}px`;
this.element.style.top = `${this.posY}px`;
}
}
let sprites = [];
const colors = ['red', 'blue']
const forces = [
[0.1, -1],
[1.2, 0.1]
];
//
console.log(forces)
const attractionStrength = 0.2
const minDist = 5;
const maxDist = 300;
const damping = 0.9;
for (let step = 0; step < 500; step++) {
sprites.push(new Sprite(Math.random() * window.innerWidth, Math.random() * window.innerHeight));
}
function updateSprites() {
for (let i = 0; i < sprites.length; i++) {
let sprite = sprites[i];
for (let j = i + 1; j < sprites.length; j++) {
let target = sprites[j];
let dx = target.posX - sprite.posX;
let dy = target.posY - sprite.posY;
let dist = Math.sqrt(dx * dx + dy * dy) + 1e-6;
if (dist < maxDist) {
let spriteColorIndex = colors.indexOf(sprite.element.style.backgroundColor);
let targetColorIndex = colors.indexOf(target.element.style.backgroundColor);
if (spriteColorIndex !== -1 && targetColorIndex !== -1) {
let force = forces[spriteColorIndex][targetColorIndex] / dist * attractionStrength;
let fx = (dx / dist) * force;
let fy = (dy / dist) * force;
sprite.vx += fx;
sprite.vy += fy;
target.vx -= fx;
target.vy -= fy;
}
}
if (dist < minDist) {
sprite.posX -= (dx / dist) * (minDist - dist);
sprite.posY -= (dy / dist) * (minDist - dist);
}
}
sprite.vx *= damping;
sprite.vy *= damping;
sprite.posX += sprite.vx;
sprite.posY += sprite.vy;
if (sprite.posX < 0) sprite.posX += window.innerWidth;
if (sprite.posX > window.innerWidth) sprite.posX -= window.innerWidth;
if (sprite.posY < 0) sprite.posY += window.innerHeight;
if (sprite.posY > window.innerHeight) sprite.posY -= window.innerHeight;
sprite.updatePosition();
}
requestAnimationFrame(updateSprites);
}
updateSprites();
</script>
</body>
</html>
in this array:
const forces = [
[0.1, -1],
[1.0, 0.1]
];
i try this, but they just fight in 1 place, instead of moving smoothly across the screen like i want them to. I have messed with the repulsion, values and other functions in the code, but nothing seems to work like other simulations i have seen on the internet.
