Quiero hacer una animación SVG con una cuadrícula de puntos, que se alejan una cierta cantidad de su origen, se alejan del cursor cuando están cerca del cursor, pero regresan a su origen cuando están más lejos del cursor. Actualmente actualizo la posición usando esto:
const v = 0.5, moveradius = 80; points.forEach(function(p){ let dx = 0, dy = 0; if(getDistance(mx, my, p.position.x, p.position.y) <= moveradius && getDistance(p.origin.x, p.origin.y, p.position.x, p.position.y) <= 30){ dx += p.position.x - mx dy += p.position.y - my }else{ dx += p.origin.x - p.position.x dy += p.origin.y - p.position.y } p.position.x += dx*v; p.position.y += dy*v; }) function getDistance(x1, y1, x2, y2){ x_n = x2 - x1 y_n = y2 - y1 dist = Math.sqrt((x_n)**2+ (y_n)**2) return dist; }donde mx y my son las coordenadas del ratón. Desafortunadamente, los puntos se mueven cuando están cerca de su radio de movimiento máximo (30). ¿Cómo puedo evitar el movimiento?