Am i using equation of circle right?

p5.js Coding Questions
1

I want to move an object around a circle therefore, am using equation of circle to every quadrant…
I wrote this:
if(keyDown(“up”) && this.guy.x <= 600 && this.guy.x <= 400){

            //using equation of a circle

> this.guy.y -= 1;
> 
>                 this.guy.x = (450^2 - (this.guy.y - 300)^2)^(1/2) + 400;
> 
>                 //  (this.guy.x - 400)^2 + (this.guy.y - 300)^2 = 450^2;   
> 
>                 this.guy.rotation += 0.323;

But it is going haywire, how to write it correctly???

1 Like
2

wrote this for reference, it is the equation of circle

3

Hi @ARNAV_A_GUPTA,

The equation of a circle can be written as follow:
(x - cx )² + (y - cy)² = r²
where (cx, cy) is the center of your cricle and r is the radius. All the pairs (x, y) that fit the equation will be a point of the circle.

You can indeed get the x value by rearranging the above equation BUT you will have to deal with solving a second degree equation that can have none, 1 or 2 solutions.

You can get that intuition visually:
image

Given a Y value, you can be in the case of the blue line (no solution), the red line (1 solution) or the orange line (2solutions)

Now, instead of working with that equation of a circle, we usually work with its parametric form. Given a center (cx, cy), a radius r and an angle alpha, you can get the (x, y) coordinates of the point with the following equations:

x = cx + r * cos(alpha)
y = cy + r * sin(alpha)
6 Likes
4

Try this code if you want:

let cx, cy, r;

function setup() {
  createCanvas(400, 400);
  angleMode(DEGREES);
  
  cx = 200;
  cy = 200;
  r = 100
  
  angleSlider = createSlider(0, 360, 0);
  angleSlider.position(50, 350);
  angleSlider.size(300, 20);
  
}

function draw() {
  background(20);
  noFill();
  stroke(200);
  strokeWeight(2);
  
  // Draw a circle at position (cx, cy) and radius r
  ellipse(cx, cy, 2*r, 2*r);
  
  // Place a point on the circle based on the angle
  let x = cx + r * cos(angleSlider.value());
  let y = cy + r * sin(angleSlider.value());
  
  fill(230, 10, 10);
  noStroke();
  ellipse(x, y, 20, 20);
}
4 Likes
5

OK;
Nice, thanks for your help…
Have to adapt the code according to me coz, I have to change the x or y position and I should get the other coordinate…
Will it work that way???

6

ALPHA???
WHAT WOULD IT BE??

7

alpha is the angle from an initial state.

Because of how the corrdinates are setup in p5.js the initial position (alpha = 0) corresponds to a point on the right.

Then alpha increases in a clockwise manner.

By default p5.js uses radians instead of degrees so a full revolution around the circle correspond to an angle of alpha of 2 PI.

But you can change that with angleMode(DEGREES) to use degrees instead of radians. In this case 360° correspond to a full revolution.

Here another picture to help you understand:

image
image758×746 24.5 KB

Btw, no need for capital letters, we are not deaf over here :wink:

2 Likes
8

HMMMM… DID I SAY SOMETHIN’ :rofl::rofl:

9 
> if(keyDown("up")){
> 
>                 if(this.guy.x < 400){
> 
>                     this.angle++;
> 
>                 } else {
> 
>                     this.angle--;
> 
>                 }
> 
>                 this.guy.x = this.position.x + 234 * cos(this.angle) ;
> 
>                 this.guy.Y = this.position.y + 234 * sin(this.angle);
> 
>                 //  (this.guy.x - 400)^2 + (this.guy.y - 300)^2 = 450^2;   
> 
>                 this.guy.rotation += 0.323;
> 
>                 console.log("yo!");
> 
>                 
> 
>                 //ellipse(400,300,900,900);
> 
>             }

this is not working, did I have done somethin’ wrong???

10

TRY IT AND SEE …

11

oh, sorry, didnt mean this… :joy::joy:… actually, this was not working.

12

In your code
this.position is the centre of the circle
234 is the radius of the circle

so looks good so far but then
this.angle++; increments the angle by 1 radian or ~57.3 degrees which is huge try
this.angle += 0.01745; which is approximately 1 degree

1 Like
13

y is not incrementing

14

@quark, WHAT A SOLUTION, had written y in capital :joy:

16

sorry for the mess in the messages. Actually, am a very much beginner.

17

Can you DM me? I’m new and it won’t allow me…

18

Why would you need me to dm you? If you have a question, post it on the forum. The point is that everyone can benefit from wathever help you need. Plus I might not be able to answer your question but other people could.

19

Thanks for responding. It was in reference to a paid project