How do I implement this:

Question

I have a spaceship in the middle of the screen (width/2, height/2). If we click the left of the screen I want to move the spaceship in a circle of 50 radius (I've already implemented this with the parametric coordinates of a circle [r*cos(theta), r*sin(theta)]) in anti clockwise direction.
Then if we click on the right of the screen the spaceship should change the center of the circle it would rotate in such a way: the new center will be [2*r*cos(theta), 2*r*sin(theta)] and hence the spaceship will start moving in clockwise sense from its current location.

This is my code so far:
https://code.sololearn.com/WyQY63ekihlA/?ref=app

I hope I've explained this correctly.

Answer 1

Gordon Chan sleep tight!
Thanx man.. I'll take my time understanding what you're saying.. It's night here as well. Thanx for all the help!

Answer 2

Gordon Chan this is their site: https://p5js.org/
It is an extension of Processing, a software (and a language) made for designers to make coding easy for them. This is Processing's official site: https://processing.org/

I think I'll need to do the math on a pen and a paper.. I'm not able to get this past my head 😅.
Oh and nice suggestion about the varying radii.. I'll keep that for later updates.

Answer 3

I think it may help to describe your ship's position a bit differently. Right now you have a center point x and y, around which you move the ship on a circle by saying what angle the ship is at relative to that point. Clicking left moves anticlockwise on the circle, clicking right moves clockwise *on the same circle*.

It seems like you want to create two circles - one to the "left" of the ship, and one to the "right". This can be achieved by tracking the ship's x, y, and angle it's facing. When the user clicks left, you calculate the center of the circle to the ship's left (at radius 50), then move along that circle, and update the x/y/angle. Same for if they click right, but create a circle to the right of the ship instead.

Answer 4

Gordon Chan thanx for your reply!
But in your edit from 141 to 150, you're keeping the center of circles constant. Which is not quite what I want.. Maybe you did what from my code from an hour ago as you said.. But check out Evan B 's reply too.. As he said, the center of the next circle is going to be based of the current location of the spaceship.
Say if currently right side of the screen is touched. The ship will move in clockwise direction. Now the finger is released and the ship stops at the bottom of the circle. The ship will face in the left direction. Now, if the left side of the screen is touched, the ship should change the center of its circle to its bottom and then move in anti clockwise direction on that bottom circle. I hope this clears it

Edit: OH I think you left that task for me :P.. I'll see if I can do that.. Thanx again!

Btw I'm using p5.js, not JQuery nor Angular

Answer 5

you are welcome
actually you already have keep track of the coordinate of the ship, which is
.x and .y
while .cx and .cy are changes of x and y
to achieve your intended rotation,
you need to add two sets of variables
.leftCenterX
.leftCenterY
.rightCenterX
.rightCenterY
where the .left pairs will be updated whenever rotating right,
(and .right pairs will be updated whenever rotating left)
a bit thoughts on the maths: changeLeftCenterY (or Right) is 2 times .cy
because its similar triangle with doubled hypotenuse.
for change in x of the centers, need to work out from the triangles too.
another suggestion is to set the 50 before cos and sin as a variable called radius, in this way you can set each plane with different size has different radius (larger plane more difficult to turn around, so we use large radius for large plane)
it's late here, and i'll come back to this tomorrow. next time on your code
p.s. 1 : looks like you made some change which makes the left turn very strange, maybe you can replace your wh

Answer 6

(words limit) whole code with my amended copy of your code.
p.s. 2: where can i learn about p5.js?

Answer 7

thanks for the link, let me learn it tomorrow.
Yes need to prove some similar triangles and find the ratio.
For the rest, I just put on the comment session of your code, the line is refer to your current version.
I cannot write clearly sorry because 00:30 at HK here and I am too sleepy. But any further question / help, I'll be here again tomorrow (Oh, as 12 past, it should be "today" instead 😂)

Answer 8

Evan B yes you're right. But I just don't know how to do that. I'm not able to figure out what the left or right circle's center's coordinates would be w.r.t. the spaceship's current x, y, angle.. My current code makes sense in my head but idk why it doesn't work :/

Answer 9

Here is a "kind-of-improved" version on your game:
https://code.sololearn.com/WsXpsnUD1zr7/?ref=app
Remark: not to your current version with some .cx-= which is too far away. Is improve based on your code about an hour ago when you just post the question (you imported both jQuery and AngularJS and it took me so long to figure out which code is doing what)
Look at line 141 to line 150
if(touches.length == 1){
if(mouseX < width/2){
ss_data.x = 50+50*cos(ss_data.angle)
ss_data.y = 150+50*sin(ss_data.angle)
}
else{
ss_data.x = 150+50*cos(ss_data.angle)
ss_data.y = 150+50*sin(ss_data.angle)
}
}
Here I add a checker before updating the coordinates, if left, center is 50,150; if right, center is 150,150, see?
Now, what you need to do is to make this center variable instead constant, the center should be based on your current position and also your current pressing side (left vs right). and one more hint for you: you need add

Answer 10

(continue due to length restrction)
second is about rotate angle,
you need to have a flag indicating the last pressed is left or right and have an if else statement to check whether the direction is swapped, if swapped, angle is 180 degree different ( 360 - angle ) or ( angle -180) because you are going to fly in the opposite side so at opposite side.

Answer 11

(continue again) time to sleep here.
i'll come back to this again in a couple of days. because it's interesting to solve this kind of problems.