Develop Reference

Reverse gravity / anti-gravity? What elements of a gravitational force algorithm do i need to change for reversing it?

I want to reverse my gravitational force algorithm to produce locations in the "past" of multiple bodies interacting. It's trivial to produce locations in the future by running the algorithm multiple times on the set of bodies but reversing this to write out positions of bodies' previous positions has stumped me. I don't want to store the past positions and since this is deterministic, it should be possible to somehow run the algorithm backwards but I'm not sure how.
In the snippet element each of the bodies that are tested from universe in the loop, tick is the delta time.
function forces(other) {
if (element === other) {
return;
}
var distancePoint = element.point.sub(other.point);
var normal = Math.sqrt(100.0 + distancePoint.lengthSq());
var mag = GravatationalConstant /
Math.pow(normal, 3);
var distPointMulOtherMass = distancePoint
.mul(mag * other.mass);
element.acceleration = element.acceleration.sub(distPointMulOtherMass);
other.acceleration = other
.acceleration
.add(distancePoint
.mul(mag * element.mass)
);
}
element.acceleration = new Point(0,0,0,0);
universe.forEach(forces);
element.velocity = element.velocity.add(element.acceleration.mul(ticks));
element.point = element.point.add(element.velocity.mul(0.5 * ticks));
I tried sending a negative tick as well as negative gravitational constant, but the positions it produces for the "past" didn't seem to follow what the elements appeared to do in the real past.
I don't know much about physics but I was wondering if there is a small change that could be done to reverse this algorithm.
Update
Thanks to Graeme Niedermayer, I've updated my gravity algorithm to the inverse square law and using negative time it appears to produce positions in the past!
function forces(other) {
if (element === other) {
return;
}
var distancePoint = element.point.sub(other.point);
const forceElementMass = GravatationalConstant * element.mass * other.mass /
Math.pow(element.mass,2)
const forceOtherMass = GravatationalConstant * element.mass * other.mass /
Math.pow(other.mass,2)
element.acceleration = element.acceleration
.sub(distancePoint.mul(forceOtherMass))
other.acceleration = other.acceleration
.add(distancePoint.mul(forceElementMass))
}
const ticks = forwards ? dt : -dt;
element.acceleration = new Point(0,0,0,0);
universe.forEach(forces);
element.velocity = element.velocity.add(element.acceleration.mul(ticks));
element.point = element.point.add(element.velocity.mul(0.5 * ticks));
Outlined circles are at the current position and the "past" positions are others fading out to zero opacity.
Update 2
Realised that I used the wrong equation in Update 1 (both force constants used the same mass object). I looked into a few more examples and have updated the code, but now I'm not sure where i should add the delta time ticks which is currently just set to 1 for forwards and -1 back backwards. Below is an image of what is looks like if I multiply the acceleration by ticks before adding it to the velocity each frame body.velocity = body.velocity.add(body.acceleration.mul(ticks)) or if I make one of the masses negative const force = G * body.mass * (forward ? other.mass : -other.mass) / d ** 2.
As you can see the "past" positions (red outline) of the green body go over to the left and above. I was hoping to have them appear to "follow" the current position but I'm not sure how to reverse or invert the equation to show the "past" positions, basically if the body was traveling in the opposite direction. Is there a way to do this?
In this next image I have multiplied the velocity by delta time ticks before adding it to the position body.point = body.point.add(body.velocity.mul(ticks)) this results in a similar path to a recorded path the body traveled (by writing each position to an array and drawing a line between those positions) but it is slightly off. This solution is similar to what I was seeing in Update 1. Is there a reason that this is "almost" correct?
Code below is without any additions to reverse the position.
function forces(other, ticks) {
if (body === other) {
return;
}
// Calculate direction of force
var distanceVector = other.point.sub(body.point)
// Distance between objects
var d = distanceVector.mag()
// Normalize vector (distance doesn't matter here, we just want this vector for direction)
const forceNormalized = distanceVector.normalized()
// Calculate gravitational force magnitude
const G = 6.674
const force = G * body.mass * other.mass / d ** 2
// Get force vector --> magnitude * direction
const magDirection = forceNormalized.mul(force)
const f = magDirection.div(body.mass)
body.acceleration = body.acceleration.add(f)
}
body.acceleration = body.acceleration.mul(0)
universe.forEach(body => forces(body, ticks))
body.velocity = body.velocity.add(body.acceleration)
body.point = body.point.add(body.velocity)
Update 3
I ended up removing the negative mass and the velocity multiplied by ticks and just reversed the way the acceleration is applied to the position:
if (forward) {
universe.forEach(body => forces(body, ticks));
body.velocity = body.velocity.add(body.acceleration)
body.point = body.point.add(body.velocity)
} else {
body.point = body.point.sub(body.velocity)
universe.forEach(body => forces(body, ticks));
body.velocity = body.velocity.sub(body.acceleration)
}
Resulting in being able to generate positions forwards and backwards in time from the current position. In the image it appears so the "past" positions follow the recorded trail of the current position.
To generate a step in the "past" it subtracts the current velocity from the current position, putting it in the last position it was in. Next it gets the acceleration by checking the forces from other bodies then subtracts the new acceleration (using negative mass would do the same) from the velocity so the next position in the "past" will be correct.

You should be able to make one of the masses negative.
The reason why negative time doesn't work is because you are implicit using euler's method. Euler's method is unstable when using negative steps.
Also the physics you using is also a little weird. Gravity is usually a squared law.

2D Rotated Rectangle Collision

I'm trying to test if two rectangle objects, one of which being rotated, are colliding in JavaScript.
Here's the screen shot of what I'm on about.
After hours of online research, I'm still wondering what's the best way (algorithm) to detect if the laser-ish lime object is overlapping with the blue square.
I'd appreciate any advice.

You can use the separating axis theorem for this. Basically, if 2 convex polygons (e.g. rectangles) do NOT intersect, then there should be at least one line (formed by the edges of one of the polygons extended to infinity) where all the corners from one polygon are on one side of it, and all the corners from the other polygon are on the other side.
You can test which side of a line a point is on using a dot product. One vector should be the normal to the line, and the other vector should be a vector from a point on the line to the point you are testing.
If you specify your rectangle corner vertices with a constant winding order (e.g. always clockwise or always counter clockwise) then you'll know the sign that the dot product should be when the points from the other rectangle are on the side of the line corresponding to the outside of the rectangle.
pseudo-code:
function hasSeparatingAxis(a, b)
{
// test each side of a in turn:
for(i = 0; i < a.side_count; i++)
{
normal_x = a.verts[(i+1)%a.side_count].y - a.verts[i].y;
normal_y = a.verts[i].x - a.verts[(i+1)%a.side_count].x;
for(j = 0; j < b.side_count; j++)
{
dot_product = ((b.vert[j].x - a.verts[i].x) * normal_x) +
((b.vert[j].y - a.verts[i].y) * normal_y);
if(dot_product <= 0.0) // change sign of test based on winding order
break;
if(j == b.side_count-1)
return true; // all dots were +ve, we found a separating axis
}
}
return false;
}
function intersects(a, b)
{
return !hasSeparatingAxis(a, b) && !hasSeparatingAxis(b, a);
}

Zoom my drawing on the background [duplicate]

This question already has an answer here:
HTML5 canvas zoom where mouse coordinates
(1 answer)
Closed 8 years ago.
I make program like a paint with HTML5 canvas and javascript. Drawing takes place on the background image. How to zoom my drawing on the background together.
Before zoom it:
After zoom it (need this result):
Note: zoom should be where clicked with the mouse on the background image

I've done this before!
First of all, I set a zoom level attribute on my canvas.
Main.canvas.zoomX = 1;
Main.canvas.zoomY = 1;
I also retain the original size of the canvas for reference.
Main.canvas.originW = Main.canvas.width;
Main.canvas.originH = Main.canvas.height;
I also retain the original left and top of the canvas for reference.
Main.canvas.gLeftStart = 0;
Main.canvas.gTopStart = 0;
I then set a zoom percentage. The zoom level will be adjusted by this amount every time that the zoom event occurs.
Main.canvas.zoomPerc = 0.05;
Next, I set an event listener on my canvas to watch for mousewheel.
Main.canvas.addEventListener('wheel', zoom, true);
Now, I'm going to write a quick function to retrieve the zoom, then I'll explain it.
function zoom(evt)
{
var x;
var y;
Main.canvas.xLayerS = (evt.layerX + (Main.canvas.gLeftStart * -1)) / (Main.canvas.originW * Main.canvas.zoomX);
Main.canvas.yLayerS = (evt.layerY + (Main.canvas.gTopStart * -1)) / (Main.canvas.originH * Main.canvas.zoomY);
Main.canvas.leftPerc = Main.canvas.gLeftStart / (Main.canvas.originW * Main.canvas.zoomX);
Main.canvas.topPerc = Main.canvas.gTopStart / (Main.canvas.originH * Main.canvas.zoomY);
if(evt.deltaY > 1)
{
Main.canvas.zoomX *= 1 + Main.canvas.zoomPerc;
Main.canvas.zoomY *= 1 + Main.canvas.zoomPerc;
}
else
{
Main.canvas.zoomX *= 1 - Main.canvas.zoomPerc;
Main.canvas.zoomY *= 1 - Main.canvas.zoomPerc;
}
var iiDS;
var cmd;
Main.canvas.xLayer = Main.canvas.xLayerS * (Main.canvas.originW * Main.canvas.zoomX);
Main.canvas.yLayer = Main.canvas.yLayerS * (Main.canvas.originH * Main.canvas.zoomY);
Main.context.clearRect(0, 0, Main.canvas.width, Main.canvas.height);
Main.context.beginPath();
Main.canvas.gLeftStart = (evt.layerX - Main.canvas.xLayer);
Main.canvas.gTopStart = (evt.layerY - Main.canvas.yLayer);
for(iiDS = 0; iiDS < Main.dataPoints.length; iiDS++)
{
if(iiDS === 0)
{
cmd = 'moveTo';
}
else
{
cmd = 'lineTo';
}
Main.dataPoints[iiDS].xPerc = Main.dataPoints[iiDS].x / Main.range.x;
Main.dataPoints[iiDS].yPerc = Main.dataPoints[iiDS].y / Main.range.y;
x = Main.canvas.gLeftStart + (Main.dataPoints[iiDS].xPerc * (Main.canvas.originW * Main.canvas.zoomX));
y = Main.canvas.gTopStart + (Main.dataPoints[iiDS].yPerc * (Main.canvas.originH * Main.canvas.zoomY));
Main.context[cmd](x, y);
}
Main.context.stroke();
}
Now that your canvas has been re-sized, you will need to redraw whatever was in it. Remember, any time that you re-size a canvas, you clear the canvas. If your canvas was holding an image, then that's simple, redraw that image at that size. If you canvas was holding data points (like a chart) then I would suggest that you make your data points have percentage like (probably a word for that) positions along your chart, not pixel positions.
More importantly though, I do not suggest that you ever re-size and re-position your canvas on zoom. Your page can get jumbled up and sloppy that way. Instead, use the percentages for size (like I showed you) and use the values for left and top positioning as starting points in your drawing. If a data point was a certain percentage of a way across a chart, it can be drawn at any size. Plus, you can draw outside of your canvas, it just won't be visible. Your canvas would then be more like a view-port.
You can do some really impressive charting this way, which a lot of companies pay a lot of money for. Have fun!

Did you try Context2d.scale(x, y)? You could do the following
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.scale(2, 2);
paintBackGround(context);
paintForeGround(context);
scale(factorWidth, factorHeight) Scales all coordinates in the canvas by the factors, so it will scale the background and the drawing. The example would double the size. You don't have to scale your coordinates by yourself, just let canvas do that for you.
Here is an example :
http://www.html5canvastutorials.com/advanced/html5-canvas-transform-scale-tutorial/
The only problem here: you need to scale before you draw, so you need a model that contains the original drawing in original unscaled coordinates, that can be drawn after scaling (paintForeGround() in my example)
Scale() is part of so called Transformations. You can Translate (move along a vector) rotate and scale the content of a canvas by using buildin functions of canvas. Just take a look at the html5canvastutorials. This works with matrix-mutliplications in the background, but it is really simple to use.

Javascript Collision Detection between circle and polygon?

I'm unsure how to go about defining the area for a collision detection function when I have a polygon that looks like:
______
/ _____|
/ /
/ /
---
I draw the polygon using lineTo() a few times before fill/stroke call so I know the x,y co-ords of all the points.
Currently I just check if the ball is beyond certain areas of points:
if(tmpParticle.y <= platformBottom) {
if(tmpParticle.x < leftPipe_middleX || tmpParticle.x > rightPipe_middleX) {
tmpParticle = particleCollision(tmpParticle, platformBottom);
}
}
if(tmpParticle.y <= pipeBottom && tmpParticle.y >= pipeBottom - 30) {
if(tmpParticle.x < leftPipe_bottomRightX && tmpParticle.x > leftPipe_bottomLeftX) {
tmpParticle = particleCollision(tmpParticle, pipeBottom);
} else if (tmpParticle.x < rightPipe_bottomRightX && tmpParticle.x > rightPipe_bottomLeftX) {
tmpParticle = particleCollision(tmpParticle, pipeBottom);
}
}
platformHeight would be the Y value for the 'top horizontal line'
platformBottom would be the Y value for the 'horizontal line just below platformHeight'
rightPipe* is for the example shown. leftPipe* is for the same polygon except in the other direction (to form a pipe, where you must shoot the balls through without colliding).
My particleCollision() function just takes the tmpParticle and inverses the direction based on the Y value (2nd parameter, i.e. pipeBottom). This works fine for now though I may need to improve it later on.
I just need to figure out a better way to define the area for collisions.

You may consider splitting your pipe into triangles and then finding triangle - circle intersection area. If they do intersect the intersection will always be a convex polygon (area is easy to calculate by splitting into triangles again) and a segment (area is easy to calculate too - http://en.wikipedia.org/wiki/Circular_segment). The other case is the triangle itself, in case it lies inside the circle completely (a simple case again).

Get curved result set rather than angular in JavaScript (maths help needed)

I've got a script that creates a gradient by shading cells based on their distance from a set of coordinates. What I want to do is make the gradient circular rather than the diamond shape that it currently is. You can see an en example here: http://jsbin.com/uwivev/9/edit
var row = 5, col = 5, total_rows = 20, total_cols = 20;
$('table td').each(function(index, item) {
// Current row and column
var current_row = $(item).parent().index(),
current_col = $(item).index();
// Percentage based on location, always using positive numbers
var percentage_row = Math.abs(current_row-row)/total_rows;
var percentage_col = Math.abs(current_col-col)/total_cols;
// I'm thinking this is what I need to change to achieve the curve I'm after
var percentage = (percentage_col+percentage_row)/2;
$(this).find('div').fadeTo(0,percentage*3);
});
If you can give me hand with the right maths function to get the curve I'm after that would be great! Thanks!
Darren

// Current row and column
var current_row = $(item).parent().index(),
current_col = $(item).index();
// distance away from the bright pixel
var dist = Math.sqrt(Math.pow(current_row - row, 2) + Math.pow(current_col - col, 2))
// do something with dist, you might change this
var percentage = dist / total_cols;
$(this).find('div').fadeTo(0,percentage*3);

You can use the square of the distance formula:
((current_row - row)*(current_row - row) + (current_col - col)*(current_col - col))
then multiply it by whatever scale factor you need.

Here is a circle drawing procudure I wrote many moons ago in Pascal which you can use as pseudo code to understand how to color pixels at the radius from an (X,Y) and work your way in. Multiple shrinking circles should cover the entire area you need. The code also gives you the formula for accessing the radius.
PROCEDURE DrawCircle(X,Y,Radius:Integer);
VAR A,B,Z:LongInt;
BEGIN
Z:=Round(Sqrt(Sqr(LongInt(Radius))/2));
FOR A:=Z TO Radius DO
FOR B:=0 TO Z DO
IF Radius=Round(Sqrt(A*A+B*B)) THEN
BEGIN
PutPixel(X+A,Y+B,8);
PutPixel(X+A,Y-B,9);
PutPixel(X-A,Y+B,10);
PutPixel(X-A,Y-B,11);
PutPixel(X+B,Y+A,12);
PutPixel(X+B,Y-A,13);
PutPixel(X-B,Y+A,14);
PutPixel(X-B,Y-A,15);
END;
END;
NB: "Longint()" is a compiler typecast for larger numeric computations so don't let that worry you.
NB: Inner-most brackets are executed first.