Weltkugel - Vector Grafik Anpassung

[Phelon]

Hallo Leute!

Ich bin gerade dabei mich ein wenig mit Flash zu spielen, und bin dabei auf ein für mich interessantes Problem gestoßen. Ich habe eine Weltkugel in der Mitte auf der ich Landmassen an die Kugel angepasst darstellen will.

Die Landmassen sind in Form von Vector-Grafiken vorhanden, und sollen korrekt auf die Kugel projiziert werden. Dafür muß ich aber irgendwie die Koordinaten umrechnen können, und genau damit gibt es Probleme.

Diese Weltkugel soll sich drehen lassen und dementsprechend sichtbare Teile anzeigen.

Kann mir irgendjemand sagen, was ich tun kann um dieses Ziel zu erreichen?

Ich beschäftige mich schon seit 2 Wochen mit diesem Problem, komme aber nicht weiter.

Thx,
Phelon

[PinkDragon]

Hatte (schon länger her) das gleiche Problem und habe momentan sogar ein ähnliches. Eine wirkliche Lösung, die mit Flash leicht umzusetzen ist, hab ich nie gefunden. Die einzige Möglichkeit, die ich gefunden habe, war wirklich auf 3D, bzw vorgetäuschte 3D, umzusteigen. Also die Karte in kleinere Teile zerstückeln und auf eine Kugel aufspannen. Dafür musste aber mit Bitmapdatas arbeiten (Man kann ja zum Glück Verktor Grafik in BM-Data umwandeln) und diese bei der richtigen Position richtig verzerren.
Das Problem dabei ist nur, dass es recht aufwändig ist, und nicht gerade die beste Performance haben wird... Obwohl bei Flash 9 soll es ja gut gehen... (Hab nur 8)

Ich hoffe dir hilft das ein wenig weiter.

PD

[Phelon]

Danke für die Antwort, aber sie bringt mich momentan leider keinen Schritt weiter. Ich habe nur Flash MX 2004 zur Verfügung, und das wird wohl reichen müssen. Und da gibt es soviel ich weiß BitmapData noch nicht.

Ich probiere gerade was anderes. Ich konstruiere die Karte in ein 2D Koordinatensystem nach und versuche dann durch Berechnungen die Positionierung der Punkte der Vektor-Grafik auf der X-Achse zu bestimmen.

Den Aufbau der Weltkugel habe ich so gewählt das die Y-Distanz immer gleich groß ist, also muß ich mich dann nur mit den Berechnungen auf der X-Achse herumschlagen. Zumindest erspar ich mir ide Hälfte der Berechnungen.

Keine Ahnung ob das dann wirklich so funktioniert wie ich mir das Vorstelle, und wie schnell das ganze dann ist, aber ich habe wohl kaum eine andere Wahl.

[double-stroke]

Hallo,

ich beschäftige mich seit einiger Zeit mit einem ähnlichen Problem. Aus Zeitgründen habe ich noch keinen Code produziert, aber mit einem bekannten Mathematiker schon gesprochen und eine Lösung im Kopf. Natürlich könnte man für jeden Punkt bei jedem Drehwinkel 3D-Vektorberechnungen anstellen und ihn platzieren und Linien und Füllungen neu zeichnen. Aber bei einer einigermaßen exakten Weltkugel zum Beispiel würde die Performance da wohl schnell einknicken.

Ich stelle mir eine Tabelle vor. Je mehr Spalten (Drehwinkel) und Zeilen (Höhe) sie hat, desto genauer werden die Berechnungen. Im mittleren Feld steht z.B. x1 y1. Das heißt, daß der Teil der Karte, der in der Mitte liegt, nicht verzerrt wird, seine Position also nicht verändert wird. Im Feld links daneben (rechts daneben stünde das gleiche) steht z.B. x0.9 y1, weil ja die Kugeloberfläche dazu führt, daß je weiter ein Punkt weg ist, er in der 2D-Projektion weniger weit entfernt scheint. Man rechnet also vorher einmal aus, wie stark die Verzerrung eines Punktes ist, wenn er in diesem Feld liegt, wie stark also sein Abstand zum Zentrum verändert werden muß, um korrekt um eine Kugel "gewickelt" zu erscheinen. Punkte, die mehr als 90 Grad vom Zentrum entfernt sind, fallen ganz weg oder werden an den Rand des kreises projiziert - muß man sehen, was besser zu handeln ist.

