Handling Velocity/Inertia on Dragging - javascript

I've built a vertical sliderish thing in my web application with the support of mouse and touch dragging events by Hammer.js. At the end of the drag (when user releases mouse button or takes his finger off the screen, a.k.a dragendevent), if the one above is closer to middle, it gets moved to the middle and vice versa.
The thing is, when dragend event is triggered at 48% when user drags the mouse from down to up (which means the one above will get moved to middle) if the velocity is high enough, the one below should get moved to middle. How to calculate if the velocity is high enough?

I solved it like this:
// y is the drag amount
// visible height
var height = $(this).height()
// difference
var diff = (Math.abs(y) % height) / height
// I checked Hammer.js's source. It defines velocity as the change in 16ms.
// So multiplying it by 62.5 gives you the change in 1s.
// Not sure why I did that, but works pretty well in most situations
var inertia = event.gesture.velocityY * 62.5
if (
(event.gesture.direction == 'up' && diff + (inertia / height) >= 0.5) ||
(event.gesture.direction == 'down' && diff - (inertia / height) >= 0.5)
) {
// show the one below
} else {
// show the one above
}

In Microsoft's WPF (now open-source), the inertial velocity is based on a weighted moving average of the last several position values (with their associated timestamps).
See ManipulationSequence.cs and the OnCompletedManipulation() method (presently starting on line 558). The velocities for translation (i.e. X and Y), expansion, and rotation are calculated based on a rolling history of timestamped values, in the CalculateWeightedMovingAverage() method.

Related

Checking if my aim cursor overlaps my game "enemy" component

