¿Cuál es la forma más fácil de arrastrar un elemento en un arco?

Este es mi código para mi “progtwig”. El jQuery para arrastrar el sol está en la parte inferior. El sol es una imagen ¿Cuál es la forma más fácil de arrastrar el sol en un arco?

 /* Colors */ body { /*clouds*/ background: url(http://i.imgur.com/aZty7Mq.png); animation: mymove 4s linear infinite; -webkit-animation: mymove 4s linear infinite; -moz-animation: mymove 4s linear infinite; } /*cloud animation*/ @keyframes mymove { 0% { background-position: 0 0; } 50% { background-position: 40% 0; } } #sun { position: absolute; width: 300px; height: 300px; top: 30%; left: 10%; }         /*sun dragged in a line*/ $(document).ready(function() { $("#sun").draggable({axis: "x"}); });   

Creo que tengo un movimiento de arco bastante bueno aquí, está basado en una fórmula circular. Puede cambiar el arco cambiando las variables en la fórmula. Dime que piensas.

Demo en vivo:

 $("#sun").draggable({ axis: "x", drag: function() { var xpos = parseFloat(this.style.left, 10) - 200; var ypos = Math.sqrt(300 * 300 - xpos * xpos) * 0.75; this.style["margin-top"] = (-ypos) + "px"; } }); 
 /* Colors */ body { /*clouds*/ background: url(https://i.imgur.com/aZty7Mq.png); animation: mymove 4s linear infinite; -webkit-animation: mymove 4s linear infinite; -moz-animation: mymove 4s linear infinite; overflow: hidden; } /*cloud animation*/ @keyframes mymove { 0% { background-position: 0 0; } 50% { background-position: 40% 0; } } #sun { position: absolute; width: 300px; height: 300px; top: 30%; left: 10%; }