{"id":99,"date":"2010-06-12T14:56:49","date_gmt":"2010-06-12T09:26:49","guid":{"rendered":"http:\/\/techtwaddle.net\/?p=99"},"modified":"2011-01-31T22:19:20","modified_gmt":"2011-01-31T16:49:20","slug":"applications-the-mathematics-of-movement-part-3","status":"publish","type":"post","link":"https:\/\/techtwaddle.co.in\/blog\/2010\/06\/12\/applications-the-mathematics-of-movement-part-3\/","title":{"rendered":"Applications: The Mathematics of Movement, Part 3"},"content":{"rendered":"

Previously: Part 1<\/a>, Part 2<\/a><\/p>\n

As promised in the previous post<\/a>, this post will cover two variations of the marble move program. The first one, Infinite Move, keeps the marble moving towards the click point, rebounding it off the screen edges and changing its direction when the user clicks again. The second version, Finite Move, is the same as first except that the marble does not move forever. It moves towards the click point, rebounds off the screen edges and slowly comes to rest. The amount of time that it moves depends on the distance between the click point and marble.<\/p>\n

\nInfinite Move<\/strong><\/p>\n

This case is simple (actually both cases are simple). In this case all we need is the direction information which is exactly what the unit vector stores. So when the user clicks, you calculate the unit vector towards the click point and then keep updating the marbles position like crazy. And, of course, there is no stop condition. There’s a little more additional code in the bounds checking conditions. Whenever the marble goes off the screen boundaries, we need to reverse its direction.  Here is the code for mouse up event and UpdatePosition() method,<\/p>\n

\/\/stores the unit vector
\n<\/font>double unitX = 0, unitY = 0; <\/font><\/p>\n

double speed = 6; <\/font><\/p>\n

\/\/speed times the unit vector
\n<\/font>double incrX = 0, incrY = 0; <\/font><\/p>\n

private void Form1_MouseUp(object sender, MouseEventArgs e)
\n{
\n    double x = e.X – marble1.x;
\n    double y = e.Y – marble1.y; <\/font><\/p>\n

    \/\/calculate distance between click point and current marble position
\n<\/font>    double lenSqrd = x * x + y * y;
\n    double len = Math.Sqrt(lenSqrd); <\/font><\/p>\n

    \/\/unit vector along the same direction (from marble towards click point)
\n<\/font>    unitX = x \/ len;
\n    unitY = y \/ len; <\/font><\/p>\n

    timer1.Enabled = true;
\n} <\/font><\/p>\n

private void UpdatePosition()
\n{
\n<\/font>    \/\/amount by which to increment marble position
\n<\/font>    incrX = speed * unitX;
\n    incrY = speed * unitY; <\/font><\/p>\n

    marble1.x += incrX;
\n    marble1.y += incrY; <\/font><\/p>\n

    \/\/check for bounds
\n<\/font>    if ((int)marble1.x < MinX + marbleWidth \/ 2)
\n    {
\n        marble1.x = MinX + marbleWidth \/ 2;
\n        unitX *= -1;
\n    }
\n    else if ((int)marble1.x > (MaxX – marbleWidth \/ 2))
\n    {
\n        marble1.x = MaxX – marbleWidth \/ 2;
\n        unitX *= -1;
\n    } <\/font><\/p>\n

    if ((int)marble1.y < MinY + marbleHeight \/ 2)
\n    {
\n        marble1.y = MinY + marbleHeight \/ 2;
\n        unitY *= -1;
\n    }
\n    else if ((int)marble1.y > (MaxY – marbleHeight \/ 2))
\n    {
\n        marble1.y = MaxY – marbleHeight \/ 2;
\n        unitY *= -1;
\n    } <\/font><\/p>\n

}<\/font><\/p>\n

So whenever the user clicks we calculate the unit vector along that direction and also the amount by which the marble position needs to be incremented. The speed in this case is fixed at 6. You can experiment with different values. And under bounds checking, whenever the marble position goes out of bounds along the x<\/strong> or y<\/strong> direction we reverse the direction of the unit vector along that direction. Here’s a video of it running;<\/p>\n

<\/object><\/p>\n

 <\/p>\n

Finite Move<\/strong><\/p>\n

The code for finite move is almost exactly same as that of Infinite Move, except for the difference that the speed is not fixed and there is an end condition, so the marble comes to rest after a while. Code follows,<\/p>\n

\/\/unit vector along the direction of click point
\n<\/font>double unitX = 0, unitY = 0; <\/font><\/p>\n

\/\/speed of the marble
\n<\/font>double speed = 0; <\/font><\/p>\n

private void Form1_MouseUp(object sender, MouseEventArgs e)
\n{
\n    double x = 0, y = 0;
\n    double lengthSqrd = 0, length = 0; <\/font><\/p>\n

    x = e.X – marble1.x;
\n    y = e.Y – marble1.y;
\n    lengthSqrd = x * x + y * y; <\/font><\/p>\n

    \/\/length in pixels (between click point and current marble pos)
\n<\/font>    length = Math.Sqrt(lengthSqrd); <\/font><\/p>\n

    \/\/unit vector along the same direction as vector(x, y)
\n<\/font>    unitX = x \/ length;
\n    unitY = y \/ length; <\/font><\/p>\n

    speed = length \/ 12; <\/font><\/p>\n

    timer1.Enabled = true;
\n} <\/font><\/p>\n

private void UpdatePosition()
\n{
\n    marble1.x += speed * unitX;
\n    marble1.y += speed * unitY; <\/font><\/p>\n

    \/\/check for bounds
\n<\/font>    if ((int)marble1.x < MinX + marbleWidth \/ 2)
\n    {
\n        marble1.x = MinX + marbleWidth \/ 2;
\n        unitX *= -1;
\n    }
\n    else if ((int)marble1.x > (MaxX – marbleWidth \/ 2))
\n    {
\n        marble1.x = MaxX – marbleWidth \/ 2;
\n        unitX *= -1;
\n    } <\/font><\/p>\n

    if ((int)marble1.y < MinY + marbleHeight \/ 2)
\n    {
\n        marble1.y = MinY + marbleHeight \/ 2;
\n        unitY *= -1;
\n    }
\n    else if ((int)marble1.y > (MaxY – marbleHeight \/ 2))
\n    {
\n        marble1.y = MaxY – marbleHeight \/ 2;
\n        unitY *= -1;
\n    } <\/font><\/p>\n

    \/\/reduce speed by 3% in every loop
\n<\/font>    speed = speed * 0.97f;
\n    if ((int)speed <= 0)
\n    {
\n        timer1.Enabled = false;
\n    } <\/font><\/p>\n

}<\/font><\/p>\n

So the only difference is that the speed is calculated as a function of length when the mouse up event occurs. Again, this can be experimented with. Bounds checking is same as before. In the update and draw cycle, we reduce the speed by 3% in every cycle. Since speed<\/font> is calculated as a function of length<\/font>, speed = length\/12<\/font>, the amount of time it takes speed<\/font> to reach zero is directly proportional to length<\/font>. Note that the speed is in ‘pixels per 40ms’ because the timeout value of the timer is 40ms.  The readability can be improved by representing speed in ‘pixels per second’. This would require you to add some more calculations to the code, which I leave out as an exercise. Here’s a video of this second version,<\/p>\n

<\/object><\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Previously: Part 1, Part 2 As promised in the previous post, this post will cover two variations of the marble move program. The first one, Infinite Move, keeps the marble moving towards the click point, rebounding it off the screen edges and changing its direction when the user clicks again. The second version, Finite Move, … Continue reading Applications: The Mathematics of Movement, Part 3<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[1],"tags":[],"jetpack_featured_media_url":"","jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p1ktFF-1B","_links":{"self":[{"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/posts\/99"}],"collection":[{"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/comments?post=99"}],"version-history":[{"count":2,"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/posts\/99\/revisions"}],"predecessor-version":[{"id":137,"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/posts\/99\/revisions\/137"}],"wp:attachment":[{"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/media?parent=99"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/categories?post=99"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/tags?post=99"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}