I’ve been working on an application with a JavaScript/HTML5 canvas. Here’s a JSFiddle with some code to show you kind of what I’m doing: JSFiddle
As you can see on the fiddle, after you create two points the cursor starts snapping to 90° and 180°, respectively. But there’s a bug, and I don’t know how to fix it. It snaps perfectly to 90°, except when you get too close to the last created point, and then it wobbles a bit. And the 180° snapping is the same, except that it gets wobbly a lot farther away than the 90° does. They both use the same code, so I don’t know why they behave differently, and I don’t know how to get rid of that wobble either way. So there’s the problem, let me try to explain some of my code a bit.
The part that I think is messed up is right at the top, the checkAngle and snapMouseToAngle functions.
checkAngle is pretty straight forward, it takes the last two created points and the point where the mouse cursor is, measures the length of their sides, and measures the current angle using the Law of Cosines (Also, I’m no mathematician, if there’s a better way to do this, then please enlighten me).
snapMouseToAngle is a little more complex. First it checks if the current mouse preview is horizontal or vertical. Then it checks the angle, adds 8 pixels (or one foot, as I call it) to the current preview coordinates, and then checks the angle again. Then it goes through the snap function (that huge block of logic), which checks if the mouse is within the angleSnapDistance. If it is, then it subtracts the angle that it’s supposed to snap to from the current angle, and puts that value inside of leftOver. leftOver is then divided by the difference, leaving us with a number to subtract from the mouse position.
So what am I doing wrong? I don’t know what’s causing it to wobble like that, but I sure would be indebted to any of you who could tell me how to fix it. Thanks!
Setting pxPerFoot = 1 removes the wobble. Is the pxPerFoot really necessary? It adds jitter to the observed mouse coordinates. Nice work, though!