dynamisches grid innerhalb einer vordefinierten Fläche erstellen

[hexfiles]

Hallo zusammen.

ich möchte auf einer unbestimmt großen Fläche eine unbestimmte Anzahl DIV-Container "automatisch und sinnvoll" platzieren.

Sagen wir also, ich habe eine Fläche von 800 x 600 pixel und ich will 32 Felder haben ... dann soll sich das etwa so anordnen, wie im Anhang dargestellt. Von den Ecken her zur Mitte die Fläche systematisch auffüllen.

Es soll dabei egal sein, ob es 18, 23 oder 54 Felder sind.

Ich bräuchte da mal einen Denkanstoß, wie ich da ansetze.
Letztlich muss ich hier irgendwie überschneidungen und antikollission berücksichtigen. Darin bin ich allerdings nicht wirklich firm.

Gruß Mike

[AmicaNoctis]

Hallo,

*move* nach Brainstorming, da hier kein konkretes PHP-Problem erkennbar ist.

Folgende Fragen solltest du dir stellen:

Wie soll das Grid aussehen? So?

*  *  *  *

*  *  *  *

*  *  *  *

Oder eher so?

*   *   *   *

  *   *   *   *

*   *   *   *

  *   *   *   *

Oder unregelmäßig verteilt, wie in deinem Beispiel?

Sind die einzelnen Objekte (div-Elemente) rechtwinklig oder wie in deiner Grafik anders geformt, so dass das Bounding Rectangle nicht unbedingt die Kollisionskanten darstellt?

Gruß,

Amica

[Quetschi]

Sind die einzelnen Objekte (div-Elemente) rechtwinklig oder wie in deiner Grafik anders geformt...

Das hab ich mich auch grad gefragt. Da in dem Fall aber von divs die Rede ist kommt aber wohl eh nur rechtwinklig in Frage.

Was noch offen ist - sollen die divs sich automatisch gleichmässig über die gegebene Fläche verteilen, oder sind die Maße je div einzeln definiert und ggf. unterschiedlich?

EDIT:
weiterhin stellt sich die Frage, ob in der gegebenen Fläche Leerräume verbleiben dürfen oder ob eine komplette Befüllung gefordert ist. Je nachdem musst du schon einmal bei bestimmten Feldanzahlen (zumindest schonmal bei Primzahlen - 23 wär z.B. schonmal eine. Ob noch andere Sonderfälle auftauchen können weiß ich grad nicht) aufpassen wie du damit verfährst - soll alles gefüllt werden und alle Felder gleich groß werden, wäre für Primzahlen als Feldanzahl schonmal nur eine Zeile möglich usw...

Nochmal EDIT:
Weil wir grad bei Primzahlen sind - die Zerlegung der geforderten Feldanzahl in ihre Primfaktoren wäre z.b. ein Weg um eine möglichst gutes Verhältnis aus Zeilen und Spalten zu ermitteln, solange die Grundfläche nicht ein extremes Hoch- oder Querformat ist.
Guck dir dazu mal folgende Seite an: http://www.arndt-bruenner.de/mathe/s...primzahlen.htm

[hexfiles]

Die Felder sollen schon rechteckig sein. Zu komplex will ich das gar nicht werden lassen.
Sie sind auch alle gleich groß und grundsätlich dürfen Plätze frei bleiben, ja.

Die Frage nach den Primzahlen hat mich der Lösung an sich schon etwas näher gebracht, denn beim händischen Experimentieren sind mir schon die logischen Muster aufgefallen, in denen ich hochzählen muss.

Dieses feldlinienartige Auffüllen möchte ich schon beibehalten, um eine optische unregelmäßigkeit zu simulieren.

Mein Ansatz ist der, die Anzahl dieser Feldlinien über die Diagonale in einer FOR-schleife hochlaufen zu lassen und die Anzahl der Schnittpunkte zu berechnen.
Ist die zu klein, mache ich weiter, bis ich ausreichend Schnittpunkte habe.

Im ersten Schritt ermittle ich dann die, die diagonal größte Distanz zu einander haben.
Das wären dann die 4 Ecken.
- Ausnahme (bei ungrader Anzahl Schnittpunkte und ungrader Anzahl Container und ungrader Anzahl Feldlinien beginne ich im Zentrum)

