I want to create something that loops through and shows each of some images when the user moves the mouse across the screen.
I initially tried to use the onmouseover event to increment a value each time the user moved the mouse. The goal was to increment the "image loop index" when the mouse has moved a set amount of pixels from the last initial position. However, this method was not working as the event doesn't register every little pixel moved when moving the mouse fast.
So I ended up using event.pageX and event.pageY instead, storing these values in initX and initY, then comparing the summed value of these two with two variables storing the new value (tempX and tempY) using Math.abs((initX + initY), (tempX + tempY)) > limit, where limit is a set value of difference. If the new X and Y values differ more than limit, initX and initY is defined again with the current X and Y position and a function shows the next image.
Here's a fiddle: https://jsfiddle.net/tobias_kh/d3gv2ybo/
It's working like intended, but I realized that as the function is comparing the difference in pixels between (initX + initY) and (tempX + tempY), moving the mouse diagonally creates a smaller difference which results in it reaching the limit slower than moving the mouse strictly horizontally or vertically.
Is there some other way of doing this comparison? The optimal result would be if it just strictly looks at the amount of pixels moved instead of comparing the old and new position of the mouse.
As far as I understand, you need to calculate distance between two points here (hypotenuse in most cases). So you can use this function for comparison between two points:
function calculatePixelDistance(initX, initY, tempX, tempY) {
return Math.sqrt(Math.pow((initX - tempX), 2) + Math.pow((initY - tempY), 2));
}
The Pythagorean Theorem
Related
I am trying to make a HTML/JavaScript game, but I need to make one of my objects bounce off the edge of the canvas instead of running off.
Here is my code:
http://pastebin.ca/3594744
You've got the right idea. Your object has an x & y position which is incremented/decremented each frame by the respective x or y velocity. Now all you need to do is detect when your object has collided with the bounds of the canvas, and negate the velocity in that respective direction to send the object in the opposite trajectory.
Here's some pseudocode:
// Called each frame to update the position of the object.
updatePosition():
handleCollision()
updatePosition()
// Detects a collision with a wall, calculating the bounce offset, and new velocity if applicable.
handleCollision():
// Detect collision with right wall.
if (object.x + object.width > canvas.width)
// Need to know how much we overshot the canvas width so we know how far to 'bounce'.
overshootX = (object.x + object.width) - canvas.width
object.x = canvas.width - overshootX - object.width
velocityX = -velocityX
// Repeat the same algorithm for top, left, and bottom walls.
What I'm trying to do is simply make a ball rebound from a wall. Everything works OK, except the fact I want to be able to increase the speed of movement. Literally, the speed is how much 'x-value' is added (measured in px) to the ball's current position. The thing is, when I'm increasing the var speed, the ball floats out of the bounds, because the rebounding is checked by the difference between the bound and the current position of the ball.
--------------------------------------update-----------------------------------------
I've used the technique suggested by Mekka, but still did something wrong.The ball doesn't float outside anymore, yet something "pushes it out" of the bounds for several pixels/"doesn't let the ball float several more pixels to reach the bounds".
My new code looks like this:
// the bounds-describing object
var border={
X:[8,302], // left and right borders in px
Y:[8,302], // top and bottom borders in px
indX:1, //border index for array Х
indY:0, //border index for array Y
changeInd:function(n){return this[n] = +!this[n]; } // function to change the index
};
if($("#ball").position().left + speed > border.X[1] || $("#ball").position().left + speed < border.X[0]){
var distX = "+=" + (border.X[border.indX] - $("#ball").position().left);
var distY = "-=" + ((border.X[border.indX] - $("#ball").position().left) * k);
$("#ball").css("left", distX);
$("#ball").css("top", distY);
border.changeInd("indX");
speed = -speed;
}
if($("#ball").position().top + k > border.Y[1] || $("#ball").position().top + k < border.Y[0]){
var distX = "+=" + ((border.Y[border.indY] - $("#ball").position().top) / k);
var distY = "+=" + (border.Y[border.indY] - $("#ball").position().top);
$("#ball").css("left", distX);
$("#ball").css("top", distY);
border.changeInd("indY");
k = -k;
}
Another problem is that my code's math is incorrect sometimes, the reason of which I absolutely can't figure out. To test it, try 45 degrees with different speed.
The question is: how can I improve the 'collision-checking' process or even apply some other technique to do this?
the whole code can be found here:
http://jsfiddle.net/au99f/16/
You're very close! The answer is actually hinted at in your question. You're currently using the absolute value of the distance to the boundary to determine when to change direction. This defines a "magic zone" where the ball can change direction that is about 6 pixels wide (given your speed of 3). When you increase speed to something higher (like 10), you could jump right over this magic zone.
A better way to do this would be to test if the next jump would put the ball completely outside the bounds. So this check is not based on a constant (like 3) but on the speed of the ball itself. You can also see how much the ball would have travelled out of bounds to determine how far to move the ball in the opposite direction. In other words, if your speed is 10, and the ball is 3 pixels from the right edge on step 8, then on step 9, the ball would be 7 pixels from the right edge, traveling left. Be wary of edge cases (ball could land exactly on bounds).
I am trying to draw flightpaths on a map using SVGs. I'm using d3 on top of Leaflet, but the frameworks used shouldn't make a difference to my problem - it's trig.
http://fiddle.jshell.net/zw8TR/26
The way I'm trying to do this is by creating a quadratic bezier curve (I'm open to other/easier ways if you know of any). What I need to calculate is 1 control point, perpendicular to the midpoint of each line. This point should always bias to a higher y value / latitude than the midpoint, to create an arc which looks like a flightpath.
In my demo above, I found it's easier to debug exactly where the control point is by adding some extra temporary points. As you can see, some of my control points are facing downwards, and none look to be properly perpendicular.
Check out my previous question on this - with diagrams!
I have a feeling the problem boils down to this line:
var theta = Math.atan2(t_area_y, t_area_x) * 180 / Math.PI;
I'm not handling negative coordinates properly. I have tried to hack in a nasty set of if gates to handle this.
I have tried to comment the fiddle nicely to explain what's going on. Once I know the point, it should be a simple case of creating a custom interpolation in d3.
This is actually easier than you think if you use a custom line generator. Instead of adding the control points to the feature, you just add them during the computation of the path. The code looks like this:
feature.attr("d", function(d) {
var s, prev;
d.geometry.coordinates.forEach(function(c) {
var proj = map.latLngToLayerPoint(new L.LatLng(c[1], c[0]));
if(s) {
var length = Math.sqrt(Math.pow(proj.x - prev.x, 2), Math.pow(proj.y - prev.y, 2)),
midx = prev.x + (proj.x - prev.x) / 2,
midy = prev.y + (proj.y - prev.y) / 2 - length * 0.2 * (Math.abs(proj.x - prev.x) / length);
s += "Q" + midx + "," + midy + " " + proj.x + "," + proj.y;
} else {
s = "M" + proj.x + "," + proj.y;
}
prev = proj;
});
return s;
});
Let's go through it step by step. The main thing is that I'm keeping track of the coordinates of the previous point to be able to compute the control point. First, s will be null and the else branch is taken -- simply move to that point (the start point) without drawing a line. For all subsequent points, the actual computation takes place.
First, we compute the distance between the two points (previous and current), length. Computing the x coordinate of the control point is straightforward, as no offset is required. The y coordinate is a bit trickier -- the first part is the same, then the offset is added. The size of the offset is 20% of the length of the path here (to make wider arcs for longer paths), adjust as necessary. This needs to be multiplied by the cosine of the angle to the x axis, but fortunately we don't need to compute the angle explicitly -- it is defined by the relation between the distance between the points and the difference in x coordinates (the arc cosine of that angle). So we can just take that relation directly and multiply by it. As you want arcs to point up (i.e. negative y offset), we're taking the absolute value of the x coordinate differences. Without that, some of the control points would be pointing down.
Complete example here.
I'm trying to make a little game just for the fun of it where i have some collision problems.
I have a player drawn on a canvas and some blocks (16 x 16px) drawn on another canvas.
But i have a problem with detecting horizontal collisions.
...
My problem comes down to this:
My player uses x y coordinates that are stored as:
var p_x; var p_y;
these values is the players bottom left coordinates in pixels.
But my blocks is in a 2d array called:
var g_levelarray;
And each block is 16 x 16 px so for instance if i do:
g_levelarray[3][2] = 1;
means that a block will be drawn at canvas left: 48px and canvas bottom 32px
...
But then i have my code to check if block exists (according to player) where the x and y is playercoordinates
function blockexists(x, y) {
var xpos = parseInt(x / g_blocksize);
var ypos = parseInt(y / g_blocksize);
$("#checkedblock").html("checked block: " + xpos + " " + ypos);
if (g_levelarray[xpos][ypos] != undefined) {
return true;
}
else {
return false;
}
}
but that check has some errors due to the fact that it rounds down the number so when i hit a block from half down the top (as shown on image below) it allows player to go inside block.
(source: userhome.org)
i have also tried Math.round instead of parseInt but that just makes a problem at players middle.
So how can i write this code in a right way so that my player doesnt go into the block?
thx in advance
Instead of just using the parseInt and round try using a range.
Take the lower bound(Math.floor) and the upper bound Math.ceil and check if the block exists in this range by checking these values in the array.
I have an application with many draggable objects that can also be rotated in 90 degree increments. I'm trying to figure out how to stop the user from dragging the objects outside the Raphael paper (canvas).
This is fairly simple for unrotated objects. I can simply see if the current x and y coordinates are less than 0 and set them to 0 instead. I can adjust similarly by checking if they are outside the canvas width and height.
However, a problem arises when the object is rotated because for some odd reason the coordinate plane rotates as well. Is there an easy way to keep objects inside the canvas? Or is there an example of some this somewhere?
I have spent many hours fiddling with this and I can't seem to make sense of the rotated coordinate plane in order to adjust my calculations. Even when debugging the current coordinates, they seem to shift oddly if I drag an object, release it, and then drag the object again.
Any help is greatly appreciated.
Thanks,
Ryan
I had a similar problem, I needed to move a shape within the boundaries of another shape, so what I did was:
element.drag(onstart, onmove, onend);
...
onStart: function(x,y,e){
// Initialize values so it doesn't recalculate per iteration
// this allows to resume dragging from the point it were left
App.oldX = 0;
App.oldY = 0;
App.currentCircleX = App.fingerPath.attr('cx');
App.currentCircleY = App.fingerPath.attr('cy');
},
onMove: function(dx,dy,x,y,e){
App.setDirection(dx,dy);
},
onEnd: function(e){
// nothing to do here for now
},
// this function tells the element to move only if it's within the bound area
setDirection: function(dx, dy){
var isXYinside;
this.newX = this.currentCircleX - (this.oldX - dx);
this.newY = this.currentCircleY - (this.oldY - dy);
// HERE is the key, this method receives your bounding path and evaluates the positions given and then returns true or false
isXYinside = Raphael.isPointInsidePath(this.viewportPath, this.newX, this.newY);
this.oldX = dx;
this.oldY = dy;
// so if it is within the bound area, will move, otherwise will just stay there
if (isXYinside) {
this.fingerPath.attr({
"cx": this.newX,
"cy": this.newY
});
this.currentCircleX = this.newX;
this.currentCircleY = this.newY;
}
}
I know this is an old one, but I stumbled upon this question when trying to figure out a way to do it. So here's my 2 cents in case someone has this problem.
Reference:
Raphael.isPointInsidePath
Have you tried Element.getBBox()
There Are 2 flavones which give the result before rotation and after rotation
You should toggle the Boolean argument and test it