Kreisberechnung Isometrie

[ludabruda]

Hallo Iso-Häuptlinge

Ich habe ein Problem bei der Berechnung von Winkeln und Längen in einem Kreis in der Isometrie.

Mein Kreis hat zunächst einen Durchmesser von sagen wir 100 Pixeln. Für die isometrische Darstellung vergrößere ich die Breite des Kreises mit Math.cos(30*Math.PI/180)*2, also dem Faktor 1.73.

Ich möchte nun vom Zentrum des Kreises eine Linie in Richtung der Maus zeichnen. Diese soll aber nicht über den Umriss des Kreises hinausgehen. Also, wenn die Maus innerhalb des Kreises ist, bis zur Maus, wenn außerhalb, bis zum Rand des Kreises.

Ich berechne hierzu zunächst die Distanz von Maus-Kreis mit dem Pythagoras und ermittle den Winkel zwischen Maus und Kreis mittels Math.atan2(_root._ymouse-kreis._y,_root._xmouse-kreis._x);

Bei richtigem Winkel der Linie ist diese allerdings entweder zu lang oder zu kurz, übertritt also entweder den Kreis oder erreicht die Outline nicht.
Füge ich den Faktor von 1.73 auch hier wieder ein, ist die Linie perfekt auf dem Kreis, allerdings weicht der Winkel vom eigentlichen Winkel ab, da ich den Faktor nur auf den X-Wert draufschlage

In der angehängten fla könnt ihr sehen, was ich meine.

In anderen Isometrie-Threads wird die Isometrie oft mit Drehung um 45° und halbieren der Höhe erreicht. Ist das nur eine vereinfachte Annäherung oder gibt es einen anderen Grund, das so zu tun? Bin ich vielleicht mit meinem Ansatz auf dem Holzweg?

Ich würde mich freuen, wenn ihr euch meines Problems annehmen könntet...

Grüße
Sascha

[Janoscharlipp]

Ich versuche einfach mal eine Lösung herzuleiten.

Ich nehme an, dass die Ellipse dadurch entsteht, dass man einen Kreis mit dem Radius r um den Faktor k streckt,
indem man die X-Koordinate jedes Punktes auf dem Kreis mit k multipliziert, und dort seinen neuen Punkt malt.

Wenn auf dem Kreis gilt:

x^2 + y^2 = r^2

dann gilt nun für die neuen Punkte

(x / k)^2 + y^2 = r^2

Desweiteren gilt für alle Punkte, die zwischen deinem Vorgabepunkt (der Maus in diesem Fall) und dem Mittelpunkt des Kreises liegen:

y / x = tan(alpha)

wobei alpha der Winkel des Vorgabepunktes ist.
Das sieht schon ganz gut aus, wir haben die zwei Variablen x und y, und zwei Gleichungen.

Diese letzte Gleichung lässt sich nun jeweils nach x und nach y auflösen:

y = x * tan(alpha)
x = y / tan(alpha)

Wenn man diese beiden Gleichungen nun in die Gleichung unserer Ellipsenpunkte einsetzen, erhält man:

x^2 / k^2 + x^2 * tan^2(alpha) = r^2

und

y^2 / k^2 / tan^2(alpha) + y^2 = r^2

Wenn man nun auf der linken Seite der jeweiligen Gleichung x, bzw. y ausklammert, und den Rest auf die andere Seite bringt, erhält man:

x^2 = r^2 / (1 / k^2 + tan^2(alpha))

und

y^2 = r^2 / (1 / (k^2 * tan^2(alpha) + 1))

jetzt wird es unschön, denn wir müssen die Wurzel ziehen.
Schön das es immerhin möglich ist, r ist positiv, k^2 ist immer positiv, tan^2 auch, also ist alles positiv.

Es ergibt sich also:

x = r / sqrt(1 / k^2 + tan^2(alpha))

und

y = r / sqrt(1 / (k^2 * tan^2(alpha) + 1))


Dies sind nun die Koordinaten relativ zum Mittelpunkt der Ellipse.
Wie man sieht, fehlt uns noch der tan(alpha), aber der ist bekanntlich nichts andres als y / x, allerdings relativ zum Mittelpunkt, also in Flash:

dx = _xmouse - mittelpunktX;
dy = _ymouse - mittelpunktY;

tanalpha = dy / dx;

Leider fehlen uns die Vorzeichen, will meinen, wir haben nur den Betrag der Koordinaten.

Dieses Problem lösen wir in Flash aber einfach, indem wir die richtigen Richtungen getrennt ermitteln, z.B. so:

richtungX = (dx < 0)?(-1):(1);
richtungY = (dy < 0)?(-1):(1);

dann muss man die Koordinaten nur noch absolut umrechnen, und fertig:

absolutesX = mittelpunktX + x * richtungX;
absolutesY = mittelpunktY + y * richtungY;


Um nun dieses Ergebnis zu verwenden, prüfst du erstmal, ob die Maus in der Ellipse liegt:

radiusAufEllipse = Math.sqrt(absolutesX * absolutesX + absolutesY * absolutesY);
 
