khan academy - How can i make a circular motion in javascript - Stack Overflow

admin管理员组

文章数量:1327695

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

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/puter-programming/solar-system/6120244512161792

• javascript
• khan-academy

Share Improve this question Follow edited Aug 27, 2023 at 16:10 Ole 47.3k7070 gold badges237237 silver badges443443 bronze badges asked Feb 27, 2016 at 16:59 CGUltimatenoCGUltimateno 1911 silver badge55 bronze badges 7

• 2 Have you done any trigonometry before? – JustGage Commented Feb 27, 2016 at 17:04
• 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 Commented Feb 27, 2016 at 17:05
• Please share with us the code you have tried so far. – Vini.g.fer Commented Feb 27, 2016 at 17:18
• I think you would do better to ask a more specific question. – K.Nicholas Commented Feb 27, 2016 at 17:20
• guys check the link i put in the post – CGUltimateno Commented Feb 27, 2016 at 17:22

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 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>

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.

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.

本文标签： khan academyHow can i make a circular motion in javascriptStack Overflow