[JS] posizionamento casuale, controllo sovrapposizioni

[angykiss]

Ciao a tutti, spiego velocemente.
Ho una serie di immagini da posizionare a caso dentro ad una pagina HTML.
Ho quindi una funzione che genera coordinate X e Y in modo random e poi controlla, per le immagini già posizionate, che non si sovrappongano.
Però il controllo non funziona, e io non risco davvero a capire perchè

<script>
function PosizionaRandomTutteLeLapidine()
{
var xTd = [];
var yTd = [];
// Il numero massimo per la X e' la largezza della finestra.
// Anche della Y adesso che ci penso
for (i=0; i<aTd.length; i++)
{
randomX = 0;
randomY = 0;
ok = 0;
do
{
randomX = Math.round((Math.random() * (window.document.body.offsetWidth-200)) -1);
randomY = Math.round((Math.random() * (window.document.body.offsetHeight-236)) -1);
ok = 1;
for (j=0; j<xTd.length; j++)
{// 184 e 236 sono larghezza e altezza dell'immagine
if ((randomX >= xTd[j] && randomX <= (xTd[j]+184)) && (randomY >= yTd[j] && randomY <= (yTd[j]+236)))
{
ok = 0;
alert(i + " si sovrappone a " + j)
}
}
}
while (ok == 0)
xTd.push(randomX);
yTd.push(randomY);
}
for (i=0; i<aTd.length; i++)
{
document.getElementById(aTd[i]).style.position = "absolute"
document.getElementById(aTd[i]).style.top = yTd[i];
document.getElementById(aTd[i]).style.left = xTd[i];
}
}
</script>

[angykiss]

:quote:

[standard]

secondo me nel corpo di questo for:

for (j=0; j<xTd.length; j++)

non ci entri mai...questi sono array locali che non sono mai riempiti..o sbaglio?

[angykiss]

nono entrarcici entra correttamente, perchè in ogni giro del primo FOR alla fine faccio

xTd.push(randomX);
yTd.push(randomY);

[standard]

Originariamente inviato da angykiss
nono entrarcici entra correttamente, perchè in ogni giro del primo FOR alla fine faccio

xTd.push(randomX);
yTd.push(randomY);

giusto..mi ero perso...beh..ricontrollo =)

[Mich_]

Non so se e` questo il problema:
randomX = Math.round((Math.random() * (window.document.body.offsetWidth-200)) -1);
In questa espressione puoi avere come risultato -1.
Prova a riconsiderarla cosi`:
randomX = Math.floor(Math.random() * (window.document.body.offsetWidth-200));
(lo stesso per il verticale).

Tra l'altro non vale la pena ricalcolare ogni volta la larghezza e l'altezza: sarebbe meglio, a mio parere, calcolare tali valori una volta per tutte fuori dalla funzione, salvandoli in varibili.

Ciao
Michele

[angykiss]

ricalcolare?

nono non li ricalcolo.
Io faccio questa cosa:

<script>
function PosizionaRandomTutteLeLapidine()
{
var xTd = [];
var yTd = [];
// Il numero massimo per la X e' la largezza della finestra.
// Anche della Y adesso che ci penso
for (i=0; i<aTd.length; i++)
{ // PER OGNI IMMAGINE
randomX = 0;
randomY = 0;
ok = 0;
do
{
// CALCOLO X E Y IN MODO CASUALE
randomX = Math.round((Math.random() * (window.document.body.offsetWidth-200)) -1);
randomY = Math.round((Math.random() * (window.document.body.offsetHeight-236)) -1);
ok = 1;
for (j=0; j<xTd.length; j++)
// CONTROLLO CHE X E Y NON SI SOVRAPPONGANO A TUTTE LE ALTRE IMMAGINI
{// 184 e 236 sono larghezza e altezza dell'immagine
if ((randomX >= xTd[j] && randomX <= (xTd[j]+184)) && (randomY >= yTd[j] && randomY <= (yTd[j]+236)))
{
ok = 0;
alert(i + " si sovrappone a " + j)
}
}
}
// SE SI SOVRAPPONGONO, RIPARTO DALLA GENERAZIONE RANDOM
while (ok == 0)
// UNA VOLTA USCITA, LI METTOIN UN VETTORE
xTd.push(randomX);
yTd.push(randomY);
}
for (i=0; i<aTd.length; i++)
{
// ALLA FINE DI TUTTO, POSIZIONO OGNI IMMAGINE
document.getElementById(aTd[i]).style.position = "absolute"
document.getElementById(aTd[i]).style.top = yTd[i];
document.getElementById(aTd[i]).style.left = xTd[i];
}
}
</script>

[standard]

a me pare corretto, magari metterei un break per non fare cose inutili, tipo:

alert(i + " si sovrappone a " + j)
break;

[Mich_]

(window.document.body.offsetWidth-200)

Questo e` un calcolo (deve trovare l'oggetto e sottrarre 200 dentro ogni loop:

Se ci fosse una variabile di questo tipo
ow = window.document.body.offsetWidth-200;

non occorrerebbe che ad ogni ciclo andasse a ricercare la posizione dell'oggetto body e andasse a operare la sottrazione.


E ribadisco che randomX puo` diventre negativo (e non so cosa succede con un posizionamento negativo):
infatti se Math.random() ritorna un valore molto piccolo, tale che anche moltiplicato per quella variabile resta inferiore a 0.5, l'arrotondamento lo porta a zero e togliendo uno risulta negativo.

Ricordo che Math.random ritorna un numero N:
0 <= N < 1

Ciao
Michele

[angykiss]

anche a me sembra corretto
ma non funziona!

http://angymemories.splinder.it