Каким образом можно остановить дрожание

#javascript #canvas #grid

Я написал нечто вроде сетки, но скрипт работает только наполовину.
Если нажать куда-либо, а затем отпустить, сетка совершит попытку восстановиться,
как и до нажатия, но попытка окажется неудачной и все квадраты продолжат дрожать.

Мой вопрос: как прекратить дрожание?
Я совершенно без понятия, как это сделать.






	
	


	
	





    

Ответы

Ответ 1

Как Вам такой вариант? 

Мне кажется в Вашем случае не стоит увеличивать скорость при отлете от точки назначения,
когда квадраты возвращаются





let ctx = can.getContext('2d'),
  rnd = (min, max) => Math.floor(Math.random() * ((max + 1) - min) + min),
  walls = [],
  mouse = {x: 0, y: 0, down: false },
  Wall = function(x, y, width, height, color, speed) {
      this.x = x,
      this.y = y,
      this.width = width,
      this.height = height,
      this.color = color,
      this.speed = speed,
      this.nativePosition = {x,y},
      this.velocity = {x: 0, y: 0, friction: .91}
  },
  size = {width: 26,height: 26};

for (let x = 0; x < innerWidth / size.width; x++) {
  for (let y = 0; y < innerHeight / size.height; y++) {
    walls.push(new Wall(x * size.width, y * size.height, size.width, size.height,
"#999", rnd(2, 4)))
  }
};

(onresize = e => {
  can.width = innerWidth;
  can.height = innerHeight;
})();

document.onmousemove = e => {
  mouse.x = e.clientX;
  mouse.y = e.clientY;
};

document.onmousedown = e => mouse.down = true;
document.onmouseup = e => mouse.down = false;

(loop = () => {
  ctx.fillStyle = "#0008";
  ctx.fillRect(-3e38, -3e38, 3e38 * 2, 3e38 * 2);

  walls.forEach(wall => {
    let a, b, d = mouse.down;
    if (d) {
      a = mouse.x - wall.x - wall.width / 2;
      b = mouse.y - wall.y - wall.height / 2;
      len = Math.sqrt(a * a + b * b) || 1;
      a = a / len * wall.speed;
      b = b / len * wall.speed;
    } else {
      a = wall.nativePosition.x - wall.x;
      b = wall.nativePosition.y - wall.y;
    }

    wall.velocity.x *= wall.velocity.friction;
    wall.velocity.y *= wall.velocity.friction;
    wall.velocity.x += a * Math.random() / (d ? 1 : 5);
    wall.velocity.y += b * Math.random() / (d ? 1 : 5);
    wall.x += wall.velocity.x;
    wall.y += wall.velocity.y

    ctx.strokeStyle = wall.color;
    ctx.strokeRect(wall.x+3, wall.y+3, wall.width-3, wall.height-3)
  });

  requestAnimationFrame(loop)
})();
body, #can {
  margin: 0;
  background-color: black;
  overflow: hidden;
}