I'm having some math problems with drawing points on a canvas that are spaced out around a circle.
I have the radius, the spacing of each point and even the angles around the circle but the issue is I want it to start at a specified angle and end at a specified angle.
Code
function getPoints(x,y,radius,ticks)
{
var spacing = Math.PI*2/ticks;
var points = [];
for(var i=0; i<ticks;i++)
{
var angle = (spacing * i)+((ticks*Math.PI)/ticks);
var x1 = x+radius*Math.cos(angle);
var y1 = y+radius*Math.sin(angle);
points.push({'x':x1,'y':y1});
}
return points;
}
I'm having difficulty figuring out the needed math.
here is also a jsFiddle of the project: http://jsfiddle.net/Keleko34/EMeG2/
to help get the idea, the degrees I want to start at are -45 and end at 225.
the current degrees it starts at is 0 and it does the entire 360. as seen above code and example :/
Your spacing value is based on 360 degrees (or Math.PI*2 radians).
Your starting value (see the angle calculation) is Math.PI (or 180 degrees).
Your span is therefore 180 degrees to 540 degrees (Math.PI to 3*Math.PI radians).
You likely need to change your angle calculation (which should probably be renamed to radians) to have a different starting angle.
You also need to modify your spacing calculation to be based on the number of degrees/radians of your desired arc.
Related
Could you help me please find coordinates of point on a plane?
I try to find coordinates of the point.
If working with JavaScript, you would employ Math.sin() and Math.cos()
If you imagine a unit circle (a circle with radius 1),
and a straight line A starting from the circle's center going towards the
edge,
and you know the line A's angle (in radians). Or the angle in degrees to a reference line which points straight right (on your drawing, the reference line would be +90 degrees to the one which shows radius), in which case if line A is in the top half of the circle the angle would be positive, while if in the bottom half of the circle (like your drawing) the angle would be negative.
Of course, if you only have the angle in degrees, you would have to convert it to radians before passing it to sine and cosine functions. It is a simple operation, you can find many examples online:
function degrees_to_radians(degrees)
{
var pi = Math.PI;
return degrees * (pi/180);
}
Then Math.sin(angleInRadians) would tell you the Y location of the spot where line intersects the circle, while Math.cos(angleInRadians) would tell you the X location. Both X and Y would be relative to the circle center.
And, since the result is for the unit circle, you would also have to multiply both X and Y with actual radius (250). And then add circle's center location (543,250) to get the actual world coordinates of the point.
X = (X * 250) + 543 and Y = (Y * 250) + 250
Hope that helped, you can use Google image search to get some sine and cosine drawings if you're not getting clear picture.
Formula:
x = R * cos(a1) = R * sqrt(1 - ((y + ∆y) / R)^2)
Solution:
let delta = 466.5 - 440.5;
let x = 250 * Math.sqrt(1 - Math.pow(466.5 + delta) / 250, 2));
I'd like it to keep rotating all around the object. But I can't set minPolarAngle/maxPolarAngle(When I set it to (+-)Infinity rotation is not working).
Can the min and max PolarAngles in OrbitControls be (+-)Infinity?
// How far you can orbit vertically, upper and lower limits.
// Range is 0 to Math.PI radians.
this.minPolarAngle = 0; // radians
this.maxPolarAngle = Math.PI; // radians
// How far you can orbit horizontally, upper and lower limits.
// If set, must be a sub-interval of the interval [ - Math.PI, Math.PI ].
this.minAzimuthAngle = -Infinity; // radians
this.maxAzimuthAngle = Infinity; // radians
This is not how orbit controls work. By design it's going to use polar angles and an up vector i believe, thus always keeping the camera sort of aligned with the world / horizon. You should look into trackball controls which are designed to just keep rotating.
I have a small little game I'm making in javascript and Raphael.js(which i'm fairly new to) and I'm making a turret essentially, just a circle that has a rectangle swivel around it. And that works fine and dandy!
Code for transform is :
this.self = this.self.animate({ transform : this.transform }, 250);
However, I need to find the coords of the rectangle after I animate it, but getBBox() keeps getting the same coords. Does anyone have any suggestions? A visual picture of the transform would be:
So I need the turret coords after the transformation. I need to find the front of the turret so I know where the bullet needs to come out of! Any advice will be appreciated!
By using the rotation number, will help you to find the coordinates. Lets say the rotation angel is q = 45 degrees.
This means that y changes by asin(q) and x changes by a - acos(q).
EDIT
Pay attention to all cases. In this particular case, both coordinates got decreased, but if you turn to southeast, then y increases and x decreases. Or if northwest: y and x decrease.
Transform is just a visual effect, it's not affects on coordinates.
You know width of turret and you know rotation angle.
Use sin & cos to calculate new coords.
X = Math.cos((i * Math.PI) / 180) * R + x;
Y = Math.sin((i * Math.PI) / 180) * R + y;
i - angle
R - width of turret
x and y - turret offset
I am currently working on a game using javascript and processing.js and I am having trouble trying to figure out how to move stuff diagonally. In this game, there is an object in the center that shoots other objects around it. Now I have no problem moving the bullet only vertically or only horizontally, however I am having difficulty implementing a diagonal motion for the bullet algorithm.
In terms of attempts, I tried putting on my math thinking cap and used the y=mx+b formula for motion along a straight line, but this is what my code ends up looking like:
ellipse(shuriken.xPos, shuriken.yPos, shuriken.width, shuriken.height); //this is what I want to move diagonally
if(abs(shuriken.slope) > 0.65) {
if(shuriken.targetY < shuriken.OrigYPos) {
shuriken.yPos -= 4;
} else {
shuriken.yPos += 4;
}
shuriken.xPos = (shuriken.yPos - shuriken.intercept)/shuriken.slope;
} else {
if(shuriken.targetX < shuriken.OrigXPos) {
shuriken.xPos -= 4;
} else {
shuriken.xPos += 4;
}
shuriken.yPos = shuriken.slope * shuriken.xPos + shuriken.intercept;
}
The above code is very bad and hacky as the speed varies with the slope of the line.
I tried implementing a trigonometry relationship but still in vain.
Any help/advice will be greatly appreciated!
Think of it this way: you want the shuriken to move s pixels. If the motion is horizontal, it should move s pixels horizontally; if vertical, s pixels vertically. However, if it's anything else, it will be a combination of pixels horizontally/vertically. What's the correct combination? Well, what shape do you get if you project s distance in any direction from a given point? That's right, a circle with radius s. Let's represent the direction in terms of an angle, a. So we have this picture:
How do we get the x and the y? If you notice, we have a triangle. If you recall your trigonometry, this is precisely what the sine, cosine, and tangent functions are for. I learned their definitions via the mnemonic SOHCAHTOA. That is: Sin (a) = Opposite/Hypotenuse, Cos(a) = Adjacent/Hypotenuse, Tan(a) = Opposite/Adjacent. In this case, opposite of angle a is y, and adjacent of angle a is x. Thus we have:
cos(a) = x / s
sin(a) = y / s
Solving for x and y:
x = s * cos(a)
y = s * sin(a)
So, given the angle a, and that you want to move your shuriken s pixels, you want to move it s * cos(a) horizontally and s * sin(a) vertically.
Just be sure you pass a in radians, not degrees, to javascript's Math.sin and Math.cos functions:
radians = degrees * pi / 180.0
This may be why your trigonometric solution didn't work as this has bitten me a bunch in the past.
If you know the angle and speed you are trying to move at, you can treat it as a polar coordinate, then convert to cartesian coordinates to get an x,y vector you would need to move the object by to go in that direction and speed.
If you don't know the angle, you could also come up with the vector by taking the difference in X and difference in Y (this I know you can do as you are able to calculate the slope between the 2 points). Then take the resulting vector and divide by the length of the vector to get a unit vector, which you can then scale to your speed to get a final vector in which you can move your object by.
(This is what probably what kennypu means by sticking with vectors?)
So I'm working on a particle emitter with javascript and canvas.
And I want to be able to set what direction the particles are emitting based on an angle.
This can be done with this function:
y = Math.tan(45 * Math.PI/180);
Which returns 1 if the angle is 45. etc.
But I don't exacly know how I should implement this since pixels are calculated a little different. Think -1 as removing one pixel each step and 1 as adding one pixel.
If the angle is 45, Y is 1 and X is 1 which is correct.
But to get a pixel traveling at 315 degrees Y is -1 and X should be 1.
And at 225 degrees Y should be -1 (but is 1) and X should be -1.
How should the function look like if it should work like this?
Here is an image of how im thinking:
(The emitter is in the origin.)
Actually it's simple,
angle = (angle * Math.PI/180) % 360;
tangent = Math.tan(angle);
Since you do not know where is x;
section_x_positive = (angle<90||angle>270?1:-1);
section_y_positive = (angle>0&&angle<180?1:-1);
x = abs(tangent) * section_x_positive;
y = abs(tangent) * section_y_positive;
It sounds to me like your problem is that you're thinking about direction, which is a vector quantity, as if it were a scalar.
You need to remember that a 2D vector is represented as two components:
You can work in terms of unit vectors, so the magnitude r = 1.
So if you have a direction angle, which should be measured in radians, increasing in the counterclockwise direction, and starting at the x = 0 horizontal axis, you'll end up with two components of the unit vector that points in the direction you want.