Placements aleatoires images

**Charal72** · 03/05/2019, 18h00

Bonjour à tous,

Je débute..

J'aimerai afficher sur une surface determinée de mon écran, un mur de photos (en vrac, style post it..), chacune avec une position aleatoire horizontale et verticale. (et pour faciliter la chose, les photos ont une taille différentes)
Pour cela, il faut venir chercher les photos et les positionner de façon alétaoire..
Mes problèmes:

- il me prends des photos en double (pourtant j'ai essayé de les mettre à part une fois choisie...)
- et bien sur, pb principal: elles se chevauchent... comment l'éviter?

Pouvez vous m'aider ?
D'avance merci...

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<style>
div {
  position: absolute;
}
#case {width:auto;height:auto;}
</style>
</head>
<body>
<div id="case0"></div>
<div id="case1"></div>
<div id="case2"></div>
<div id="case3"></div>
<div id="case4"></div>
<div id="case5"></div>
<div id="case6"></div>
<div id="case7"></div>
 
 
<script>
var chaine=[];
var tab=["bateau0","bateau1","bateau2","bateau3","bateau4","bateau5","bateau6","bateau7"];
                for (var i=0;i<8;i++)
                {
var imgA = document.createElement("img");
var b = Math.floor(Math.random()*8); // random entre 0 et 7
while(chaine.indexOf(b)>-1) {b = Math.floor(Math.random()*8);}                  
var c=tab[b];
imgA.src = "img/" + c + ".png";
var randomleft = Math.floor((Math.random() * 500) + 1); // random entre 1 et 500
var randomtop = Math.floor((Math.random() * 500) + 1); // random entre 1 et 500
document.getElementById('case' + i).style.top= randomtop + 'px';
document.getElementById('case' + i).style.left= randomleft + 'px';
document.getElementById('case' + i).appendChild(imgA);
chaine.push[b];
}
</script>

**melka one** · 04/05/2019, 09h37

jour

il faut supprimer l'index de tableau pour etre sur de ne pas afficher la meme image

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var chaine=[];
var tab=["bateau0","bateau1","bateau2","bateau3","bateau4","bateau5","bateau6","bateau7"];
                for (var i=0;i<8;i++)
                {
var imgA = document.createElement("img");
var b = Math.floor(Math.random()*8); // random entre 0 et 7
while(chaine.indexOf(b)>-1) {b = Math.floor(Math.random()*8);}                  
var c=tab[b];
 
tab.splice(b,1)
 
imgA.src = "img/" + c + ".png";
var randomleft = Math.floor((Math.random() * 500) + 1); // random entre 1 et 500
var randomtop = Math.floor((Math.random() * 500) + 1); // random entre 1 et 500
document.getElementById('case' + i).style.top= randomtop + 'px';
document.getElementById('case' + i).style.left= randomleft + 'px';
document.getElementById('case' + i).appendChild(imgA);
chaine.push[b];
}

**Charal72** · 04/05/2019, 09h57

Ca ne fonctionne pas!
Je ne comprends pas..
tab.splice(b,1); remplace à l'index1 la valeur b.. ici, bateau1 sera remplacé par b?? pourquoi? maintenant j'ai des icones a la place de certaines images..il ne trouve pas img/"b".png..

**danielhagnoul** · 04/05/2019, 11h40

Envoyé par Charal72

[...] Pour cela, il faut venir chercher les photos et les positionner de façon alétaoire.. [...]

Pour appeler les liens des photos dans un ordre aléatoire, il suffit de commencer par créer un Array contenant les liens vers les photos et ensuite de mélanger (brouillé) ces liens de manière aléatoire avec ma fonction kBrouilleArray qui est incluse dans mon fichier dvjhUtilities-1.8.5.js (voir mon bloc : https://www.developpez.net/forums/bl...ties-1-8-5-js/)

Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
 
    // début code du test
 
    const arLiensImages = [
        'https://danielhagnoul.developpez.com/images/boule1.png', 
        'https://danielhagnoul.developpez.com/images/boule2.png',
        'https://danielhagnoul.developpez.com/images/boule3.png',
        'https://danielhagnoul.developpez.com/images/boule4.png',
        'https://danielhagnoul.developpez.com/images/boule5.png',
        'https://danielhagnoul.developpez.com/images/boule6.png',
        'https://danielhagnoul.developpez.com/images/boule7.png',
        'https://danielhagnoul.developpez.com/images/boule8.png',
    ];
 
 
    // kBrouilleArray se trouve dans mon fichier dvjhUtilities, 
    // à inclure comme ci-dessous dans le HEAD de la page web
    /*
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/fr.js"></script>
    <script src="https://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.8.5.js"></script>
    */
 
    // mélanger les liens
    const arTrie = kBrouilleArray(arLiensImages);
 
    console.log(arTrie);
 
    /* arTrie contiendra, par exemple :
    0: "https://danielhagnoul.developpez.com/images/boule2.png"
    1: "https://danielhagnoul.developpez.com/images/boule1.png"
    2: "https://danielhagnoul.developpez.com/images/boule6.png"
    3: "https://danielhagnoul.developpez.com/images/boule3.png"
    4: "https://danielhagnoul.developpez.com/images/boule4.png"
    5: "https://danielhagnoul.developpez.com/images/boule7.png"
    6: "https://danielhagnoul.developpez.com/images/boule5.png"
    7: "https://danielhagnoul.developpez.com/images/boule8.png"
    */
 
    // votre code doit simplement appeler les liens de l'Array arTrie
 
    // fin code du test
 
}, {
    capture: false,
    passive: true,
    once: false
});

