Algorithmus für zufällige Positionierung

[robert]

hi leute,
ich bin auf der suche nach einem algorithmus um beispielsweise
20 rechteckige Divs im browserfenster zu positionieren - zufällig.

dabei dürfen diese sich nicht überschneiden und haben auch verschiedene
größen. gibt es hierfür irgendwo lösungen? oder hat evtl. jemand
einen kleinen denkanstoß parat?


vielen dank

[mildesign]

Mein Ansatz wäre folgender

Divs in ein Array pushen, dieses dann "mischen" und danach die Divs der Reihen nach hintereinander positionieren.

Also nicht die Position auf dem Bildschirm zufällig wählen sondern die Position im Array dadurch ersparst du dir unnötige Kollisionsabfragen wenn sich die Größe nicht all zu stark unterscheidet.

[robert]

Zitat von mildesign

Mein Ansatz wäre folgender

Divs in ein Array pushen, dieses dann "mischen" und danach die Divs der Reihen nach hintereinander positionieren.

Also nicht die Position auf dem Bildschirm zufällig wählen sondern die Position im Array dadurch ersparst du dir unnötige Kollisionsabfragen wenn sich die Größe nicht all zu stark unterscheidet.

ja aber die größe kann sich sehr unterscheiden. und wenn ich das mache hab ich dadurch ja keine "random" position. ich versuchs gerade mit zwei for-schleifen aber entweder schreib ich was falsch oder das funktioniert so nicht g.

[hgseib]

H.G.Seib -> Verteilen: Sich selbst verteilende Objekte.

H.G.Seib -> Position: haus_und_klaus: Objekte ohne Üderdeckung auf der Bühne positionieren

[robert]

hi hgseib. das hat mir leider nicht wirklich weitergeholfen, da ich in javascript
keinen hittest habe. ich poste jetzt mal meinen code. von der logik her
müsste dieser doch eigentlich funktionieren oder? er tuts aber nicht

die arrays sind alle so groß, wieviele divs es gibt. xP ist die xPosition, yP ist die yPosition, xPRT ist
die xPositionRightBottom, also das rechte obere eck, und so weiter.

ich versuche im prinzip immer ein objekt mit allen anderen zu vergleichen und schaue, ob eine der
ecken innerhalb des anderen objekts ist. wenn ja, gib ihm ne neue position. aber irgendwie funktioniert
es nicht. es überlappen sich immernoch rechtecke.

for(var i = 0; i<xP.length; i++) {	
				for(var k = 0; k<xP.length; k++) {
					if(i == k) {
						//alert(Math.random());
					} else {
						while((xP[i]>xP[k] && yP[i]>yP[k] && xP[i]<xPRB[k] && yP[i]<yPRB[k]) || (xPRT[i]<xPRT[k] && yPRT[i]>yPRT[k] && xPRT[i]>xP[k] && yPRT[i]<yPRB[k]) || (xPRB[i]<xPRB[k] && yPRB[i]<yPRB[k] && xPRB[i]>xP[k] && yPRB[i]>yP[i]) || (xPLB[i]>xPLB[k] && yPLB[i]<yPLB[k] && xPLB[i]<xPRB[k] && yPLB[i]>yP[k])) {
							//alert("i: "+i+" k: "+k+" xP: "+xP[i]+" > xP2: "+xP[k]+" & yP: "+yP[i]+"  > yP2: "+yP[k]);
							xP[i] = GetRandom(0, window.innerWidth - widthArray[i]-2);
							yP[i] = GetRandom(0, window.innerHeight - heightArray[i]-2);

							xPRT[i] = xP[i] + widthArray[i];
							yPRT[i] = yP[i];

							xPRB[i] = xP[i]+ widthArray[i];
							yPRB[i] = yP[i]+ heightArray[i];

							xPLB[i] = xP[i];
							yPLB[i] = yP[i] + heightArray[i];
							count++;
							
						};
					}
				}
			}

nach dieser berechnung werden dann die divs platziert:

for (var i = 0; i < dA.length; i++){
				$(dA[i]).css({'left': xP[i], 'top': yP[i]});
				$(dA[i]).hover(
					function() {
						$(this).removeClass().addClass("zoom1");
					},
					function() {
						$(this).removeClass().addClass("zoom0");
					});
			};

irgendwelche ideen? ich komm einfach nich vorran, schrecklich, echt g.

[hgseib]

Zitat von robert

das hat mir leider nicht wirklich weitergeholfen, da ich in javascript keinen hittest habe

du kannst auf rechtecke oder kreise testen. also rein numerisch.

[robert]

Zitat von hgseib

du kannst auf rechtecke oder kreise testen. also rein numerisch.

ja klar, indem ich die eckpunkte der formen berechne. aber scheinbar
will das so recht ja nciht funktionieren. und hittest gibts ja wie gesagt
nicht in javascript.

[mildesign]

ich bin nicht mehr so fit in JS, aber das scheint jemand was gebastelt zu haben.

Geral.Hit Test - JSFromHell.com: JavaScript Repository