is there a sin^-1 in coding?

The inverse sine function is referred to as asin.

okay so what if I want to change the mouseX and mouseY coordinates to polar coordinates? It would be something like ``` mouseR = _______, mouseTheta = ______ ```

You can use trigonometry to convert polar coordinates into rectangular coordinates. You can use the Pythagorean theorem and the inverse tangent function to convert polar into rectangular coordinates. ``` var toRectCoords = function(r, theta) { return { x: r * cos(theta), y: r * sin(theta), }; }; var toPolarCoords = function(x, y) { return { r: sqrt(x*x + y*y), theta: atan2(y, x), }; }; ``` Then you can use these in `mouseMoved` and `mouseDragged` to change your variables `mouseR` and `mouseTheta`.

Here's my code for the challenge: var r = 0; var theta = 0; draw = function() { background(255, 255, 255); pushMatrix(); translate(width/2, height/2); var x = r * cos(theta); var y = r * sin(theta); fill(0, 0, 0); line(0, 0, x, y); ellipse(x, y, 10, 10); popMatrix(); theta += 1; r += 0.01; }; It's saying that it doesn't want to erase what's on the previous frame. How do you do that?

1. Remove `background(255, 255, 255)` 2. Remove `line(0, 0, x, y)` 3. Make the `0.01` on line 18 bigger

what exactly does rectMode and EllipseMode do? aparrently wether it exists or not in the above programm makes no difference

Using the rectMode() function, you can change where you draw it at. Meaning, if the center of the rectangle is drawn at the coordinates, the corner, bottom- you can adjust it! The ellipseMode() function does the same thing.

Say you're trying to make a program where something rotates about a fixed point to always point at the mouse. How would you adapt the x, y, r, and theta variables in this program to work around the mouse?

The solution is pretty well explained in a previous tutorial: https://www.khanacademy.org/computing/computer-programming/programming-natural-simulations/programming-vectors/a/interactive-vector-motion

This is off topic, but what does ! do?

! is the logical NOT operator. Remember that `===` means 'exactly equal to'? Put the NOT operator in front to reverse the meaning: `!==` means 'is NOT equal to'.

Why doesn't ```while (keyIsPressed && keyCode === "z"){ this.x++; }``` work in the challenge

Key codes are numbers, not strings. `keyCode` values are only reliable in the key handling functions, and not in `draw`. Try ```while (keyIsPressed && key.toString() === "z"){``` to make your infinite loop.

Main content

Polar coordinates

Google Classroom

Any time we display a shape in ProcessingJS, we have to specify a pixel location, a set of x and y coordinates. These coordinates are known as Cartesian coordinates, named for René Descartes, the French mathematician who developed the ideas behind Cartesian space.

Another useful coordinate system known as polar coordinates describes a point in space as an angle of rotation around the origin and a radius from the origin. Thinking about this in terms of a vector:

Cartesian coordinate—the x,y components of a vector
Polar coordinate—the magnitude (length) and direction (angle) of a vector

However, the drawing functions in ProcessingJS don’t understand polar coordinates. Whenever we want to display something in ProcessingJS, we have to specify locations as (x,y) Cartesian coordinates. However, sometimes it is a great deal more convenient for us to think in polar coordinates when designing. Happily for us, with trigonometry we can convert back and forth between polar and Cartesian, which allows us to design with whatever coordinate system we have in mind but always draw with Cartesian coordinates.

The Greek letter θ (theta) is often used to denote an angle, and a polar coordinate is conventionally referred to as (r, θ) instead of (x, y). Thus, when dealing with polar coordinates, we'll now use "theta" as the preferred variable name for the angle.

sine(theta) = y/r → y = r * sine(theta)
cosine(theta) = x/r → x = r * cosine(theta)

For example, if r is 75 and theta is 45 degrees (or PI/4 radians), we can calculate x and y as below. The functions for sine and cosine in ProcessingJS are sin() and cos(), respectively. They each take one argument, an angle measured in degrees.

var r = 75;
var theta = 45;

// Convert polar to cartesian
var x = r * cos(theta);
var y = r * sin(theta);

This type of conversion can be useful in certain applications. For example, to move a shape along a circular path using Cartesian coordinates is not so easy. With polar coordinates, on the other hand, it’s simple: increment the angle!

Here's how we can make a simple rotating shape using polar coordinate conversion:

