0
\$\begingroup\$

I'm trying to simulate the movement of the mousecursor, by creating a path from point A to B that has random variation. The algorithm I'm using at the moment is very basic, and is limited in that it's only really good for creating a path where X and Y distance from the start are the same, forming a square:

Current algorithm

The code looks something like this:

   function calcualtePath(from, to)
   {
      var pathNodes = [];
      while (from.x != to.x || from.y != to.y)
      {
         var newTransition = {x: from.x, y: from.y};

         if (Rand(1, 3) != 1 && newTransition.x > to.x)       newTransition.x--;
         else if (Rand(1, 3) != 1 && newTransition.x < to.x)  newTransition.x++;
         if (Rand(1, 3) != 1 && newTransition.y > to.y)       newTransition.y--;
         else if (Rand(1, 3) != 1 && newTransition.y < to.y)  newTransition.y++;

         pathNodes.push(newTransition);
         from = newTransition;
      }
      return pathNodes;
   }

I'd like some assistance in creating is a relatively fast algorithm that creates a randomised path between point A and B, that has a more curve like path and isn't limited like the one above. Ideally something a bit like this, with a pronounced curve:

Ideal

\$\endgroup\$

1 Answer 1

2
\$\begingroup\$

Have you thought about using bezier curves? Check out this link that explains them.

http://blog.demofox.org/2014/03/04/bezier-curves/

You'll have to come up with the intermediary control point(s) but it should be pretty simple to do.

Hermite interpolation might be more what you are after, but that is mathematically equivelant, just in a different form.

If you want it to look imperfect, you could add some jitter on top of the curve path (:

\$\endgroup\$
11
  • \$\begingroup\$ I reckon that ought to do the trick. Now, to figure out how to generate a list of coords that follow such a curve. Thank you for the tip, I'll look into it. \$\endgroup\$
    – Edge
    Commented Apr 1, 2015 at 4:49
  • \$\begingroup\$ If you have 3 points (the two end points, plus a control point in the middle that you can calculate based on whatever rules give you the best results), the equation for a quadratic bezier curve is this: A*(1-t)^2 + B*2t(1-t) + C*t^2 Where A and C are the endpoints and B is the control point i mentioned. You evaluate that function separately on each axis, so in 2d it would be this: P.x = A.x*(1-t)^2 + B.x*2t(1-t) + C.x*t^2 P.y = A.y*(1-t)^2 + B.y*2t(1-t) + C.y*t^2 t is a value between 0 and 1 that you evaluate to get the middle points. The more values of t, the smoother the curve. \$\endgroup\$
    – Alan Wolfe
    Commented Apr 1, 2015 at 5:03
  • \$\begingroup\$ Also, there's an interactive demo on my site where you can play with it to get a feel for how it works. demofox.org/bezquad.html \$\endgroup\$
    – Alan Wolfe
    Commented Apr 1, 2015 at 5:34
  • \$\begingroup\$ Alan, I think your bias/gain formula is even better. Very nice website :) \$\endgroup\$
    – Edge
    Commented Apr 2, 2015 at 11:18
  • \$\begingroup\$ Thanks! (: lots of diff ways to do it. You could probably make bias and gain work, but the hard part with those is that you can't move the end points very easily \$\endgroup\$
    – Alan Wolfe
    Commented Apr 2, 2015 at 13:54

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .