I feel like this has probably been asked/answered here, and if so, I apologize for the bandwidth, but I don't see any explanation.
The problem is as follows:
I have 3 points .1 point (target) moves around 2 points (pointer). 3 point (ship) goes to 1 (target). I need to, at the angle α <90 degrees (Math.PI/2) 2 point (pointer) changed in the opposite direction.
Thanks!
function MovePointer(ship:Object, targ:Object, point:Object, R:Number, DAngle:Number):Number
{
var angle = Math.atan2(point.y - targ.y, point.x - targ.x);
if ( Math.abs( Math.PI-( angle - (Math.PI+Math.atan2(ship.y - targ.y, ship.x - targ.x)) ) ) < Math.PI/2 )
{
DAngle=-DAngle;
}
angle += DAngle;
point.x = targ.x + R * Math.cos(angle);
point.y = targ.y + R * Math.sin(angle);
return DAngle;
}
To calculate the angle and rotation should leave your
const product : Number = (point.y - targ.y) * (ship.y - targ.y) + (point.x - targ.x) * (ship.x - targ.x);
if (product > 0) {
DAngle = -DAngle;
}
Related
I am sure I have missed something obvious, but I am trying to draw a quadratic curve between two points using an html canvas, for which I need a 'control point' to set the curve. The start and end point of the curve are known, the control point is unknown because the lines are dynamically rotated. I just need to find this third point of the triangle in order to set the control point
I use this function to find the mid point of the line:
lineMidPoint(p: Point, q: Point): Point {
let x = (p.x + q.x) / 2;
let y = (p.y + q.y) / 2;
return { x: x, y: y } as Point;
}
This function works as expected.
Then a second function to get the angle of the line relative to the origin:
getAngleRelativeToOrigin(start: Point, end: Point): number {
let dx = start.x - end.x;
let dy = start.y - end.y;
let radians = Math.atan2(dy, dx);
return radians * (180/Math.PI);
}
It is hard to verify that this function is working.
Then finally I have a function for rotating the midpoint around either the start or the end of the line in order to find the control point:
getControlPoint(start: Point, end: Point): Point {
let midPoint = this.lineMidPoint(start, end);
let offset = 45 * (Math.PI / 180);
let theta = this.getAngleRelativeToOrigin(start, end) + offset;
let x = Math.cos(theta) * (start.x - midPoint.x) - Math.sin(theta) * (start.y - midPoint.y) + midPoint.x;
let y = Math.sin(theta) * (start.x - midPoint.x) - Math.cos(theta) * (start.y - midPoint.y) + midPoint.y;
return { x: x, y: y } as Point;
}
The result is this:
Those lines that are not connected to circles (for instance on the far right) should all be the length of the line they start from / 2, but they are clearly inconsistent.
When I draw the quadratic curves they are all wonky:
Can anyone lend a hand and tell me where Ive gone wrong?
OK, your middle point is correct.
Now determine difference vector and perpendicular to the line
let dx = start.x - end.x;
let dy = start.y - end.y;
let leng = Math.hypot(dx, dy);
let px = - dy / leng; //and get perpendicular unit vector
let py = dx / leng;
I am not sure what logic you wanted to implement, so I propose to get control point at distance d from line middle (so curve is symmetrical)
let xxx = midPoint.x + d * px;
let yyy = midPoint.y + d * py;
If you want to rotate middle point about start point, it might be done using the next approach:
let cost = Math.cos(45 * (Math.PI / 180));
let sint = Math.sin(45 * (Math.PI / 180));
let x = start.x + 0.5 * dx * cost - 0.5 * dy * sint;
let y = start.y + 0.5 * dx * sint + 0.5 * dy * cost;
I am writing a code where there are different rings on the stage, and a ball is rotating in one of these orbits. On click, the ball leaves its ring and travels normal to the ring. On its way if it hits another ring, it starts rotating in that ring from the point it hits the ring. I could successfully code the initial part of the code. but I am getting a problem when the ball hits another ring, it does not start from the location it hit. Instead it starts rotating in the ring from a different position. I hope I am clear with my doubt. It is somewhat similar to this game https://play.google.com/store/apps/details?id=com.drgames.orbit.jumper
here is my code in enter frame :
if(!isTravelling){
rad = Math.abs(angle * (Math.PI / 180)); // Converting Degrees To Radians
_ball.x = currOrbit.x + (currOrbit.width / 2) * Math.cos(rad); // Position The Orbiter Along x-axis
_ball.y = currOrbit.y + (currOrbit.width / 2) * Math.sin(rad); // Position The Orbiter Along y-axis
trace(_ball.x+" , "+_ball.y);
angle -= speed; // Object will orbit clockwise
_ball.rotation = (Math.atan2(_ball.y - currOrbit.y, _ball.x - currOrbit.x) * 180 / Math.PI) + 90;
}
for(var i = 0; i < orbits.length; i++){
if(orbits[i] != currOrbit){
if(ObjectsHit(orbits[i], _ball)){
currOrbit = orbits[i];
_ball.rotation = (Math.atan2(_ball.y - currOrbit.y, _ball.x - currOrbit.x) * 180 / Math.PI) + 90;
isTravelling = false;
stage.addEventListener(MouseEvent.CLICK, onClick);
}
}
}
if(isTravelling){
_ball.x += Math.cos(rad) * speed * 2;
_ball.y += Math.sin(rad) * speed * 2;
}
You seem to have forgotten to calculate the starting angle for the new orbit:
if(!isTravelling){
rad = Math.abs(angle * (Math.PI / 180)); // Converting Degrees To Radians
_ball.x = currOrbit.x + (currOrbit.width / 2) * Math.cos(rad); // Position The Orbiter Along x-axis
_ball.y = currOrbit.y + (currOrbit.width / 2) * Math.sin(rad); // Position The Orbiter Along y-axis
trace(_ball.x+" , "+_ball.y);
_ball.rotation = angle // no need for calculating the angle again
angle -= speed; // Object will orbit clockwise
}
for(var i = 0; i < orbits.length; i++){
if(orbits[i] != currOrbit){
if(ObjectsHit(orbits[i], _ball)){
currOrbit = orbits[i];
angle = (Math.atan2(_ball.y - currOrbit.y, _ball.x - currOrbit.x) * 180 / Math.PI) + 90; // Calculate the starting angle on the new orbit
_ball.rotation = angle // Set the balls rotation to the angle
isTravelling = false;
stage.addEventListener(MouseEvent.CLICK, onClick);
}
}
}
if(isTravelling){
_ball.x += Math.cos(rad) * speed * 2;
_ball.y += Math.sin(rad) * speed * 2;
}
This should fix it. Please note that you might have to add or subtract 90 degrees to your balls rotation (_ball.rotation = angle + 90) because im not 100% sure about that.
Okay, so I made some ai where a guard is following my character.
I am using this code:
private function getDegrees(radians:Number):Number
{
//return Math.floor(radians/(Math.PI/180));
return radians / 0.01745 | 0;
}
private function getRadians(delta_x:Number, delta_y:Number):Number
{
var r:Number = Math.atan2(delta_y, delta_x);
if (delta_y < 0)
{
//r += (2 * Math.PI);
r += 6.283;
}
return r;
}
And then in the loop
if(isShooting)
{
// calculate rotation based on mouse X & Y
_dx = this.x - _root.assassin.x;
_dy = this.y - _root.assassin.y;
// which way to rotate
_rotateTo = getDegrees(getRadians(_dx, _dy));
// keep rotation positive, between 0 and 360 degrees
if (_rotateTo > this.rotation + 180) _rotateTo -= 360;
if (_rotateTo < this.rotation - 180) _rotateTo += 360;
// ease rotation
_trueRotation = (_rotateTo - this.rotation) / _rotateSpeedMax;
// update rotation
this.rotation += _trueRotation;
gotoAndStop(5);
isWalking = false;
isStanding = false;
}
The thing is, the guard rotates weirdly, it's as if he isn't looking at the player. It's as if the player is somewhere else. Dunno, it just doesn't work.. I have no idea what is wrong with the code!
You should just compute the relative angle
_rotateTo = getDegrees(getRadians(_dx, _dy));
_trueRotation = (_rotateTo - this.rotation) / _rotateSpeedMax;
then normalize this to be as close to zero as possible
_trueRotation = (_trueRotation+900) %360 - 180;
and then cut this to the maximal rotation per step
_trueRotation = max(_trueRotation,_rotateSpeedMax* _timestep);
_trueRotation = min(_trueRotation,-_rotateSpeedMax*_timestep);
and use this then to update the forward direction
this.rotation += _trueRotation;
Speed usually is change per time, so there should be a multiplication with some time step for semantic consistency. Of course, you may have the time step equal to 1, or rotateSpeedMax is really a rotateMaxAngle (per step), then the multiplication with timestep can be removed.
To keep the rotation positive you should use modulus 360 like below for readability and (code) simplicity until and unless it's a clear performance issue: (I think this is right for AC3, just looked it up online quick)
_rotateTo = _rotateTo % 360;
The other possible issue is with how you define _dx and _dy. I'm guessing that the assassin is facing in the opposite direction as intended. The fix is to useI'm thinking it should either be:
_dx = _root.assassin.x - this.x;
_dy = _root.assassin.y - this.y;
I'm using WebGL globe from http://workshop.chromeexperiments.com/globe/. If any point of the globe is clicked, I need to get the longitude and latitude of that point. These parameters are to be passed to the Google Maps for 2D map.
How can I get the long. and lat. from the webgl globe?
Through this function I'm getting the double clicked point, and through this point I'm finding the long. and lat. But the results are not correct. It seems that the clicked point is not determined properly.
function onDoubleClick(event) {
event.preventDefault();
var vector = new THREE.Vector3(
( event.clientX / window.innerWidth ) * 2 - 1,
-( event.clientY / window.innerHeight ) * 2 + 1,
0.5
);
projector.unprojectVector(vector, camera);
var ray = new THREE.Ray(camera.position, vector.subSelf(camera.position).normalize());
var intersects = ray.intersectObject(globe3d);
if (intersects.length > 0) {
object = intersects[ 0 ];
console.log(object);
r = object.object.boundRadius;
x = object.point.x;
y = object.point.y;
z = object.point.z;
console.log(Math.sqrt(x * x + y * y + z * z));
lat = 90 - (Math.acos(y / r)) * 180 / Math.PI;
lon = ((270 + (Math.atan2(x, z)) * 180 / Math.PI) % 360) - 180;
console.log(lat);
console.log(lon);
}
}
Get the WebGL Globe here https://github.com/dataarts/webgl-globe/archive/master.zip
You can open it directly on Mozilla, if you open it in Chrome it works with earth surface image lack because of Cross-Origin Resource Sharing policy. It needs to be put in a virtual host.
Try to use the function in this way
function onDoubleClick(event) {
event.preventDefault();
var canvas = renderer.domElement;
var vector = new THREE.Vector3( ( (event.offsetX) / canvas.width ) * 2 - 1, - ( (event.offsetY) / canvas.height) * 2 + 1,
0.5 );
projector.unprojectVector( vector, camera );
var ray = new THREE.Ray(camera.position, vector.subSelf(camera.position).normalize());
var intersects = ray.intersectObject(globe3d);
if (intersects.length > 0) {
object = intersects[0];
r = object.object.boundRadius;
x = object.point.x;
y = object.point.y;
z = object.point.z;
lat = 90 - (Math.acos(y / r)) * 180 / Math.PI;
lon = ((270 + (Math.atan2(x, z)) * 180 / Math.PI) % 360) - 180;
lat = Math.round(lat * 100000) / 100000;
lon = Math.round(lon * 100000) / 100000;
window.location.href = 'gmaps?lat='+lat+'&lon='+lon;
}
}
I used the code you share with a little correction and it works great.
The way to let it work correctly is to understand exactly what you pass to the new THREE.Vector3.
This function need three parameters (x, y, z)
z in our/your case is sculpted as 0.5 and it's ok
x and y must be a number among -1 and 1, so, to obtain this values you need to catch the click coordinates on your canvas and then, with this formula, reduce them to a value in this range (-1...0...1);
var vectorX = ((p_coord_X / canvas.width ) * 2 - 1);
var vectorY = -((p_coord_Y / canvas.height ) * 2 - 1);
where p_coord_X and p_coord_Y are the coordinates of the click (referred to the left top corner of your canvas) and canvas is the canvas area where lives your webgl globe.
The problem is how to get the click X and Y coordinates in pixel, because it depends by how your canvas is placed in your HTML enviroment.
For my cases the solution over proposed where not suitable cause i returned always false results; so i build a solution to get extacly the x and y coordinates of my canvas area as i clicked on it (i had for my case too to insert a scrollY page correction).
Now imagine to devide in 4 square your canvas area, a click in the NW quadrant will return for example a -0.8, -05 x and y values, a click in SE i.e. a couple of 0.6, 0.4 values.
The ray.intersectObject() function that follows uses then our click-vector-converted data to understand if our click intersects the globe, if it matches, return correctly the coordinates lat and lon.
i'm a little ashamed to ask this, but i have tried a lot of different things and can't make it work.
i have a game that shots a bullet, i have made the code that calculates the parabola trajectory given a an angle and a velocity, but i'm trying to make the calculus needed to get the angle and velocity needed to reach X point (the user enemy tank) and i'm unable to make it work as i need.
my current code is:
var startingPointX:Number = globalCoord.x;
var startingPointY:Number = globalCoord.y;
var targetX:Number = tankPlayer.x;
var targetY:Number = tankPlayer.y;
//distance between user and enemy tank
var distanceTarget = Math.sqrt(( startingPointX - targetX ) * ( startingPointX - targetX ) + ( startingPointY - targetY ) * ( startingPointY - targetY ));
var fixedVel = (distanceTarget/10)*2;
var fixedG = bullet.g;
// launch angle
var o:Number = -(Math.asin((0.5 * Math.atan(fixedG * distanceTarget / fixedVel * fixedVel))) * 180 / Math.PI);
bullet.init(startingPointX, startingPointY, o, fixedVel);
and the functions in the bullet object that actually position the bullet in the parabola trajectory is:
public function init(x, y:Number, rot:Number, speed:Number) {
// set the start position
var initialMove:Number = 35.0;
this.x = x + initialMove * Math.cos(2 * Math.PI * rot / 360);
this.y = y + initialMove * Math.sin(2 * Math.PI * rot / 360);
this.rotation = rot;
//get speed
dx = speed * Math.cos(2 * Math.PI * rot / 360);
dy = speed * Math.sin(2 * Math.PI * rot / 360);
//animation
lastTime = getTimer();
addEventListener(Event.ENTER_FRAME,moveBullet);
}
public function moveBullet(event:Event)
{
//get the time passed
var timePassed:int = getTimer() - lastTime;
lastTime += timePassed;
//move bullet
dy += g * timePassed / 1000;
this.x += dx * timePassed / 1000;
this.y += dy * timePassed / 1000;
//bullet past the top of the screen
if (this.y < 0)
{
deleteBullet();
}
}
any help would be really useful, thanks ! :D
Regards,
Shadow.
If this is a ballistics problem in the sense that you project a particle from point A with velocity v at an angle theta and you want it to hit a point T where the y coordinates of A and T match (ie they lie on a plane perpendicular to the vector of gravitational force vector) then you can calculate the required angle and velocity from this equation (See your wiki link where this is defined):
R = (v * v * sin(2 * theta))/g
Here R is the distance travelled in the x direction from your start point A . The problem you are facing is you are trying to interpolate a parabola through just 2 points. There are an infinite amount of parabolas that will interpolate 2 points while the parabola through 3 points is unique. Essentially there are an infinite amount of choices for velocity and angle such that you can hit your target.
You will either need to fix the angle, or the velocity of the bullet in order to use the above equation to find the value you require. If not, you have an infinite number of parabolas that can hit your target.
The above assumes that air resistance is ignored.
EDIT : Thus if you know velocity v already you can get theta from simple rearrangement of the above :
( asin(g * R / (v * v)) ) / 2 = theta
Based on the suggestion from #mathematician1975 i resolved the code to this and works perfectly :D
var distanceTarget = startingPointX - targetX ;
var fixedVel = 100;
var fixedG = tmpB.g;
var o:Number = (0.5 * Math.atan((fixedG * distanceTarget / (fixedVel * fixedVel)))) * 180 / Math.PI;
//this is only necessary why the enemy tank is facing left
o -= 180;
what i made is:
set a fixed velocity as #mathematician1975 said, a lot bigger than before
the distance between starting and ending point is lineal and not using Pythagoras.
the -180 is just why the enemy tanks is facing left.
i hope someone would find it useful in the future :D
Regards,
Shadow.