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!
Related
I am trying to implement a collision system for my three js racing game. I am following this guide to implement the system which calculates the final linear and angular velocities following a collision between two cars.
https://www.myphysicslab.com/engine2D/collision-en.html#resting_contact
However I have troubling when it comes to finding the correct direction for the normal. According to the link: Let the vector n be normal (perpendicular) to the edge of body B that is being impacted, and pointing outward from body B. I am using the following method for finding this normal.
How do I calculate the normal vector of a line segment?
Finding the numerical value of the normal is easy but I have trouble making my program use the correct direction. For instance i want the blue normal and not the red one.
Here is a picture that explains what i mean more clearly I hope:
No formula can guess what side of the surface you are interested in, so it is up to you to provide this hint.
You can select the right orientation that by using one of Rap x Rbp or Rbp x Rap, but it is up to you to choose depending on the orientation conventions used in your model. (With the little information provided, I can't tell you more.)
I've been banging my head over this for some time now and I am hoping someone can help me out here.
I'm building a web application where you can draw Lines ("polylines") and symbols ("circle") in an SVG. What I would like to do is place a symbol on a line. Making it snap to the line. I also want it to be usable when using a tablet so I created a custom cursor that has an offset. This way you can position the cursor accurately when working on a tablet pc.
There are two options I thought of. Each has an issue I do not know how to solve.
Option 1: Using hover / touch event when placing a symbol on a line. Unfortanatly since I use a custom cursor with an offset this causes a problem. Is there any way to manipulate the DOM making it think the hover event takes place elsewhere on the screen (in a specific div)?
Option 2: Calculating the correct position. I figured out how to calculate the height of the 'imaginary' triangle (line to cursor). So I'm able to select the line the symbol should be placed on. Unfortunately to calculate the position on the selected line is a lot more code. Since that code will be run onmousemove / touchmove I fear this code will make the UI unstable.
Thanks in advance for any advice that will help me on my way.
I have a possibly beginner question regarding camera rotation in threejs, I am beginning to work on a first person game, the camera controls however have a small issue: if I look up and down they seem to work fine, but if I step to the side of my object and use them then the object (cube) does a circle around the center of my screen.
A breakdown of my code:
Pointer lock tells me when the mouse moves, and I use it for back and forth movement:
camera.rotation.y += movementX;
this works fine, because the y axis will always be up and down, but it doesn't work for side to side:
camera.rotation.x += movementY;
like I said, if I don't move from the starting position then it works fine, otherwise it gets messed up.
I am basically looking for something like:
camera.rotateX(a number);
which is like translateX(), it uses local object axis, not parallel to world axis.
I know about first person controls, but I would prefer to not use them, I would prefer code that is longer but more understandable (if possible/necessary).
Sorry For length of question :)
I've put together some key frame animations in CSS which animate a div from one side of the screen to the other, applying a slight rotation along the way. I'm finding the key frame approach restrictive because I want to be able to have many variations that go into one big sequence. The variations could as an example be not just left to right, right to left but also up to down and so on. To add more complexity to the problem, I need to be able to shuffle up this sequence and retain continuity between each animation.
The sequence itself should be able to run in any order and reset.
For example if I want to move the div in 100px phases:
left (100px), up (100px), left (100px) and then down(100px)
the next time I might want the sequence as follows (again 100px):
left, down, right, up
My thinking is that this would be better achieved by using JavaScript to write the animations on the fly perhaps using something like the CSS3 Matrix. So far I've figured out the easy stuff like left and right but I can't figure out how to add in rotation. This seems like a really good starting point:
http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/
http://www.eleqtriq.com/2010/05/css-3d-matrix-transformations/
Also been taking a look at this:
http://tweenjs.com/
My thoughts are, a) am I over-complicating this by taking the CSS Matrix approach? Is there something simpler? and b) How can I achieve rotation and movement at the same time using the CSS Matrix or any other approach?
Any help appreciated!
If you want to do dynamic animations, then you should be using JavaScript to animate.
As far as how to combine translation with rotation, the answer is right there in the useragentman post (which incidentally is a very good introduction to css matrixes.)
Take the angle of rotation (in radians) that you want to achieve and create the following matrix:
Cos(angle), -Sin(angle), 0
Sin(angle), Cos(angle), 0
0, 0, 1
then create the following matrix for your (presumably 2D) movement in x and y.
0,0,X
0,0,Y
0,0,1
Then multiply them together (or take the dot product in matrix terminology). Here is a handy matrix multiplier for you, the details of how to create a dot product are also in the same post.
Note that these are transforms (not position changes) and transforms don't affect affect page position.
I'm trying to record exactly where the mouse moves on a web page (to the pixel). I have the following code, but there are gaps in the resulting data.
var mouse = new Array();
$("html").mousemove(function(e){
mouse.push(e.pageX + "," + e.pageY);
});
But, when I look at the data that is recorded, this is an example of what I see.
76,2 //start x,y
78,5 //moved right two pixels, down three pixels
78,8 //moved down three pixels
This would preferably look more like:
76,2 //start x,y
77,3 //missing
78,4 //missing
78,5 //moved right two pixels, down three pixels
78,6 //missing
78,7 //missing
78,8 //moved down three pixels
Is there a better way to store pixel by pixel mouse movement data? Are my goals too unrealistic for a web page?
You can only save that information as fast as it's given to you. The mousemove events fires at a rate that is determined by the browser, usually topping at 60hz. Since you can certainly move your pointer faster than 60px/second, you won't be able to fill in the blanks unless you do some kind of interpolation.
That sounds like a good idea to me, imagine the hassle (and performance drag) of having 1920 mousemove events firing at once when you jump the mouse to the other side of the screen - and I don't even think the mouse itself polls fast enough, gaming mice don't go further than 1000hz.
See a live framerate test here: http://jsbin.com/ucevar/
On the interpolation, see this question that implements the Bresenham's line algorithm which you can use to find the missing points. This is a hard problem, the PenUltimate app for the iPad implements some amazing interpolation that makes line drawings look completely natural and fluid, but there is nothing about it on the web.
As for storing the data, just push an array of [x,y] instead of a string. A slow event handler function will also slow down the refresh rate, since events will be dropped when left behind.
The mouse doesn't exist at every pixel when you move it. During the update cycle, it actually jumps from point to point in a smooth manner, so to the eye it looks like it hits every point in between, when in fact it just skips around willy-nilly.
I'd recommend just storing the points where the mouse move event was registered. Each interval between two points creates a line, which can be used for whatever it is you need it for.
And, as far as processing efficiency goes...
Processing efficiency is going to depend on a number of factors. What browser is being used, how much memory the computer has, how well the code is optimized for the data-structure, etc.
Rather than prematurely optimize, write the program and then benchmark the slow parts to find out where your bottlenecks are.
I'd probably create a custom Point object with a bunch of functions on the prototype and see how it performs
if that bogs down too much, I'd switch to using object literals with x and y set.
If that bogs down, I'd switch to using two arrays, one for x and one for y and make sure to always set x and y values together.
If that bogs down, I'd try something new.
goto 4
Is there a better way to store pixel by pixel mouse movement data?
What are your criteria for "better"?
Are my goals too unrealistic for a web page?
If your goal is to store a new point each time the cursor enters a new pixel, yes. Also note that browser pixels don't necessarily map 1:1 to screen pixels, especially in the case of CRT monitors where they almost certainly don't.