if(radiusAufEllipse < mausRadius)
{
    // nichts machen, alles ok, die Maus ist weit weg
}
else
{
    absolutesX = absolutesX / radiusAufEllipse * mausRadius;
    absolutesY = absolutesy / radiusAufEllipse * mausRadius;
} 

So, ich glaube das wars, die Formeln oben musste dir eben noch in AS umschreiben, da bin ich jetzt zu faul...

EDIT: Welcher Held hat das eigentlich mit den smillies erfunden?
EDIT2: bekanntlich ist tan = x / y... wers glaubt :)

[Janoscharlipp]

Geschrieben von Janoscharlipp

radiusAufEllipse = Math.sqrt(absolutesX * absolutesX + absolutesY * absolutesY);
 
if(radiusAufEllipse < mausRadius)
{
    // nichts machen, alles ok, die Maus ist weit weg
}
else
{
    absolutesX = absolutesX / radiusAufEllipse * mausRadius;
    absolutesY = absolutesy / radiusAufEllipse * mausRadius;
} 

vergiss das, ich war in so nem Lauf, da habe ich nicht gemerkt, dass dem Fall, in dem die Maus innerhalb der Ellipse liegt, der gesuchte Punkt die Maus selbst ist...

Also hier mein Script:

_root.C = {x: 400, y: 200}; // der Mittelpunkt
_root.r = 100; // der Radius des Kreises
_root.k = 2; // der Streckungsfaktor
 
_root.onEnterFrame = function()
{
    var dx = _xmouse - C.x;
    var dy = _ymouse - C.y;
    
    var tana = dy / dx;
    
    var x = r / Math.sqrt(1 / (k * k) + tana * tana);
    var y = r / Math.sqrt(1 / (k * k * tana * tana) + 1);
    
    var radiusAufEllipseQuadrat = x * x + y * y;
    
    var mausRadiusQuadrat = dx * dx + dy * dy;
 
    if(radiusAufEllipseQuadrat > mausRadiusQuadrat)
    {
        // sozusagen alles umsonst, der Punkt ist die Maus
        x = dx;
        y = dy;
    }
    else
    {
        // wird benötigt, nur noch die Richtungen berechnen
        x *= (dx < 0)?(-1):(1);
        y *= (dy < 0)?(-1):(1);
    }
    
    _root.clear();
    _root.lineStyle(1);
    _root.moveTo(C.x, C.y);
    _root.lineTo(C.x + x, C.y + y);
} 

und im Anhang das .fla dazu.

EDIT: schon wieder die Gelbköpfe...

[ludabruda]

Hi Janoscharlipp,

wow, vielen Dank, ich bin begeistert.
Ich hatte den Umweg versucht, aus den Iso-Koordinaten den Winkel in der Isometrie zu berechnen. Das gelingt zwar auch, aber es nützt eben nix. Die Differenz sah man ja in meinem Beispiel. Ich hatte mich die ganze Zeit an der Drehung um 30° in der Isometrie festgehalten. Auf die Idee, dass es sich ja schließlich um eine Ellipse handelt, war ich gar nicht gekommen... Manchmal stehe ich voll auf dem Schlauch.

Sag mal, ist es eigentlich Zufall, dass 2*sin(45°) bzw. 2*cos(45°) gleich sqrt(2) ist? Gibt es da einen Zusammenhang, den ich nicht sehe? Oder stelle ich da einen Zusammenhang her, der gar nicht existiert....?

Grüße
Sascha

[Janoscharlipp]

ja, da gibt es einen Zusammenhang.

In der Schule werden Sinus und Cosinus als Ordinaten (y-Achse) bzw. Abszisse eines Punktes mit Winkel alpha auf dem Einheitskreis eingeführt.

Dabei ist 0° bei 3 Uhr, und die Richtung ist entgegend dem Uhrzeigersinn.
Wenn du dir nun 45 Grad vorstellst, läge der Punkt genau auf der Diagonalen durch den Ursprung nach rechts oben.
Dann ist die Ordinate genau gleich der Abszisse (ein Kästchen nach rechts, eins nach oben ) (wenn du sehr komische Kästchen hast )

Da ja immer ein rechter Winkel da ist, muss immer gelten: (nach Pythagoras; oder wie man den schreibt)
x^2 + y^2 = r^2

in unserem Spezialfall 45° ist aber x = y, also auch
2 x^2 = r^2, also x = 1 / 2 sqrt(r)

und auf dem Einheitskreis also
x = y = 1 / 2 sqrt(2)

ich weiß, ganz wirre Erklärung, hoffe es ist trotzdem zu verstehen.

[ludabruda]

Hi,

ja, natürlich, die Diagonale eines Quadrats mit Seitenlänge 1 ist nunmal sqrt(2)...

Schön, sich ab und zu mal wieder den Mittelstufenwind durch die Synapsen wehen zu lassen

Nochmals Danke...

Grüße
Sascha

[Janoscharlipp]

ahh, genau das meinte ich doch

mir sitzt das ganze noch ziemlich tief...da bläst der Wind aus der anderen Richtung.