How can i make a circular motion in javascript

Question

I'm trying to make the Solar System using javascript, and I'm using khan academy to make it, but i don't know how can i make them move in a circle around the Sun I kept browsing the net for hours, but i couldn't find anything. Here's my project so that you can see what i have done and what can you do in it

https://www.khanacademy.org/computer-programming/solar-system/6120244512161792

actually no, but you can check my project and see if you can do anything in it and then send to me a link of my project as a Spin-off — CGUltimateno, Feb 27 '16 at 17:05
I think you would do better to ask a more specific question. — K.Nicholas, Feb 27 '16 at 17:20
@Vini.g.fer https://www.khanacademy.org/computer-programming/solar-system/6120244512161792 — CGUltimateno, Feb 27 '16 at 17:26
Judging by the code in your project, you really need to go through the Khan programming missions before continuing. You currently hard-code every position for every planet in the drawing functions, etc. So you can't animate them at all. Learn about variables, objects, arrays, functions and loops. Then you can put your data for each planet in an object and these objects in an array. And then you can loop through the array, drawing each object and changing their positional data for the animation. — Jannie Gerber, Mar 03 '16 at 08:50

score 9 · Accepted Answer · answered Feb 27 '16 at 17:12

9

Just to get you started:

x = 100  // center
y = 50   // center
r = 50   // radius
a = 0    // angle (from 0 to Math.PI * 2)

function rotate(a) {
  
  var px = x + r * Math.cos(a); // <-- that's the maths you need
  var py = y + r * Math.sin(a);
  
  document.querySelector('#point').style.left = px + "px";
  document.querySelector('#point').style.top = py + "px";  
}


setInterval(function() {
  a = (a + Math.PI / 360) % (Math.PI * 2);
  rotate(a);
}, 5);

div {
  position: fixed;
  width: 10px;
  height: 10px;
}

#center {
  left: 100px;
  top: 50px;
  background: black;
}

#point {
  left: 0px;
  top: 0px;
  background: red;
}

<div id="center"></div>
<div id="point"></div>

answered Feb 27 '16 at 17:12

georg

211,518
52
313
390

Thanks but can you check if it can work in khan academy and if it works tell me, but if it doesnt work then try to modify it please – CGUltimateno Feb 27 '16 at 17:15
1

@CGUltimateno: Surely the math will work if whatever you're using supports standard JavaScript. Math is the same everywhere... – Matti Virkkunen Feb 27 '16 at 17:34
1

In Khan academy don't use `Math.`, just use `cos`, `sin` and `PI` directly – Phil Mander Feb 27 '16 at 17:36
@CGUltimateno, just look at the code provided, it won't work by copying and pasting it. It'll just show you an example of how to compute the x and y of the thing rotating. A hint would be that "a" is the angle, x,y are the the coordinates of the center, px and py are the coordinates of the thing rotating. – JustGage Feb 27 '16 at 19:01

score 0 · Answer 2 · edited May 23 '17 at 11:45

0

See the other animation lessons in Khan academy. The draw() function automatically repeatedly runs to create an animation.

So you need to change a value(s) in the draw() function to make something move. To start with you'll probably want to to look at the equations of a circle and do something with that.

Here's a spin-off you can look at.

edited May 23 '17 at 11:45

Community

1
1

answered Feb 27 '16 at 18:26

Phil Mander

1,819
15
20

I feel like the spin-off is a little too much help. – JustGage Feb 27 '16 at 19:03
I know. I have a bad cold and I'm bored – Phil Mander Feb 27 '16 at 19:04
1

There's always hackerrank.com – JustGage Feb 27 '16 at 19:05
I'm expecting to see an update from the OP to scale, with all the orbits correctly calculated and including sattelites – Phil Mander Feb 27 '16 at 19:06

score 0 · Answer 3 · answered Mar 12 '16 at 23:35

Here is some code that will work on khan academy:

var x = 100;
var y = 100;
draw= function() {
    background(255, 0, 0);
    x=100*cos(frameCount);
    y=100*sin(frameCount);
    ellipse(x,y,20,20);
};

It will draw an ellipse that "orbits" around the origin.. hopefully you can take the basic demonstration of the trig, and extrapolate to fit your needs.

How can i make a circular motion in javascript

3 Answers3