I created a small game using JavaScript canvas. It's a 2D shooting game where the controller is the mouse and enemies spawn randomly within the canvas.
I am trying to get the JavaScript to detect if my cursor is overlaying my "enemy" component
For example. The logic statement is
onclick,
If aimcursor is overlapping enemy
enemy spawns at random location.
My only problem is how to check if my aimcursor is overlapping enemy
The If statement I'm using right now is what I have learnt from a website but it doesn't seem to be working.
document.addEventListener("mousedown", function(){
var gunshot = new Audio('gunshot.mp3');
gunshot.play();
if(aimcursor.x >= enemy.x && enemy.y >= aimcursor.y&&
enemy.y <= aimcursor.y && enemy.y <= aimcursor.y){}
Keep a separate gamestate object which contains x/y positions of all objects. Each time you draw on the canvas you use these coordinates. You might already be doing this. So lets say enemy.x and enemy.y are currently available within scope.
The next thing to do is getting the cursors's x/y position. You can get this by checking the MouseEvent instance provided by the mousedown callback.
https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent
The MouseEvent instance contains the clientX and clientY properties. These will reflect the coordinates of te cursor based on the client area, not the canvas, so we need to convert this first. Please see this answer:
How do I get the coordinates of a mouse click on a canvas element?
Once you actually got the coordinates. You need to check whether the mouse x/y coordinate is within a certain boundary around the enemy coordinate. This is because modern screens have high resolutions, and most likely no person is precise enough to click that correct 1 pixel area on the screen.
The boundary which is acceptable as valid input is called a "bounding box" and is typically a square or a rectangle the size of the image used to represent the enemy. If the enemy is a 50x50 px image placed on the center of it's x/y coordinate. the bounding box will start at x - 25px, y - 25px and will stretch to x + 25px, y + 25px.
You need to take the bounding box into account and validate whether the user clicked within that region. This will probably look somewhat like.
if(mouse.x >= enemy.x - 25 && mouse.x <= enemy.x + 25 && mouse.y >= enemy.y - 25 && mouse.y <= enemy.y + 25)`
(from the top of my head).
If the calculated mouse position on click matches that condition can consider that a hit.

Complex mathematical horizontal parallax easing function

I'm currently diving into parallax effects on the web.
Parallax scrolling is a technique in computer graphics and web design, where background images move by the camera slower than foreground images, creating an illusion of depth in a 2D scene and adding to the immersion.
~ Wikipedia
I want to create a little container (could be an image, or any block level element) and move it across the screen horizontally as the user scrolls.
The effect should be scalable across all viewports. Meaning that the hight and the width of the element that the element is moving across should not matter.
When the user has scrolled half of the height of the screen the "moving element" should be in the exact center. Since the user will have scrolled half of the screen the element will be vertically already. We're only worried about horizontally right now.
I've thought about this question for a while and came up with a pretty good idea of how.
Take the hight and the width of the element you want the "moving element" to move across. For example a screen that is 1000px tall and 600px wide.
Divide the width by the height. For example (600px / 1000px = 3/5 = 0.6)
Take the amount of pixels the user scrolled and multiply it by the number we just created. For example (500px * 0.6 = 300px). As you can see this is the exact center.
Move the element across the screen by the amount of pixels just calculated.
This calculation works fine even for every screen size, however it's linear. Meaning that the element will move at the same speed across the screen all the time. Let me show you what I mean.
Let's draw out a screen size. (Let's say 1000 * 500)
Calculate two points for this graph ->
screen factor: (500 / 1000) = 0.5
1. The first point is going to be easy. Let's say we scrolled exactly 0px -> (0.5 * 0) = 0
The "Moving element" will not have moved at all.
2. For the second element we'll take the center. Just for convenience.
The vertical center is at 500px -> (0.5 * 500) = 250 px (Exactly the horizontal center)
Put the results in a graph and draw a line through the points.
In the graph above you can see that whenever the user scrolls down the "moving element" will follow the line (the values on the x-axis).
My question
I really hope I described all that well enough to understand. Now on to my question.
What I want to create is a moving element that would go faster on the edge of the screen and slow down a bit in the middle. If we were to draw that out in the same way we just did. (Creating a graph where we can take the amount of pixels scrolled and see where the element should be positioned horizontally) it would look like this:
Sorry for the poor quality of the image but this is the part I'm having problems with.
As you can see in this graph the "moving element" wouldn't be moving all that much in the middle of the graph. (I over did it a bit in my drawing but you get the general idea.)
What I need is a mathematical function that takes three parameters (Screen height, width and the amount of pixels scrolled) and returns the horizontal position of the "moving element".
My idea:
My idea was to position the element in the dead center of the page and then to move it left and right (translations using CSS and JavaScript) based on how far there has been scrolled.
The graph would look something like this:
The (Hand drawn) graph above would be true for a screen that's 1000x600px since the "moving element" translates -300px when no scrolling has been done and 300px when 100% has been scrolled.
However I have no idea on how to create a mathematical function that would be true for every screen size.
To be clear I need a function that "always" starts at Y= (-screen-width/2) and X = 0. It should always cross the point (sreen-height; (screen-width//2)) and the function should be in a form of x^3 (To get the right easing)
I really hope I explained myself well enough and I really hope somebody can help me out here.
Answer from math.stackexchange
Besides asking my question here I also went ahead and posted this question on math.stackexchange.com. Stackoverflow's mathematical sister site. Somebody there helped me find an answer to my question.
The function had to be a function that would output the moving-element it's horizontal position in pixels relative to the horizontal center of the page based on the amount of pixels scrolled since the element was first visible. The function would have to be "steeper" on the edges and ease into a short stop in the middle and be usable across every possible screen size. Meaning that the mathematical function would have to be positioned based on two variables, screen height and -width.
The answer they came up with on math.stackexchange:
In this example s-width is the width of the screen in pixels. s-height is the height of the screen in pixels. px-scrolled is the amount of pixels scrolled since the element was first visible.
The output pos is the moving elements horizontal position in pixels relative to the center of the screen.
If you put all this math into JavaScript you get the following:
var pos = ((4*win_width)/(Math.pow(win_height, 3))) * Math.pow(px_since_visible - (win_height/2),3)
There is a working example available on codepen. You can find it here.
You can position it with a function f that actually draws that trajectory.
This is the idea I propose:
Create the function trajectory f such that f(0) = 0, and f(1) = 1 (add more constraints in order to reproduce the effect you are looking for, ex: f(0.5) = 0.5)
Within each scroll event, set x as the amount scrolled and position the element using the coordinates (f(x) * (w - s), x * (h - s)), where w is the document width, h is the document height and s is the size of the element
I can see that cubic functions are plotted like the trajectory you want, so I've been testing with different functions and I've got this working example https://codepen.io/anon/pen/YZJxGa
var element = $('.element')
var height = $(document).height()
var scrollable = $('body').height() - $(window).height()
var width = $('body').width();
$(window).scroll(function () {
var winH = $(window).scrollTop()
var x;
// Determine the amount of px scrolled since the element first came into view.
console.log(winH, scrollable)
x = (winH/scrollable) > 1 ? 1 : (winH/scrollable);
var posY = x * (height - 120);
var posX = (-1.000800320128*x
+6.0024009603841*x**2-4.0016006402561*x**3)*(width - 120)
console.log(posY)
if (x > 0) {
console.log(`translate(${posX}px, ${posY}px, 0)`)
element.css({
'transform': `translate3d(${posX}px, ${posY}px, 0)`
})
}
})
You can generate more cubic functions using this tool I've just found http://skisickness.com/2010/04/28/ or solve a couple of systems of linear equations using the fact that you just want to find values for a, b, c and d for f(x) = ax^3 + bx^2 + cx + d

D3.js - how to add zoom button with the default wheelmouse zoom behavior

So I got a worldmap with mouse zoom using the default d3.behavior.zoom() and limits to prevent the map from being dragged completely out of the page. This was a pain to get working, but it now work.
My problem now is that this project also require useless zoom + and - button in the interface and I can't found example featuring both type of zoom. It's either mouse zoom only or a crappy zoom by button only.
I tried simply calling zoom.scale(newScale); but it don't update anything. I seem to be on the right track since in the console you can see that the scale is updated but it don't update and when I zoom with the mouse it suddenly skip to the scale that was defined using the button. But it seem I also need to update the translate and I'm not sure how to get like the center of the map and calculate the translate needed to zoom to there.
I also need to know how to update the projection after calling zoom.scale(newScale); if it's the way to do that.
I made a simplified demo with zoom button obviously not working right now.
http://bl.ocks.org/jfmmm/f5c62bc056e557b80447
Thanks!
edit:
So close now, it zoom to the center of the map because I use the same calculation I used to calculate the middle of the screen, but whit the new scale. The problem is that I want it to zoom on the object in the middle of the screen, not always the country at the middle of the map.
function zoomBtn(action) {
var currentZoom = zoom.scale();
if( action == 'in' ){
if(currentZoom < options.maxZoomLevel){
var newScale = Math.floor(currentZoom) + 1;
var b = path.bounds(mapFeatures);
var t = [(width - newScale * (b[1][0] + b[0][0])) / 2, (height - newScale * (b[1][1] + b[0][1])) / 2];
zoom.scale(newScale)
.translate(t)
.event(svg);
}
}else{
if(currentZoom > options.minZoomLevel){
var newScale = Math.floor(currentZoom) - 1;
var b = path.bounds(mapFeatures);
var t = [(width - newScale * (b[1][0] + b[0][0])) / 2, (height - newScale * (b[1][1] + b[0][1])) / 2];
zoom.scale(newScale)
.translate(t)
.event(svg);
}
}
}
i'll update my example in a min.
The math for zooming in to the center of the screen, and not towards the top-left corner or 0lat/0lon, is fairly tricky to get right. I'm copying it from Wil Linssen's example and grafting it on to Mike Bostock's Map Pan & Zoom I. Importantly, that example uses SVG transforms to rerender the map, rather than recomputing the projection constantly. There are a few ways you might want the buttons to work:
Zoom Buttons I - Pressing a button causes a transition to the new view. Holding the button down does not restart the transition.
Zoom Buttons II - Pressing and holding the button causes the new view to be updated immediately, every 40ms. This leads to unpleasant jumps, especially when clicking the button repeatedly.
Zoom Buttons III - 100ms chained transitions that continue until the button is no longer held or the scaleExtent is met. Control logic prevents any undesirable instant panning. This is the one to use.
Again, getting the details right is tricky, which is why I'm providing full examples. But satisfyingly, the core logic does make sense. You're zeroing a vector, stretching it, and unzeroing it:
x = (x - center[0]) * factor + center[0];
y = (y - center[1]) * factor + center[1];

Pinch zoom on touch devices

I have a graph rendered within the HTML5 canvas. The working is good till this point. Now I need to implement pinch zoom on the graph for touch devices. The logic is as the two finger stretches apart the graph zooms in and as the finger moves together the graph zooms out. In this case we need to constantly update the axis value. The problem here is how do we get the individual X and Y axis value of both the fingers and then calculate the amount of zoom to be done. As for example, for zooming using mouse we can get the start X and Y value on mouse down and on mouse up we get the end X and Y axis value. Using this start and end value of X and Y axis the graph can be zoomed accordingly. The canvas should not zoom in/out. The zoom in can be infinite but the zoom out will be till the default plotting of the graph. Any idea or help would be really appreciable. I am not getting the proper calculation.
I have implemented it in the following way. Any suggestions are welcome.
First I have taken the screen co-ordinates of the two fingers touch on start and converted it to its corresponding view co-ordinates by calculating its distance from the topmost and leftmost position. After that I have calculated the scale and new co-ordinates for X-axis in the following way.
Let
d1 and d2 be the dataspace coordinates of the initial/starting touches.
newx1 and newx2 are the x positions of the new touches.
screenW is the current screen width (i.e. width of plot in screen space).
Then
scale = (d2 - d1) / (newx2 - newx1)
If we use newd1, newd2 to denote the new datarange min and max values that we're trying to compute:
newd1 = d1 - newx1 * scale
newd2 = newd1 + screenW * scale
Similarly, we can do the calculation for new datarange min and max values of Y-axis.
Variant A:
Take a JavaScript library like Hammer.js which abstracts away all then event handling and gives you an event in case of a pinch. This should look like this:
var element = document.getElementById('test_el');
var hammertime = Hammer(element).on("pinchout", function(event) {
console.log("Zoom out!!");
// event.scale should contain the scaling factor for the zoom
});
Variant B:
Read about the touch events and how to identify if it is a multitouch. Figure out when it is a pinch and if how far the fingers have moved. There is nice write up here.

How to get the correct mouse position in relation to a div that has has a scale transform applied

I am using CSS transform scale to create a smooth zoom on a div. The problem is that I want to be able to get the correct mouse position in relation to div even when scaled up, but I can seem figure out the correct algorithm to get this data. I am retrieving the current scale factor from:
var transform = new WebKitCSSMatrix(window.getComputedStyle($("#zoom_div")[0]).webkitTransform);
scale = transform.a;
When I read the position of the div at various scale settings it seems to report the correct position, i.e. when I scale the div until is is larger the the screen the position left and top values are negative and appear to be correct, as does the returned scale value:
$("#zoom_div").position().left
$("#zoom_div").position().top
To get the current mouse position I am reading the x and y position from the click event and taking away the offset. This works correctly at a scale value of 1 (no scale) but not when the div is scaled up. Here is my basic code:
$("#zoom_div").on("click", function(e){
var org = e.originalEvent;
var pos = $("#zoom_div").position();
var offset = {
x:org.changedTouches[0].pageX - pos.left,
y:org.changedTouches[0].pageY - pos.top
}
var rel_x_pos = org.changedTouches[0].pageX - offset.x;
var rel_y_pos = org.changedTouches[0].pageY - offset.y;
var rel_pos = [rel_x_pos, rel_y_pos];
return rel_pos;
});
I have made several attempts at multiplying dividing adding and subtracting the scale factor to/from from the pageX / Y but without any luck. Can anyone help me figure out how to get the correct value.
(I have simplified my code from the original to hopefully make my question clearer, any errors you may find in the above code is due to that editing down. My original code with the exception for the mouse position issue).
To illustrate what I am talking about I have made a quick jsfiddle example that allows the dragging of a div using translate3d. When the scale is normal (1) the div is dragged at the point where it is clicked. When the div is scales up (2) it no longer drags correctly from the point clicked.
http://jsfiddle.net/6EsYG/12/
You need to set the webkit transform origin. Basically, when you scale up it will originate from the center. This means the offset will be wrong. 0,0 will start in the center of the square. However, if you set the origin to the top left corner, it will keep the correct coordinates when scaling it. This is how you set the origin:
#zoom_div{
-webkit-transform-origin: 0 0;
}
This combined with multiplying the offset by the scale worked for me:
offset = {
"x" : x * scale,
"y" : y * scale
}
View jsFiddle Demo
dont use event.pageX - pos.left, but event.offsetX (or for some browser: event.originalEvent.layerX
div.on('click',function(e) {
var x = (e.offsetX != null) ? e.offsetX : e.originalEvent.layerX;
var y = (e.offsetY != null) ? e.offsetY : e.originalEvent.layerY;
});
see my jsFiddle exemple: http://jsfiddle.net/Yukulele/LdLZg/
You may embed the scaled content within an iframe. Scale outside the iframe to enable scaled mouse events within the iframe as mouse events are document scope.

Categories