**CosmoKnacki** · 04/05/2019, 15h27

Est-ce que le "tableau" sur lequel tu veux mettre tes post-it a une taille fixe?

**Charal72** · 04/05/2019, 15h39

Hello Cosmo

Content de t'entendre !
Je souhaite placer ces photos sur une partie de mon écran (oui : taille fixe à définir..)

C'est ok.. J'ai trouvé un code qui les place comme je le veux de façon aléatoire..
maintenant, le chevauchement... Tu as certainement une idée ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
var tab=["bateau0","bateau1","bateau2","bateau3","bateau4","bateau5","bateau6","bateau7"];
var chai =[];
    for (var i=0;i<tab.length;i++) {
var table = tab.length;
var imgA = document.createElement("img");
var b = Math.floor(Math.random()*table); // random entre 0 et ta.length
var c=tab[b];
while(chai.indexOf(c)>=0) {b = Math.floor(Math.random()*table);var c=tab[b];} 
imgA.src = "img/" + c + ".png";
var randomleft = Math.floor((Math.random() * 500) + 1); // random entre 1 et 500
var randomtop = Math.floor((Math.random() * 500) + 1); // random entre 1 et 500
document.getElementById('case' + i).style.top= randomtop + 'px';
document.getElementById('case' + i).style.left= randomleft + 'px';
document.getElementById('case' + i).appendChild(imgA);
chai.push(c);

**Loralina** · 04/05/2019, 16h18

Bonjour,

Envoyé par Charal72

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
while(chai.indexOf(c)>=0) {b = Math.floor(Math.random()*table);var c=tab[b];}

Ce genre de boucles est à éviter, cela d'autant plus que le tableau est grand, ce qui n'est pas le cas ici, certes, mais autant prendre les bonnes habitudes.

danielhagnoul a raison, la meilleure solution est le mélange basé sur les permutations aléatoires.
La complexité temporelle est faible et fixe, et, quand l'algorithme est bien fait, chaque combinaison a la même chance.

Sinon, je ne vois pas trop l'intérêt de cette sélection aléatoire préliminaire dans la mesure où les coordonnées sont déterminées aléatoirement.
Cela n'apporte pas d'aléatoire supplémentaire.

maintenant, le chevauchement... Tu as certainement une idée ?

Il y a plusieurs approches.
Si on s'y prend de manière trop aléatoire, le risque est parfois d'arriver dans une impasse (par exemple il pourrait ne plus rester de place pour la dernière image selon la disposition des autres).
Une méthode pas trop risquée si les dimensions des images sont proches :
- Placer aléatoirement les images sur une grille. A ce stade, l'aléatoire est léger. Les cases de la grille doivent être suffisamment grandes pour pouvoir contenir n'importe quelle image.
- Faire varier ensuite aléatoirement les coordonnées des images une à une en fonction de la place disponible autour d'elles (il faut tenir compte de la taille du cadre et des positions des autres images).
Ainsi, il n'y aura pas de chevauchement et je pense que le résultat sera pas mal aléatoire (mais pas nécessairement très homogène).

**melka one** · 04/05/2019, 20h17

je rejoint loralina quand a la boucle while qui me semble complexe pour rien.

teste ce code qui peut etre une base et qui affiche des mot aléatoirement sans répétition toujour sur le principe de retirer l'index du tableau choisi aléatoirement

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
 
<script>
 
tb_mot=["Abeille","Baleine","Cachalot","Cerf","Chat","Chèvre","Chien","Cigale","Coq","Cygne","Dauphin"]
 
function change(){
 
var longueur=tb_mot.length
 
        for(var i= 0; i< longueur; i++){
 
                var obja=document.getElementById('vue');
 
                if(tb_mot.length==1){
                
                        var txt=document.createTextNode(tb_mot[0]+" | ")
                        obja.appendChild(txt)
                }
                else{
                        var aleatoire=Math.round(Math.random()*(tb_mot.length-1))
                        var txt=document.createTextNode(tb_mot[aleatoire]+" | ")
                        obja.appendChild(txt)
                        tb_mot.splice(aleatoire,1)
                }
        
        }
}
 
addEventListener("load",change,false)
</script>
</head>
<body>
<span id='vue'></span>
 
</body>
</html>

**Loralina** · 06/05/2019, 23h54

Bonsoir,

Envoyé par melka one

je rejoint loralina quand a la boucle while qui me semble complexe pour rien.

Pour préciser ce que je reproche à la boucle de Charal72, c'est le fait de boucler tant que Math.random() ne donne pas une bonne valeur.
En théorie, cela pourrait boucler à l'infini.
Dans la pratique, il n'en est rien, heureusement.
Cependant, plus le tableau est grand, plus vers la fin, cela risque de boucler longtemps avant de trouver une bonne valeur.

La méthode avec splice est valable.
Je ferai malgré tout une critique : splice est coûteux.

Une imperfection ici : var aleatoire=Math.round(Math.random()*(tb_mot.length-1)).
Plutôt : var aleatoire=Math.floor(Math.random()*tb_mot.length).
Cela afin que les combinaisons aient les mêmes probabilités.

Il existe également une autre méthode qui consiste à faire un tri aléatoire :
Je la déconseille, car toutes les combinaisons n'ont pas la même chance.
Je viens encore de le vérifier.

J'ai fait un récapitulatif des quatre méthodes les plus couramment employées :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<script>
function shuffle_PAS_IDEAL(tableau)
	{
	var i;
	var j;
	var index;
	var tableau2;
 
	index={};
	tableau2=[];
	i=tableau.length;
	while(--i>=0)
		{
		while(index[j=Math.floor(Math.random()*tableau.length)]===true){}
		index[j]=true;
		tableau2[i]=tableau[j];
		}
	return tableau2;
	}
function shuffle_DECONSEILLE(tableau)
	{
	return tableau.sort(function(){return 0.5-Math.random()});
	}
function shuffle_ACCEPTABLE(tableau)
	{
	var i;
	var j;
	var tableau2;
 
	tableau2=[];
	i=tableau.length;
	while(--i>=0)
		{
		tableau2[i]=tableau[j=Math.floor(Math.random()*(i+1))];
		tableau.splice(j,1);
		}
	return tableau2;
	}
function shuffle_TROP_BIEN(tableau)
	{
	var i;
	var j;
	var element;
 
	i=tableau.length;
	while(i>1)
		{
		j=Math.floor(Math.random()*i--);
		element=tableau[i];
		tableau[i]=tableau[j];
		tableau[j]=element;
		}
	return tableau;
	}
function test(shuffle)
	{
	var i;
	var tableau;
	var verification;
 
	verification={};
	i=10000;
	while(--i>=0)
		{
		tableau=shuffle(["A","B","C"]);
		verification[tableau]=verification[tableau]===undefined?1:verification[tableau]+1;
		}
	console.log(verification);
	}
test(shuffle_PAS_IDEAL); //performance : risqué, toutes les combinaisons possibles : oui, probabilités identiques : oui.
test(shuffle_DECONSEILLE); //performance : moyen, toutes les combinaisons possibles : oui, probabilités identiques : non.
test(shuffle_ACCEPTABLE); //performance : moyen, toutes les combinaisons possibles : oui, probabilités identiques : oui.
test(shuffle_TROP_BIEN); //performance : bien, toutes les combinaisons possibles : oui, probabilités identiques : oui.
</script>

Dans certains cas, je n'ai pas modifié le tableau d'origine, on peut adapter en fonction de ses besoins.

N'hésitez pas à signaler toute erreur.
De même, si vous connaissez une variante de la fonction de comparaison de la version basée sur le tri qui corrige le problème des probabilités, n'hésitez pas à la donner.

**Watilin** · 05/05/2019, 22h09

Je rejoins Loralina là-dessus :

Envoyé par Loralina

Si on s'y prend de manière trop aléatoire, le risque est parfois d'arriver dans une impasse […].
Une méthode pas trop risquée si les dimensions des images sont proches :
- Placer aléatoirement les images sur une grille. […]
Ainsi, il n'y aura pas de chevauchement et je pense que le résultat sera pas mal aléatoire (mais pas nécessairement très homogène).

Vouloir remplir un espace avec des objets de dimensions arbitraires, c’est analogue au problème du sac à dos. Et mauvaise nouvelle : c’est un problème NP-complet, ça veut dire en gros qu’il n’y a pas d’autre façon de faire que d’essayer toutes les possibilités pour savoir laquelle est la meilleure. C’est terriblement inefficace, car le nombre de possibilités croît exponentiellement avec le nombre d’images. (On parle parfois d’explosion combinatoire.)

Donc je suis d’accord avec Loralina sur l’idée de la grille. Pour éviter les espaces irréguliers entre les images, tu peux « recadrer » tes images, par exemple en les plaçant dans des divs de dimensions fixes avec overflow: hidden.

Invité · 06/05/2019, 09h27

Bonjour,

as-tu testé :

?

**Charal72** · 06/05/2019, 22h36

Envoyé par Loralina

Sinon, je ne vois pas trop l'intérêt de cette sélection aléatoire préliminaire dans la mesure où les coordonnées sont déterminées aléatoirement.
Cela n'apporte pas d'aléatoire supplémentaire.

Effectivement.
Merci pour votre aide..je vais y reflechir..

Placements aleatoires images

JavaScript

Vue hybride

Discussions similaires

Partager

Partager