Skip to main content
se añadieron 30 caracteres en el cuerpo
Origen Enlace
Pablo Lozano
  • 49.9k
  • 8
  • 55
  • 92
var pos = $('#center').position(),
    radiusSat = $('#sat1').width() * 0.5,
    radius = $('#center').width() * 0.5,
    cx = pos.left + radius,
    cy = pos.top + radius,
    x, y, angle = 0, angles = [],
    spc = 360 / 5,
    deg2rad = Math.PI / 180;
    
let clicked=0;
console.log(pos);
for(let i=0;ii = 0; i < 5; i++) { //let por var, importante!
    angles.push(angle);
    angle += spc;
    $(`#sat${i+1}`).click(function () {
        clicked=i+1;
    });
}

/// space out radius
radius += (radiusSat + 10);


loop();

function loop() {

  for(var i = 0; i < angles.length; i++) {

    angle = angles[i];

    x = cx + radius * Math.cos(angle * deg2rad);
    y = cy + radius * Math.sin(angle * deg2rad);

    $('#sat' + i).css({left:x - radiusSat, top:y - radiusSat});

    angles[i] = angles[i] + 1;
    if (angles[i] > 360) angles[i] = 0;
  }
  if (!clicked) {
    requestAnimationFrame(loop);
  } else {
    requestAnimationFrame(moveToCenter);
  }
}

function moveToCenter() {
  let clickedDiv=$(`#sat${clicked}`);
    let position=clickedDiv.position();
  let centerX=position.left+25;
  let centerY=position.top+25;
  if (centerX > cx) {
    centerX-=1;
  } else if (centerX<cx) {
    centerX+=1;
  }
  if (centerY > cy) {
    centerY-=1;
  } else if (centerY<cy) {
    centerY+=1;
  }
  
  if (Math.abs(centerY-cy) > 1 || Math.abs(centerX-cx)>1) {
    clickedDiv.css({left:centerX-25, top:centerY-25})
    requestAnimationFrame(moveToCenter);
  }
  
}
div {
    border-radius:50%;
    border:2px solid #000;
    position:fixed;
}
#center {
    width:200px;
    height:200px;
    left:100px;
    top:100px;
    
}
#sat0, #sat1, #sat2, #sat3, #sat4 {
    width:50px;
    height:50px;
    
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="center"></div>
<div id="sat0"></div>
<div id="sat1"></div>
<div id="sat2"></div>
<div id="sat3"></div>
<div id="sat4"></div>
var pos = $('#center').position(),
    radiusSat = $('#sat1').width() * 0.5,
    radius = $('#center').width() * 0.5,
    cx = pos.left + radius,
    cy = pos.top + radius,
    x, y, angle = 0, angles = [],
    spc = 360 / 5,
    deg2rad = Math.PI / 180;
    
let clicked=0;
console.log(pos);
for(let i=0;i < 5; i++) {
    angles.push(angle);
    angle += spc;
    $(`#sat${i+1}`).click(function () {
        clicked=i+1;
    });
}

/// space out radius
radius += (radiusSat + 10);


loop();

function loop() {

  for(var i = 0; i < angles.length; i++) {

    angle = angles[i];

    x = cx + radius * Math.cos(angle * deg2rad);
    y = cy + radius * Math.sin(angle * deg2rad);

    $('#sat' + i).css({left:x - radiusSat, top:y - radiusSat});

    angles[i] = angles[i] + 1;
    if (angles[i] > 360) angles[i] = 0;
  }
  if (!clicked) {
    requestAnimationFrame(loop);
  } else {
    requestAnimationFrame(moveToCenter);
  }
}

function moveToCenter() {
  let clickedDiv=$(`#sat${clicked}`);
    let position=clickedDiv.position();
  let centerX=position.left+25;
  let centerY=position.top+25;
  if (centerX > cx) {
    centerX-=1;
  } else if (centerX<cx) {
    centerX+=1;
  }
  if (centerY > cy) {
    centerY-=1;
  } else if (centerY<cy) {
    centerY+=1;
  }
  
  if (Math.abs(centerY-cy) > 1 || Math.abs(centerX-cx)>1) {
    clickedDiv.css({left:centerX-25, top:centerY-25})
    requestAnimationFrame(moveToCenter);
  }
  
}
div {
    border-radius:50%;
    border:2px solid #000;
    position:fixed;
}
#center {
    width:200px;
    height:200px;
    left:100px;
    top:100px;
    
}
#sat0, #sat1, #sat2, #sat3, #sat4 {
    width:50px;
    height:50px;
    
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="center"></div>
<div id="sat0"></div>
<div id="sat1"></div>
<div id="sat2"></div>
<div id="sat3"></div>
<div id="sat4"></div>
var pos = $('#center').position(),
    radiusSat = $('#sat1').width() * 0.5,
    radius = $('#center').width() * 0.5,
    cx = pos.left + radius,
    cy = pos.top + radius,
    x, y, angle = 0, angles = [],
    spc = 360 / 5,
    deg2rad = Math.PI / 180;
    