Hier muss ich dann die Anzahl Schnittpunkte mit identischer Distanz ermitteln und das mit der Restmenge gegenhalten. Ist die Restmenge größer oder gleich, befülle ich alle, sonst ..... *überleg* zufällig irgendwelche davon.

Wenn ich ohnehin schon die Distanz ermitteln muss, ist die Form des Inhalts ja eher irrelevat, denn an diesem Punkt muss ich ja prüfen, ob die Distanz ausreichend ist, um überlagerungen zu vermeiden.
(entstehen Überlagerungen, kann ichdavon ausgehen, das keine der Flächen ehr passen wird, ergo zurück auf Anfang und eine Feldlinie mehr probieren - grid verfeinern)

Hab ich also die Schnittpunkte belegt, die die höchste Distanz hatten und ich hab noch freie Schnittpunkte, beginne ich erneut, die mit der höchsten Distanz zu ermitteln. So lange, bis alle Container platziert sind.

Das würde demnach bedeuten, ich kann auch mit unterschiedlich großen Flächen Arbeiten, muss mir nur die Dimensionen merken und vorzugsweise mit der größen Fläche absteigend beginnen und die Dimensionen bei der Berechnung der Distanz zueinander berüchsichtigen.

Bis dahin gaube ich, bin ich auf einem machbaren Weg.
Ich bin hier weiterführend auf das Thema backtracking gestoßen ... das spiegelt meine obige Ausführung recht einfach und genau wieder.

Funktion FindeLoesung (Stufe, Vektor)
1. wiederhole, solange es noch neue Teil-Lösungsschritte gibt:
a) wähle einen neuen Teil-Lösungsschritt;
b) falls Wahl gültig ist:
I) erweitere Vektor um Wahl;
II) falls Vektor vollständig ist, return true; // Lösung gefunden!
sonst:
falls (FindeLoesung(Stufe+1, Vektor)) return true; // Lösung!
sonst mache Wahl rückgängig; // Sackgasse (Backtracking)!
2. Da es keinen neuen Teil-Lösungsschritt gibt: return false // Keine Lösung!

Bis hierhin erstmal Danke. Eure Posts haben mir hier eine Richtung gezeigt.

Womit ich jetzt noch ein Problem habe, ist die Krümmung der Feldlinien:
Optisch betrachtet wären die äußeren Punkte selbst quasi ein Kreis und zum Zentrum hin ende ich in der Tangente dazu.
Ich nehme an, hier kommen Formeln aus der Gravitationslehre zum tragen.

2 Varianten der Verteilung dieser Linien fallen mir hierzu ein.
# Schnittpunkte mit gleichmäßigen Abständen auf der Diagonalen durchs Zentrum der Fläche oder
# Schnittpunkte mit gleichmäßigen Abständen auf den Seiten a und b der Gesamtfläche

Was von beidem sinvoller ist, weiß ich noch nicht ... aber was die Berechnung der Kurven selbst und deren Schnittpunkte angeht, steh ich noch am Anfang meines Lateins.

Hilfe nehme ich gern entgegen.

Edit:
Nochmal ein Beispiel in den Anhang eingefügt.

[hexfiles]

Mein Problem scheint einfacher zu sein, als angenommen.
*Kopf trifft Tisch & critical hit +100 pts*

Da meine Arbeitsfläche gestaucht ist, nahm ich irrtümlich an, die Diagonalen seien durch die Skalierung anders als Tangenten und die Bögen seien anders als Kreise zu behandeln.

Verbindet man die Schnittpunkte der Bögen auf den Seiten der Arbeitsfläche mit dem der diagonalen abgewandten Eckpunkt, erhält man weitere Tangenten.
Durch einfache Anwendung der trigonometrischen Funktionen lassen sich mittels der Diagonalen durch die Eckpunkte der Arbeitsfläche und der Hilfs-Tangenten die Radien der Kreislinien herleiten und schon hab ich auch meine Krümmung.

Abhängig davon, ob ich die Diagonale gleichmäßig aufteile oder wie in der Abbildung die Aussenseite, muss ich nur noch Hypotenuse und Ankathede richtig einsetzen.

Hab ich die Schnittpunkte, die ich brauche, muss ich das nur noch per Dreisatz auf höhe und breite der Fläche skalieren und schon stimmen meine Koordinaten

Bitte Thema schliessen, da Lösung erkannt.