I always get excited when I have to use math when I’m programming something, because then when my kids get old enough to complain “Augh, math?! When am I ever going to use this?!”, I’ll actually be able to tell them, “Hey, I actually use math at work!”

Ok, so this particular time it wasn’t something for work, but it’s still math! Here’s the basic problem:

Starting with a spider at point A, swiped to point B, how do you determine a point C offscreen where the spider ends up after being swiped?

This is how I solved the problem using…GEOMETRY! If you have two points, you can calculate the slope (m) and then use the same slope equation to find a y value given an arbitrary x. Here’s the equation to find slope between two points (x, y) and (x1, y1), in case you’re too lazy to google it:

m = (y - y1) / (x - x1)

So using that, we can calculate the slope of the line we create when we swipe the spider from A to B:

m = (A.y - B.y) / (A.x - B.x)

To figure out where point C is, let’s choose an arbitrary x value for C based on the direction of the swipe, and use the same equation to solve for the y value. In our picture above, we’re swiping left (A.x > B.x), so let’s say that C.x is at a position 100 pixels off the left side of the screen, or -100. If we’re swiping right (A.x < B.x), then let’s say that C.x is 100 pixels off the right side, or screensize + 100.

So now that we know the slope and the new x value, we’ll just reswizzle the slope equation above and solve for the new y value:

y = m * (x - x1) + y1

And in our case:

C.y = ((A.y - B.y) / (A.x - B.x)) * (C.x - A.x) + A.y

Here’s a CodePen using the same math I used above. The CodePen example constrains the spider to a box on the page, so I had to take that into account when writing the javascript. Another issue I had was that if your path was a vertical line, the slope ends up being undefined and calculating the y value ended with a value of “Infinity” or “-Infinity”. Did you even know that Javascript had these constants (Number.POSITIVE_INFINITY and Number.NEGATIVE_INFINITY)? I didn’t. Well, now we both know. 🙂

I actually really loved math in school, especially geometry in 7th grade, because we got to use rulers and compasses to draw graphs. There really is a lot of math you can use when you code, so keep taking those advanced math classes, ladies!