Rechteckiges DIV in X flächengleiche Rechtecke teilen (Algo)

[mark.k]

Schönen Abend,

ich möchte gerne ein rechteckiges <div> in beliebig viele flächengleiche <div> zerlegen. Ich möchte das gerne für meine Hompage-Navigation verwenden.

Damit man evtl. besser versteht, was ich meine: das Ergebnis sollte ungefähr so aussehen http://thejit.org/static/v20/Jit/Examples/Treemap/example2.html

Hat jemand einen Codesnippet, oder irgend eine mathematische Formel parat, mit der man das umsetzen kann?

lg
mark

[Multi]

Hat jemand einen Codesnippet,

http://thejit.org/static/v20/Jit/Examples/Treemap/example2.code.html ;)

[mark.k]

Hat jemand einen Codesnippet,

http://thejit.org/static/v20/Jit/Examples/Treemap/example2.code.html ;)

ja, das wäre der steinige Weg. Da überleg ich mir lieber eine mathematische Lösung bevor ich mich durch 15000 zeilen Code arbeite.

Sollte ja eigentlich mit ein bisschen Geometrie zu lösen sein. Einfach die breite durch X teilen wäre der einfachste Weg ... da bleibt aber immer Rest.

[Multi]

da bleibt aber immer Rest.

Dann ändere deine Breite, damit sie ein Vielfaches der Anzahl deiner Spalten ist.

[ChrisB]

Hi,

ich möchte gerne ein rechteckiges <div> in beliebig viele flächengleiche <div> zerlegen. Ich möchte das gerne für meine Hompage-Navigation verwenden.

Dann suche dir einen Teiler für die Breite und einen für die Höhe.

Hat jemand einen Codesnippet, oder irgend eine mathematische Formel parat, mit der man das umsetzen kann?

Wie man obiges macht, kannst du selber googlen.

MfG ChrisB

[Gunnar Bittersmann]

@@mark.k:

nuqneH

ich möchte gerne ein rechteckiges <div> in beliebig viele flächengleiche <div> zerlegen.

Ganz einfach: Teile eine Seite des Rechtecks durch die Anzahl n der Teile. Vermutlich ist das Ergebnis visuell ansprechender, wenn du die längere Seite teilst.

Damit man evtl. besser versteht, was ich meine: das Ergebnis sollte ungefähr so aussehen http://thejit.org/static/v20/Jit/Examples/Treemap/example2.html

Das sieht nicht ungefähr so aus; die Teile dort sind nicht flächengleich. Und bitte verlinken; der „Link“-Button über dem Eingabefeld hilft dabei.

Hat jemand einen Codesnippet, oder irgend eine mathematische Formel parat, mit der man das umsetzen kann?

Na gut, wenn’s denn ein bisschen besser aussehen soll als oben beschrieben: Teile n so in zwei Faktoren a und b, dass beide möglichst dicht bei √n liegen; o.B.d.A. a ≤ √n ≤ b. Das heißt: Suche diejenigen a, b ∈ ℕ⁺, für die gilt: a · b = n und es gibt keine anderen Zahlen a′, b′ ∈ ℕ⁺ mit a′ · b′ = n und a < a′ ≤ √n ≤ b′ < b.

Also bspw. von √n abwärts alle ganzen Zahlen testen, ob sie Teiler von n sind. Die erste gefundene Zahl ist a; b ergibt sich aus n : a.

Die längere Seite des Rechtecks wird durch die größere der beiden Teiler (also durch b) geteilt, die kürzere Seite durch a.

Wenn n eine Primzahl ist, gibt es keine bessere Teilung als die anfangs beschriebene.

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Uh, ich war stillschweigend davon ausgegangen, dass die Teile nicht nur flächengleich, sondern auch formgleich (ähnlich) sein sollen, also kongruent.

Wenn das nicht gefordert ist, sind auch andere Aufteilungen möglich.

Qapla'

[g42]

Also bspw. von √n abwärts alle ganzen Zahlen testen, ob sie Teiler von n sind. Die erste gefundene Zahl ist a; b ergibt sich aus n : a.

var suche_teiler=function(n) {  
var a=Math.floor(Math.sqrt(n));  
while (n%a>0) a--;  
return [a,n/a];  
}  

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Teile n so in zwei Faktoren a und b, dass beide möglichst dicht bei √n liegen

Dann hätten die Teile so gut es geht die Form des Ganzen.

Wenn die Teile möglichst quadratisch sein sollen, wären a und b so zu wählen, dass deren Verhälnis möglichst nahe dem Seitenverhältnis des zu teilenden Rechtecks ist.

Qapla'

[mark.k]

Danke an alle für die Hilfe. Ich werde jetzt Gunnars Ansatz ausprobieren/durchdenken.