This "Natural Simulations" course is a derivative of "The Nature of Code" by Daniel Shiffman, used under a Creative Commons Attribution-NonCommercial 3.0 Unported License.

Want to join the conversation?

Sort by:

Fearless Shadow
Posted 5 years ago. Direct link to Fearless Shadow's post “is there a sin^-1 in codi...”
is there a sin^-1 in coding?
Button navigates to signup pageComment on Fearless Shadow's post “is there a sin^-1 in codi...”
(10 votes)
Answer
- Seth
  Posted 5 years ago. Direct link to Seth's post “The inverse sine function...”
  The inverse sine function is referred to as asin.
  Comment on Seth's post “The inverse sine function...”
  (5 votes)
⊷נαςк ρ⊶
Posted 8 years ago. Direct link to ⊷נαςк ρ⊶'s post “okay so what if I want to...”
okay so what if I want to change the mouseX and mouseY coordinates to polar coordinates? It would be something like
mouseR = _____, mouseTheta = ____
Button navigates to signup pageButton navigates to signup page
(5 votes)
Answer
- Dalendrion
  Posted 8 years ago. Direct link to Dalendrion's post “You can use trigonometry ...”
  You can use trigonometry to convert polar coordinates into rectangular coordinates.
  You can use the Pythagorean theorem and the inverse tangent function to convert polar into rectangular coordinates.
  
  var toRectCoords = function(r, theta) { return { x: r * cos(theta), y: r * sin(theta), }; }; var toPolarCoords = function(x, y) { return { r: sqrt(x*x + y*y), theta: atan2(y, x), }; };
  
  Then you can use these in mouseMoved and mouseDragged to change your variables mouseR and mouseTheta.
  Comment on Dalendrion's post “You can use trigonometry ...”
  (8 votes)
Peter Apostolidis
Posted 9 years ago. Direct link to Peter Apostolidis's post “what exactly does rectMod...”
what exactly does rectMode and EllipseMode do?
aparrently wether it exists or not in the above programm makes no difference
Button navigates to signup pageButton navigates to signup page
(2 votes)
Answer
- ikrobin
  Posted 8 years ago. Direct link to ikrobin's post “Using the rectMode() func...”
  Using the rectMode() function, you can change where you draw it at. Meaning, if the center of the rectangle is drawn at the coordinates, the corner, bottom- you can adjust it! The ellipseMode() function does the same thing.
  Button navigates to signup page
  (4 votes)
dean bristow
Posted 6 years ago. Direct link to dean bristow's post “Say you're trying to make...”
Say you're trying to make a program where something rotates about a fixed point to always point at the mouse. How would you adapt the x, y, r, and theta variables in this program to work around the mouse?
Button navigates to signup pageButton navigates to signup page
(2 votes)
Answer
- Bob Lyon
  Posted 6 years ago. Direct link to Bob Lyon's post “The solution is pretty we...”
  The solution is pretty well explained in a previous tutorial: https://www.khanacademy.org/computing/computer-programming/programming-natural-simulations/programming-vectors/a/interactive-vector-motion
  Button navigates to signup page
  (4 votes)
subramanian.sachin3
Posted 5 years ago. Direct link to subramanian.sachin3's post “Here's my code for the ch...”
Here's my code for the challenge:
var r = 0;
var theta = 0;

draw = function() {

background(255, 255, 255);
pushMatrix();
translate(width/2, height/2);

var x = r * cos(theta);
var y = r * sin(theta);

fill(0, 0, 0);
line(0, 0, x, y);
ellipse(x, y, 10, 10);
popMatrix();
theta += 1;
r += 0.01;
};
It's saying that it doesn't want to erase what's on the previous frame. How do you do that?
Button navigates to signup pageButton navigates to signup page
(3 votes)
Answer
- budster the dingo
  Posted 5 years ago. Direct link to budster the dingo's post “1. Remove `background(255...”
  1. Remove background(255, 255, 255)
  2. Remove line(0, 0, x, y)
  3. Make the 0.01 on line 18 bigger
  Button navigates to signup page
  (2 votes)
Hurtin
Posted 2 years ago. Direct link to Hurtin's post “This is off topic, but wh...”
This is off topic, but what does ! do?
Button navigates to signup pageButton navigates to signup page
(1 vote)
Answer
- Cavan P
  Posted 2 years ago. Direct link to Cavan P's post “! is the logical NOT oper...”
  ! is the logical NOT operator. Remember that === means 'exactly equal to'? Put the NOT operator in front to reverse the meaning: !== means 'is NOT equal to'.
  Comment on Cavan P's post “! is the logical NOT oper...”
  (5 votes)
