tel qu'est fait l'algorithme, déplacer le quadrant est plus compliqué et pose des problèmes de recouvrement...

en fait je suis parti sur l'idée de faire varier l'espace autour de chaque vignette.
j'ai mis à jour la démo avec : un espace fixe à 2 pixels de chaque côté de la vignette (h,b,d,g) et un espace variable aléatoire limité à 20px.
çà fait plus en vrac même avec que des carrés

à noter que l'espace aléatoire est mémorisé pour la vignette (pour les refresh de page).

grum a écrit:

tel qu'est fait l'algorithme, déplacer le quadrant est plus compliqué et pose des problèmes de recouvrement...

en fait je suis parti sur l'idée de faire varier l'espace autour de chaque vignette.
j'ai mis à jour la démo avec : un espace fixe à 2 pixels de chaque côté de la vignette (h,b,d,g) et un espace variable aléatoire limité à 20px.
çà fait plus en vrac même avec que des carrés

à noter que l'espace aléatoire est mémorisé pour la vignette (pour les refresh de page).

Chapeau bas!!!
8-)

rub a écrit:

... initialisé avec 4 quadrants initiaux... (bien entendu...)

c'est çà.
et le truc qui est bien, c'est le quadrant en lui même est toujours en coordonnées positives (0,+X,+Y) ce qui simplifie l'algorithme de placement des vignettes.
mais qu'on peut lui attribuer l'espace de coordonnées d'affichage que l'on veut.

Exemple :
figure 1 : l'origine de chaque quadrant est centre d'un carré de 800x800, les vignettes se placeront du centre du carré vers l'extérieur
figure 2 : l'origine de chaque quadrant est le bord d'un carré de 800x800, les vignettes se placeront des coins du carré vers sont centre
figure 3 : l'origine de chaque quadrant est le milieu du bord supérieur d'un carré de 800x800, les vignettes se placeront du milieu du bord haut vers le bas

[fig 1]
        +400|+400
            |
 quadrant 3 | quadrant 2
            |
+400       0|0       +400
------------+------------
+400       0|0       +400
            |
 quadrant 4 | quadrant 1
            |
        +400|+400

[fig 2]
0       +400|+400       0
            |
 quadrant 3 | quadrant 2
            |
+400        |        +400
------------+------------
+400        |        +400
            |
 quadrant 4 | quadrant 1
            |
0       +400|+400       0

[fig 3]
------------+------------
+400       0|0       +400
            |
 quadrant 2 | quadrant 1
            |
            |
            |
            |
        +800|+800

VDigital a écrit:

Bien joué !!! Même si cela ne suffit pas à tout régler.

Merci Grum. Stp, propose nous encore le décalage des quadrants.

ben qu'est-ce qu'il reste à régler ?
pourquoi préfères-tu jouer sur le décalage des quadrants ?

en fait, en faisant varier l'espace autour des vignettes, les quadrants sont implicitement crées avec une gestion des recouvrements qui est correcte.
la variation est la même à droite et gauche de l'image, je pourrais faire des variation différentes sur chaque bord de la vignette pour accentuer l'effet vrac.

VDigital a écrit:

Une fois les positions établies, il ne suffit pas de déplacer quelques vignettes dans l'espace vide laissé (uniquement 3/4 vignettes) sur les deux axes majeurs.
Je ferai un screenshot dans les prochains jours si je ne suis pas clair.

j'ai du mal à voir.
en gros, l'idée serait de placer les vignettes avec un espace fixe, et d'essayer ensuite de décaler les vignettes dans les espaces laissés ?

J'ai bien compris ceci:

[fig 1]
        +400|+400
            |
 quadrant 3 | quadrant 2
            |
+400       0|0       +400
------------+------------
+400       0|0       +400
            |
 quadrant 4 | quadrant 1
            |
        +400|+400

Je propose maintenant ceci, je pense assez simple pour un expert comme toi:
Imaginons uniquement des vignettes en 96x96 pour simplifier mais pareil pour tout.
Avant de poser la vignette, je décide de chercher une place pour une 102x96.
Une fois la place trouvée, aléatoirement je cadre la vignette à droite ou à gauche mais c'est bien 102x96 qui sera bloqué.
La vignette suivante je ne chercherai plus pour une 102x96 mais pour une 96x102 et le cadrage interne sera aléatoirement en hauteur.
Ainsi aucun risque de chevauchement, mais les lignes apparaissent brisées.
Enfin, je privéligierai un tri des images avant par taille décroissante et id croissant en standard.
Ton avis?
8-)

Wahoo ! Bravo, Grum
Je découvre ton travail et c'est super !
Mais je n'ai pas bien compris pourquoi on ne pouvait pas avoir un espace fixe entre les vignettes

Ben ... elles ne sont pas alignées, mais elles ne sont pas désordonnées non plus ... en fait, ça fait disposition non imparfaite, non maitrisée.

Dans un cas pareil (bien qu'il n'y aura qu'une minorité qui n'auront QUE des photos carrées, je pense), je verrais plutôt un placement en quinconce : à 8px du bord et centrée par rapport aux 2 voisines => donc, en l'occurence, une figure géométrique parfaite.

Sinon, dans les autres cas, avec une règle du style : placement à 8 px de la voisine, centrée par rapport au bord limitrophe, sauf s'il y a alignement exact des 2 bords opposés de la vignette avec ceux de la vignette voisine, dans ce cas, décalage d'une valeur de la moitié.

Cela serait-il possible ?