Ruch okręgu po prostej

Witam,

Mój problem polega na tym, że chciałbym poruszać okrąg po prostej(równanie prostej jest mi znane) ale warunek jest taki, że przyrost wartości powinien być zawsze taki sam - niezależny od nachylenia prostej do OX. Generalnie chodzi o to, aby okrąg poruszał się po prostej ze stałą prędkością. Póki co zrobiłem tak, że wartość mojej prostej obliczana jest co pewien krok tj. argument x zwiększa sie o pewną ustaloną wartość i efekt jest taki, że okrąg porusza się inaczej w zależności od nachylenia prostej co jest logiczne bo im kąt większy tym wartości szybciej rosną. I teraz moje pytanie jest takie, jak wyznaczać kolejny argument x w zależności od nachylenia prostej tak aby uzyskać jednostajny ruch okręgu ?

Poniżej szybki szkic problemu

Nie bardzo rozumiem gdzie jest problem.
Narysuj sobie trójkąt prostokątny którego dwa boki to OX, twoja prosta.
Chcesz żeby ruch wzdłuż prostej był jednostajny dla dowolnego nachylenia -> to ma być wartość którą sobie wybierasz, nazwijmy ją M. Następnie ten wektor przemieszczenia rozkładasz sobie na składową X oraz Y, co jest dość proste bo możesz użyć twierdzenia sinusów, bo znasz wszystkie kąty trójkąta.
M / sin(90) = delta_X / sin(alfa) = delta_Y / sin(90-alfa) gdzie alfa to kąt nachylenia prostej.
W efekcie przesunięcie okręgu wykonujesz zawsze o wektor [Msin(alfa), Mcos(alfa)]

Chyba nie do końca zrozumiałem, ponieważ próba zaimplementowania wyżej opisanej metody nie dała pożądanych rezultatów:

    function fireBall() {   
        //var mouseXY = stage.getPointerPosition();
        
        //var x1 = 285;
        //var y1 = 525;
        //var x2 = mouseXY.x;
        //var y2 = mouseXY.y;
        
        //var a = (y2-y1)/(x2-x1);
        //var b = y1 - a*x1;        
        
        var cannonRotation = cannonBall.rotation();                
        
        var fireBallAnimation = new Kinetic.Animation(function(frame) {     
           //var y = a*(ballInCannon.sprite.getPosition().x + 20) + b;  
            
           var vecX = 0.1*Math.sin(cannonRotation);
           var vecY = 0.1*Math.cos(cannonRotation);
            
           ballInCannon.sprite.setX(270+(frame.time)*vecX);
           ballInCannon.sprite.setY(525+(frame.time)*vecY);
            
        }, gameLayer);
                
        fireBallAnimation.start();
    }

frame.time określa bieżącą milisekundę animacji. Punkt 270, 525 to punkt początkowy okręgu.

dodanie znacznika <code class="javascript"> - furious programming

A jaki jest efekt w takim razie? Bo ja nie widzę tutaj błędu -> przesuwanie się obiektu po prostej powinno się odbywać bez problemów, chyba że kąt nachylenia prostej może być większy od 90 stopni, bo wtedy trzeba odpowiednio rozpatrzeć sobie czy znaki sin/cos się zgadzają.

Kąt nachylenia mierzony jest obrotem kwadratu w której znajduje się okrąg. Wyznaczyłem prostą przechodzącą przez środek okręgu oraz punkt kliknięcia tak abym wiedział w jaki sposób okrąg powinien się poruszać. Obróciłem tutaj kwadrat o 30 stopni i odpaliłem animacje, efekt widoczny jest na drugiej części rysunku.

Dodam jeszcze moze, że kierunek okręgu jest troche losowy wystarczy zmienic kąt o kilka stopni i nagle okrąg idzie w przeciwnym kierunku. Troche tego nie rozumiem..

           var vecX = 0.1*Math.sin(cannonRotation);
           var vecY = 0.1*Math.cos(cannonRotation);

sinus powinien wpływać na vecY, a cosinus na vecX

oprócz tego może być jeszcze kolejny błąd spowodowany podawaniem kąta w stopniach, podczas gdy funkcja liczy z radianów lub na odwrót

Faktycznie machnąłem się w kątach ;)
M/sin(90) = x/sin(90-alfa) = y/sin(alfa)

Działa! byłem święcie przekonany, że funkcje z Math przyjmują stopnie. Zamieniłem na radiany i dorzuciłem znak "-" na kącie i teraz jest ok.

Dziękuje za pomoc :)