There is a function angleMode(mode); in P5 documentation that sets mode either RADIANS or DEGREES but I can't figure out how to use it or how to draw in polar coordinates in p5.js. Does anybody know how to do it with p5.js?
angleMode() changes wheter p5.js interprets your angle values as radians and degrees. It has no impact on the way drawing is done.
You can just use trigonometric functions to translate between polar and cartesian.
var x = r * cos(angle)
var y = r * sin(angle)
point(x, y);
If you need more information, you can see this example in p5.js documentation: https://p5js.org/examples/math-polartocartesian.html
The coding train also has a video tutorial on this: https://www.youtube.com/watch?v=N633bLi_YCw
RADIANS and DEGREES are the constants like 0 and 1. Therefore:
angleMode(DEGREES);// sets the mode
Related
I have a 360 image (non three.js) system that outputs my Euler angles ( pitch (x), yaw (y) and roll (z) ) on rotation as "YXZ" order. The bounds of for example yaw are from [-180 to 180] (a net total of 360).
I want to use these angles to rotate a 3d object in another system which is built on three.js.
On change of values in my system 1, I set my Euler angles to the target vector of the camera object in the second system,
It rotates to an extent, but I feel i'm doing something wrong in terms of bounds or may be some other issue due to my very limited knowledge of three.js
Any help would enhance my knowledge
Three.js rotations are in radians, and it looks like the [-180, 180] range is in degrees. So you're going to have to convert the rotation values from degrees to radians. You could simply use MathUtils.degToRad() to do the conversion for you:
var pitch = xxx; // Get pitch from your other system somehow
object.rotation.x = THREE.MathUtils.degToRad(pitch);
I want to calculate direction of mousemove in angles. I found formula but i dont know how to note it:
theta = tan^–1(y/x)
Can you help me? I used this page for solution https://www.dummies.com/education/science/physics/how-to-find-a-vectors-magnitude-and-direction/
Do you mean arc tangent? There is a function called atan() for that, which gives you your angle in radians.
vat theta = Math.atan(y/x)
I'm new to Javascript and I'm trying to use inverse tangent to find the angle in degrees between a line and the x axis on an elevated y. I don't see any command for it so I really need some help.
Use Math.atan() function and then Math.toDegrees() multiply it by 180/Math.PI to convert radians to degrees
Found the answer it here
Later edit:
Here is an example of angle calculation between a line defined by 2 points (A and B) and the X axis.
The elevation of the second line (parallel with the X axis) is irrelevant since the angle stays the same.
/*
* Calculates the angle between AB and the X axis
* A and B are points (ax,ay) and (bx,by)
*/
function getAngleDeg(ax,ay,bx,by) {
var angleRad = Math.atan((ay-by)/(ax-bx));
var angleDeg = angleRad * 180 / Math.PI;
return(angleDeg);
}
console.log(getAngleDeg(0,1,0,0));
I found this short and simple:
const calculateAngle = (width, height) => Math.atan(width/height)/(Math.PI / 180) // Angle in degrees
Try using Math.atan (outputs angle in radians) and some trigonometry.
Questions like these are best answered by the reference. I see a bunch of trigonometric functions there, including:
acos()
asin()
atan()
atan2()
cos()
degrees()
radians()
sin()
tan()
Note: As of Dec 5, 2018, the repository has been archived and processingjs.org redirects there.
With the development of p5js and the API advances in Processing itself, as well as Processing.js itself having been in maintenance mode for quite a few years now, this project has been archived as of December 2018.
Processing.js would like to thank everyone who contributed over the years: it's been an amazing project! The code will still be available in read-only mode, no releases will be pulled from any of the places it was distributed through, but the last version is, and will forever be, v1.6.6.
Thank you for your support, and happy coding (with newer solutions)!
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?)