pokemon
Posted 3 years ago. Direct link to pokemon's post “can someone help me with ...”
can someone help me with the next challenge?
Button navigates to signup pageComment on pokemon's post “can someone help me with ...”
(2 votes)
Answer
janandbillysc
Posted 5 years ago. Direct link to janandbillysc's post “This article begins with ...”
This article begins with a discussion of Cartesian coordinates (components of a vector, x and y) and polar coordinates (length,r, and vector,theta). Another way of specifying a point, I'll call is "tangental" coordinates for want of a better name. For example, a tangent line drawn to a circle of "origin" at 270 degrees intersects a tangent line drawn at 30 degrees, forming an angle of 60 degrees. This point might be named (270,30). Together with another point (300,60) and a third (300,30), these three points are the vertices of a 45, 45, 90 degree right triangle.

Is this of interest to anyone, or should I peddle my thoughts elsewhere?
Button navigates to signup pageComment on janandbillysc's post “This article begins with ...”
(3 votes)
Answer
k.jennymh
Posted 4 years ago. Direct link to k.jennymh's post “I've been stuck on the As...”
I've been stuck on the Asteroids spaceship project for some time. Mover doesn't propel when 'z' is pressed. Can anybody identify what I did wrong?

var mover;

var Mover = function() {
this.position = new PVector(width/2, height/2);
this.velocity = new PVector(0, 0);
this.acceleration = new PVector(0, 0);
this.r = 20;
this.heading = 0;
this.rotation = 0;
this.isThrusting = false;
};

Mover.prototype.isThrusting = function(b) {
this.isThrusting = b;
};

Mover.prototype.update = function() {
if (this.isThrusting) {
this.thrust();
}

this.position.add(this.velocity);
this.velocity.mult(0.99);
};

Mover.prototype.thrust = function() {
var force = PVector.fromAngle(this.heading);
force.mult(0.1);
this.velocity.add(force);
};

Mover.prototype.render = function() {
pushMatrix();
translate(this.position.x, this.position.y);
rotate(this.heading + PI/2);
noFill();
stroke(255);
triangle(-this.r, this.r, this.r, this.r, 0, -this.r);
popMatrix();
};

Mover.prototype.checkEdges = function() {
if (this.position.x > width + this.r) {
this.position.x = -this.r;
} else if (this.position.x < -this.r) {
this.position.x = width + this.r;
}
if (this.position.y > height + this.r) {
this.position.y = -this.r;
} else if (this.position.y < -this.r) {
this.position.y = height + this.r;
}
};

Mover.prototype.setRotation = function(angle) {
this.rotation = angle;
};

Mover.prototype.turn = function() {
this.heading += this.rotation;
};

var keyPressed = function() {
if(keyCode === RIGHT) {
mover.setRotation(0.1);
} else if (keyCode === LEFT) {
mover.setRotation(-0.1);
} else if (keyCode === 90) {
mover.thrust(true);
}
};

var keyReleased = function() {
if(keyCode === LEFT || keyCode === RIGHT) {
mover.setRotation(0);
} else if (keyCode === 90) {
mover.thrust(false);
}
};

var mover = new Mover();

var draw = function() {
background(0);
mover.render();
mover.turn();
mover.update();
mover.checkEdges();
};
Button navigates to signup pageComment on k.jennymh's post “I've been stuck on the As...”
(2 votes)
Answer
Noah Mcleod
Posted 4 years ago. Direct link to Noah Mcleod's post “Why doesn't ```while (key...”
Why doesn't
while (keyIsPressed && keyCode === "z"){ this.x++; }
work in the challenge
Button navigates to signup pageButton navigates to signup page
(1 vote)
Answer
- Bob Lyon
  Posted 4 years ago. Direct link to Bob Lyon's post “Key codes are numbers, no...”
  Key codes are numbers, not strings. keyCode values are only reliable in the key handling functions, and not in draw. Try
  while (keyIsPressed && key.toString() === "z"){
  to make your infinite loop.
  Button navigates to signup page
  (2 votes)

Computer programming

Course: Computer programming > Unit 5

Polar coordinates

Want to join the conversation?