let clicked=0;
console.log(pos);
for(let i = 0; i < 5; i++) { //let por var, importante!
    angles.push(angle);
    angle += spc;
    $(`#sat${i+1}`).click(function () {
        clicked=i+1;
    });
}

/// space out radius
radius += (radiusSat + 10);


loop();

function loop() {

  for(var i = 0; i < angles.length; i++) {

    angle = angles[i];

    x = cx + radius * Math.cos(angle * deg2rad);
    y = cy + radius * Math.sin(angle * deg2rad);

    $('#sat' + i).css({left:x - radiusSat, top:y - radiusSat});

    angles[i] = angles[i] + 1;
    if (angles[i] > 360) angles[i] = 0;
  }
  if (!clicked) {
    requestAnimationFrame(loop);
  } else {
    requestAnimationFrame(moveToCenter);
  }
}

function moveToCenter() {
  let clickedDiv=$(`#sat${clicked}`);
    let position=clickedDiv.position();
  let centerX=position.left+25;
  let centerY=position.top+25;
  if (centerX > cx) {
    centerX-=1;
  } else if (centerX<cx) {
    centerX+=1;
  }
  if (centerY > cy) {
    centerY-=1;
  } else if (centerY<cy) {
    centerY+=1;
  }
  
  if (Math.abs(centerY-cy) > 1 || Math.abs(centerX-cx)>1) {
    clickedDiv.css({left:centerX-25, top:centerY-25})
    requestAnimationFrame(moveToCenter);
  }
  
}
div {
    border-radius:50%;
    border:2px solid #000;
    position:fixed;
}
#center {
    width:200px;
    height:200px;
    left:100px;
    top:100px;
    
}
#sat0, #sat1, #sat2, #sat3, #sat4 {
    width:50px;
    height:50px;
    
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="center"></div>
<div id="sat0"></div>
<div id="sat1"></div>
<div id="sat2"></div>
<div id="sat3"></div>
<div id="sat4"></div>
Origen Enlace
Pablo Lozano
  • 49.9k
  • 8
  • 55
  • 92

Modificando un poco lo que tienes, se puede hacer así (el mover elegantemente hasta el centro te lo dejo pendiente):

var pos = $('#center').position(),
    radiusSat = $('#sat1').width() * 0.5,
    radius = $('#center').width() * 0.5,
    cx = pos.left + radius,
    cy = pos.top + radius,
    x, y, angle = 0, angles = [],
    spc = 360 / 5,
    deg2rad = Math.PI / 180;
    
let clicked=0;
console.log(pos);
for(let i=0;i < 5; i++) {
    angles.push(angle);
    angle += spc;
    $(`#sat${i+1}`).click(function () {
        clicked=i+1;
    });
}

/// space out radius
radius += (radiusSat + 10);


loop();

function loop() {

  for(var i = 0; i < angles.length; i++) {

    angle = angles[i];

    x = cx + radius * Math.cos(angle * deg2rad);
    y = cy + radius * Math.sin(angle * deg2rad);

    $('#sat' + i).css({left:x - radiusSat, top:y - radiusSat});

    angles[i] = angles[i] + 1;
    if (angles[i] > 360) angles[i] = 0;
  }
  if (!clicked) {
    requestAnimationFrame(loop);
  } else {
    requestAnimationFrame(moveToCenter);
  }
}

function moveToCenter() {
  let clickedDiv=$(`#sat${clicked}`);
    let position=clickedDiv.position();
  let centerX=position.left+25;
  let centerY=position.top+25;
  if (centerX > cx) {
    centerX-=1;
  } else if (centerX<cx) {
    centerX+=1;
  }
  if (centerY > cy) {
    centerY-=1;
  } else if (centerY<cy) {
    centerY+=1;
  }
  
  if (Math.abs(centerY-cy) > 1 || Math.abs(centerX-cx)>1) {
    clickedDiv.css({left:centerX-25, top:centerY-25})
    requestAnimationFrame(moveToCenter);
  }
  
}
div {
    border-radius:50%;
    border:2px solid #000;
    position:fixed;
}
#center {
    width:200px;
    height:200px;
    left:100px;
    top:100px;
    
}
#sat0, #sat1, #sat2, #sat3, #sat4 {
    width:50px;
    height:50px;
    
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="center"></div>
<div id="sat0"></div>
<div id="sat1"></div>
<div id="sat2"></div>
<div id="sat3"></div>
<div id="sat4"></div>