I am trying to drag some shapes in HTML canvas but I am encountering a problem with respect to determining the change in mouse coordinates [dx,dy]
First of all, there is no problem in the coordinates themselves, stored in mousePos as the rollover effects work flawlessly. What I am doing is, upon first entering the shape, saving the mouse coordinates.
pos = {x : mousePos[0] , y : mousePos[1]};
Then, onMotion updates the coordinates everytime the mouse moves as well as recording the current position
dx=mousePos[0]-pos.x;
dy=mousePos[1]-pos.y;
pos = {x : mousePos[0] , y : mousePos[1]};
Then I add the dx and dy values to the shapes coordinates (lets take a simple rectangle as an example)
ctx.fillRect(0+this.dx,0+this.dy,100+this.dx,100+this.dy);
as long as the mouse doesn't move too fast, it works relatively well (not perfect though). If I move the mouse very quickly, without going out of the window, the rectangle does not catch up with the mouse. I can understand if there is a delay catching up to the mouse, but how can the delta values be off? Clearly we know where we started, and even if dozens/hundreds of pixels are skipped in the process, eventually the mouse should stop and the correct delta values should be calculated.
Any help would be greatly appreciated as I have hit a conceptual wall here.
You might try to get e.layerX-Y when the onMotion is fired to get the real position instead of the delta. This way it can't be "off".
To use this, place your shape into a div with style="padding:0px;margin=0px;" , because the position is relative to the parent block.
Related
Just starting out with unity, I simply just want to move the object forward in a straight-line. However, there are two things I'm noticing and I'm not sure why they're happening.
First, before starting the program, the Player's (Cube) transform position is set to (0, 1, 0). When I first simply run the program, the position changes to (-3.429751e-08, 1, -2.532359e-08) without me touching or doing anything further.
The second issue I'm having is, when pressing the forward key, "w" in this case, position x will slowly increase while rotation y slowly decreases. So the Player slowly drifts to the right while rotating slowly to the left.
All Slippery does is delete all friction from Ground. PlayerMat is just to change the color of the cube.
Basic code, Full Screen before start, Screen after start before and after moving are attached:
PlayerMovement Code
Full Screen BEFORE Starting Program
Screen AFTER Starting but didn't do anything else. Observe the random change of positions x and z
Screen AFTER Starting and moving forward a bit. Observe the random increase of position x and random decrease of rotation y
I tried resetting the position to (0, 1, 0) at the start using my Movement script as well as manually doing it in transform, but it stays (-3.429751e-08, 1, -2.532359e-08) either way. I also tried updating the rotation every frame to keep the rotation (0, 0, 0) using my Movement Script. However, the Player then drifts to the left.
Number representations in computers always have rounding errors because the space to represent numbers (e.g. 32 bit for float) is discrete. -3.429751e-08 is a very small value and can be considered zero. For the same reasons these little rounding errors stack up with repeated calculations. You are using the physics engine of Unity which will do a lot of calculations in the background pushing your cube around and thus changing the transform. The occuring rotational drift is a "natural" consequence of these calculations. That why you can tell the rigid body component to constraint such unwanted drifts. In your rigid body component, look under Contraints > Freeze Rotation and check the Y box. This should fix your movement.
My main character moves by touching and holding him and then moving your finger left or right to move the character. To do this I just simply update the node's x position (walks left and right on a flat surface) in touchesMoved() with the x position of the touch location, and apply an animation depending on the direction he's moving.
I want to kind of take this to the next level and accomplish the same effect, but using physics, so that when I'm done moving him and release my finger, he may slide a little bit in the direction he was moving given the speed I was moving him at, if that makes sense. Does anyone know how I can accomplish this effect?
Would I have to do as I'm currently doing and update the position as it moves, but also apply a force/impulse at the same time? Kind of confused on how to approach this
Moving the physics body via force, impulse, or velocity will automatically update the player position.
So you will have to play around with the correct way to accomplish your goal. But based on this, what I would suggest is replace your .position code with .physicsBody!.velocity code in your touchesMoved. Then, on your touchesEnded, you can apply a bit of an impulse to give the player that little bit of an "on ice" effect to keep them going a tad.
You will need to experiment with how much velocity you want to get the character to move at the correct speed, and then you will need to play with the impulse figures as well to get it just right.
This could get a bit tricky though, in touchesMoved... because at some point you will want to reset the velocity to 0 (so they stop moving when your finger stops).
To do that, you will need to to use the .previousLocation from your touch object, and compare the distance of X moved. if the distance X moved is >0 (or some deadzone threshold) then apply the velocity; if the deltaX is 0, then set the velocity to 0.
This may actually be more complicated than just using .position to move the character, then having the character slide a bit with physics on touchesEnded.
You will have to play with it to get it right.
I'm working in MATLAB and I want to get the cursor position from anywhere on the screen.
I would like to continuously get the position of the cursor while the mouse is moving. However, I found that MATLAB can get the mouse position while the mouse is moving only in a GUI.
How can I achieve the same thing but not in a GUI in MATLAB?
Are you sure MATLAB can only get the mouse co-ordinates within a GUI? It's actually quite simple to get the position of your mouse anywhere on your screen, independent of a GUI.
Use the following:
get(0, 'PointerLocation')
Try this by moving your mouse around and invoking this command each time. You will see that the output keeps changing when the mouse moves. You'll see that this works independent of a GUI.
The output of this function will return a two-element array where the first element is the x or column position and the second element is the y or row position of your mouse. Bear in mind that the reference point is with respect to the bottom left corner of your screen. As such, placing your mouse at the bottom left corner of the screen should yield (1,1) while placing your mouse at the top right corner of the screen yields the resolution of your screen.
Now, if you want to continuously get the position of the mouse, consider placing this call in a while loop while pausing for a small amount of time so you don't overload the CPU. Therefore, do something like this:
while condition
loc = get(0, 'PointerLocation');
%// Do something
%...
%...
pause(0.01); %// Pause for 0.01 ms
end
Basically, my problem is that I spawn a movieclip at coordinates where the mouse is clicked, then the movieclip is set to fall to a certain point, which is about to y=400.
The problem is that it takes the point where it spawned as the 0,0 coordinate and does it's actions using it. For an example, if I'd click at coordinates of 250y, it would fall to 650y. Is there a method where I can take the stage coordinates and use them in the movieclip, locally?
Also, I have another problem, which I haven't gotten around at fixing yet. My movieclips are set to highlight when they're hovered over with the mouse, but they are moving to the right at a constant speed. The problem is that the place where I have to hover over to highlight the movieclip doesn't change.
You would be interested in globalToLocal and localToGlobal methods on display object.
where globalToLocal(point) would transform the point to local coordinates. In your case the point is the stage x and stage y of the mouse event.
I am trying to figure out how can you drag an image while constraining its movement along a certain path.
I tried several tricks including animation along a path, but couldn't get the animation to play and pause and play backwards - so that seems out of the question.
Any ideas ? anyone ?
What you're basically trying to do is match finger movement to a 'translation' transition.
As the user touches down and starts to move their finger you want to use the current touch point value to create a translation transform which you apply to your UIImageView. Here's how you would do it:
On touch down, save the imageview's starting x,y position.
On move, calculate the delta from old point to new one. This is where you can clamp the values. So you can ignore, say, the y change and only use the x deltas. This means that the image will only move left to right. If you ignore the x and use y, then it only moves up and down.
Once you have the 'new' calculated/clamped x,y values, use it to create a new transform using CGAffineTransformMakeTranslation(x, y). Assign this transform to the UIImageView. The image moves to that place.
Once the finger lifts, figure out the delta from the original starting x,y, point and the lift-off point, then adjust the ImageView's bounds and reset the transform to CGAffineTransformIdentity. This doesn't move the object, but it sets it so subsequent accesses to the ImageView use the actual position and don't have to keep adjusting for transforms.
Moving along on a grid is easy too. Just round out the x,y values in step 2 so they're a multiple of the grid size (i.e. round out to every 10 pixel) before you pass it on to make the translation transform.
If you want to make it extra smooth, surround the code where you assign the transition with UIView animation blocks. Mess around with the easing and timing settings. The image should drag behind a bit but smoothly 'rubber-band' from one touch point to the next.
See this Sample Code : Move Me