Im gegenzug besitzt jeder Punkt, der ein Objekt oder ein MC sein könnte, Informationen, wo er liegt und wie viel Grad (x und y) er vom Zentrum (Greenwich/Äquator :-) entfernt ist. Eine Funktion ordnet bei jedem gegeben Drehwinkel (auf die Datumsgrenze aufpassen!) jeden Punkt einer der Felder der Tabelle zu und versetzt ihn entsprechend von seiner Originalposition und zeichnet dann wieder Linien und Füllungen. Spaßig wäre auch, wenn die tabelle zudem auch Abdunklungen und Aufhellungen enthielte, also nach dem Muster x0.6 y0.95 b+10 (b steht für Helligkeit oder Brightnes, positive Werte hellen auf, negative dunkeln ab.

So müßte der Rechenaufwand in Grenzen gehalten werden können. Die Tabelle könnte auch dynamisch aufgebaut werden, so fein, wie der User es wünscht, bzw. wie seine Kiste es zuläßt.

Sobald ich das in Code verwandelt habe, melde ich mich wieder.

Bis dann
Dirk

[Phelon]

Hallo Dirk,

Wenn das funktionieren würde... das wär toll.

Ich zeig dir mal das Schema nach dem ich vorgegangen bin :



Meine 2D-Karte besteht mittlerweile nur noch aus Geraden, ohne Kurven.
Ich habe sie in Teile zerlegt, um in weniger großen Dimensionen beim Testen rechnen zu müssen, aber das hat mich auch nicht viel weitergebracht.

Ich habe durch die ellipsenartige Ausdehnung der Trennungslinien Probleme den Abstand auf den verschiedenen Ebenen der Y-Achse zu berechnen.

Klar könnte ich mir ganz beinhart eine Tabelle schreiben in der ich einfach jeden Pixel in der Y-Achse durchgehe und X-Start und X-Ende des jeweiligen "Sektors" angebe.

Aber ich müßte das ganze doch auch irgendwie on the Fly berechnen lassen können.

Außerdem möchte ich mir nachher nach Möglichkeit ausgeben lassen können, welche Landmasse ich angeklickt habe... aber das erst nachher.

mfg,
Phelon

[double-stroke]

Hallo,

bei mir dreht sich zwar noch nichst, aber ich bin schon mal in der Lage, ein Quadrat auf eine Kugel zu mappen. Der Einfachheit halber mahe ich das einfach mit einem Gitter, die Zeichenanweisung, die das Gitter erzeugt, könnte aber ebensogut anders lauten. Wichtig nur bei diesem Ansatz: Jeder Zeichenpunkt muß auf einem Schnittpunkt liegen.

Deine Zeichnung ist nicht ganz korrekt, weil sich die y-Abstande Deiner Breitengrade nicht verändern. Das müssen sie aber, damit es eine Kugel wird. In meiner Datei kannst Du sehen, was ich meine.

Um Drehen zu ermöglichen, müßte die zugrunde liegende rechteckige Karte doppelt so breit sein (Rückseite der Kugel) und dann muß die "Mitte" ausgewählt werden. Weil die Mitte alles schön einfach macht, gibt es bei meinem Codebeispiel IMMER eine Mitte. Die Variable "anz" setzt fest, wie viele Längen- bzw. Breitengrade es NACH DER MITTE BIS EINSCHLIESSLICH DEM RAND gibt. Mit diesem Trick stelle ich sicher, daß es, wie gesagt, immer eine Mitte gibt.

Mit "anz" und "abst" kann man ein wenig rumspielen. Lustigerweise kommt bei mir Unsinn raus, wenn man "anz", also die Gitterauflösung, zu hoch einstellt (ab ca. 12), scheint ein Bug zu sein. Die aktuelle Einstellung erzeugt Gitterlinien in 15-Grad-Schritten, was ganz hübsch ist. Würde man "anz" = 1 einstellen, würde das Ganze einfach aus einem Quadrat eine Raute machen. 1 erzeugt also ein 3 x 3 Feld, 2 ein 5 x 5 Feld, 3 ein 7 x 7 Feld, 4 ein 9 x 9 Feld, 5 ein 11 x 11 Feld, 6 ein 13 x 13 Feld (wie gesagt: 15-Grad-Schritte).

Man braucht nur eine leere Flash-Datei, die quadratisch sein sollte, etwa 400 x 400 Pixel. Das graue Quadrat im Hintergrund ist die "Ausgangskarte", das schawarze vorne das "Kugelmapping". Wie gesagt, echtes 3D ist was anderes, aber mit dieser Herangehensweise läßt sich viel Rechenpower sparen.

PHP-Code:

anz = 6;
abst = 30;
mitte = (Stage.width / 2);

function quadrat() {
    for(i = -anz; i <= anz; i++) {
        for(j = -anz; j <= anz; j++) {
            this["p" + i + j] = {x:i, y:j};
            p = this["p" + i + j];
        }
    }
}

function zeichnen(mc:String, c:String) {
    this.createEmptyMovieClip(mc, this.getNextHighestDepth());
    l = this[mc];
    l.lineStyle(0, c, 100);
    for(i = -anz; i <= anz; i++) {
        for(j = -anz; j <= anz - 1; j++) {
            p0 = this["p" + i + j];
            p1 = this["p" + i + (j + 1)];
            l.moveTo(mitte + p0.x * abst, mitte + p0.y * abst);
            l.lineTo(mitte + p1.x * abst, mitte + p1.y * abst);
        }
    }
    for(i = -anz; i <= anz - 1; i++) {
        for(j = -anz; j <= anz; j++) {
            p0 = this["p" + i + j];
            p1 = this["p" + (i + 1) + j];
            l.moveTo(mitte + p0.x * abst, mitte + p0.y * abst);
            l.lineTo(mitte + p1.x * abst, mitte + p1.y * abst);
        }
    }
}

function kugel() {
    sinus = [];
    cosinus = [];
    grad = (Math.PI / 2) / anz;
    for(i = 0; i <= anz; i++) {
        f = Math.sin(i * grad);
        sinus.push(f);
        f = Math.cos(i * grad);
        cosinus.push(f);
    }
}

function zerren() {
    for(i = 0; i <= anz; i++) {
        for(j = 0; j <= anz; j++) {
            this["p" + i + j].x = (sinus[i] * anz) * cosinus[j];
            this["p" + -i + j].x = (-sinus[i] * anz) * cosinus[j];
            this["p" + i + -j].x = (sinus[i] * anz) * cosinus[j];
            this["p" + -i + -j].x = (-sinus[i] * anz) * cosinus[j];
            
            this["p" + i + j].y = sinus[j] * anz;
            this["p" + i + -j].y = -sinus[j] * anz;
            this["p" + -i + j].y = sinus[j] * anz;
            this["p" + -i + -j].y = -sinus[j] * anz;
        }
    }
}

quadrat();
zeichnen("grau", "0xCCCCCC");
kugel();
zerren();
zeichnen("schwarz", "0x000000"); 


Viel Spaß damit. Ich habe es nicht auskommentiert, weil das alles eigentlich eh klar ist und durch die Funktionsnamen skizziert. Wenn noch Fragen offen sind, einfach posten ... Wie gesagt, es ist nur ein erster Schritt ...

Dirk

[double-stroke]

... sondern mein Fehler. Die Benennung der Punkte war bei Zahlen größer 9 nicht mehr eindeutig, anbei ein Skript ohne dieses Problem. Zum Spaß habe ich da mal recht hohe Zahlen eingegeben. Aber man merkt schon, wie der Prozessor rechnen muß. Bei einer Animation wäre das aber gar nicht soo schlimm, weil ja das Berechnen der Stufen nur einmal geschehen müßte, die Listen "sinus[] und cosinus[]" können dann ja wiederverwendet werden.

PHP-Code:

anz = 24;
abst = 8;
mitte = (Stage.width / 2);

function quadrat() {
    for(i = -anz; i <= anz; i++) {
        for(j = -anz; j <= anz; j++) {
            this["p" + i + "_" + j] = {x:i, y:j};
            p = this["p" + i + "_" + j];
        }
    }
}

function zeichnen(mc:String, c:String) {
    this.createEmptyMovieClip(mc, this.getNextHighestDepth());
    l = this[mc];
    l.lineStyle(0, c, 100);
    for(i = -anz; i <= anz; i++) {
        for(j = -anz; j <= anz - 1; j++) {
            p0 = this["p" + i + "_" + j];
            p1 = this["p" + i + "_" + (j + 1)];
            l.moveTo(mitte + p0.x * abst, mitte + p0.y * abst);
            l.lineTo(mitte + p1.x * abst, mitte + p1.y * abst);
        }
    }
    for(i = -anz; i <= anz - 1; i++) {
        for(j = -anz; j <= anz; j++) {
            p0 = this["p" + i + "_" + j];
            p1 = this["p" + (i + 1) + "_" + j];
            l.moveTo(mitte + p0.x * abst, mitte + p0.y * abst);
            l.lineTo(mitte + p1.x * abst, mitte + p1.y * abst);
        }
    }
}

function kugel() {
    sinus = [];
    cosinus = [];
    grad = (Math.PI / 2) / anz;
    for(i = 0; i <= anz; i++) {
        f = Math.sin(i * grad);
        sinus.push(f);
        f = Math.cos(i * grad);
        cosinus.push(f);
    }
}

function zerren() {
    for(i = 0; i <= anz; i++) {
        for(j = 0; j <= anz; j++) {
            this["p" + i + "_" + j].x = (sinus[i] * anz) * cosinus[j];
            this["p" + -i + "_" + j].x = (-sinus[i] * anz) * cosinus[j];
            this["p" + i + "_" + -j].x = (sinus[i] * anz) * cosinus[j];
            this["p" + -i + "_" + -j].x = (-sinus[i] * anz) * cosinus[j];
            
            this["p" + i + "_" + j].y = sinus[j] * anz;
            this["p" + i + "_" + -j].y = -sinus[j] * anz;
            this["p" + -i + "_" + j].y = sinus[j] * anz;
            this["p" + -i + "_" + -j].y = -sinus[j] * anz;
        }
    }
}

quadrat();
zeichnen("grau", "0xCCCCCC");
kugel();
zerren();
zeichnen("schwarz", "0x000000"); 


Bis dann
Dirk