Question

This problem is going to be the death of me. I’m trying to make a starfield type animation from scratch using jquery. The link to my jfiddle is http://jsfiddle.net/wompdesigns/jNBAk/4/ . This gives me 12 randomly placed small divs on the screen just fine. I don’t really have a problem doing an animation codewise. What I do have a problem with is finding the destination point with the placed divs (red) from the center point div (green). In other words, I want to go from the placed divs (red) to the end of the parent div at an angle corresponding from the center (green). I hope this question makes sense and thank you to anyone who tries to solve this. The jquery code is as follows:

$('.cs').each(function(index) {
    var posx = Math.ceil(Math.random() * (60-40+1)) + 40;
    var posy = Math.ceil(Math.random() * (60-40+1)) + 40;
    $(this).css({left: posx+"%", top: posy+"%", });
});

Answer 1

Probably you should post this in a math or geometry stach exchange site too… Anyway finding the angle should be simple math. My approach would be:

for each red dot
  Get the center of the red dot:
  X = $(this).position().left + $(this).width() / 2
  Y = $(this).position().top + $(this).heigh() / 2

Likewise, get the green dot center as well 
  Cx, Cy = something (it is not 0,0)

for each red dot,
  the angle is the arctan((Y-Cy)/(X-Cx))
  to make things simple:
    for every 1 (or -1 if X<Cx) pixel step horizontally
    make (Y-Cy)/(X-Cx) pixel steps vertically

Sorry about the ugly pseudo-code, you should be able to quickly convert it into JS. You don’t even need to calculate the arctan as long as you step the right amount in the appropriate directions.

Let me know if it works…

Something like this is the result: http://jsfiddle.net/jNBAk/7/

It was some good fun to make it work! 🙂