J'ai donc des éléments qui sont position: absolu et ensuite j'utilise Math.random () pour définir leur gauche: #random et top: #random position.
Cependant, une chose très étrange se produit. Il doit être complètement aléatoire, ils doivent donc être placés de manière complètement aléatoire. Cependant, maintes et maintes fois, ils sont placés très étroitement ensemble. Au lieu d'être dispersés.
cependant vous pouvez clairement voir, leurs positions sont en effet aléatoires:
Voici le code que j'utilise pour les générer:
const Clouds = function(props) {
const clouds = []
for (let i = 0; i < props.cloudNum; i++) {
const style = {
position: 'absolute',
height: 50 * props.cloudSize + 'px',
top: Math.random() * 100 + '%',
left: Math.random() * 100 + '%',
}
clouds.push(<Cloud key={i} style={style} />)
}
return <div className={props.side}>{clouds}</div>
}
y a-t-il un composant temporel pour Math.random, et parce qu'ils sont générés dans l'ordre, leurs nombres aléatoires sont similaires?
3 Réponses :
Il n'y a pas de composant temporel - il est simplement généré par le système. Voici un bon fil de discussion pour l'expliquer. L'algorithme aléatoire dépend du moteur JavaScript (il y a une réponse V8 dans ce thread) mais la fonction produit toujours un nombre à virgule flottante entre 0 et 1 inclus. C'est une coïncidence incroyablement grande que votre code ait donné deux nombres qui se rapprochent.
J'aurais dû dire, cela se produit tout le temps. voici un autre exemple: prntscr.com/niaw1v
En fait, bien qu'ils ressemblent à des nombres similaires, ils ne le sont pas (rappelez-vous que vous multipliez par 100), cela signifie que votre espace de nombres aléatoires va de 0 à 100 (puisque les décimales dans le dessin ont à peine de valeur, car est le cas que vous demandez).
Gardez à l'esprit que si votre espace est de 100 nuages générant seulement 13 nuages, il y a plus de 50% de probabilité que deux nuages occupent la même position par le problème d'anniversaire.
C'est une coïncidence si vous obtenez une valeur similaire. Essayez autant de fois que vous le souhaitez avec mon extrait de code pour le tester vous-même.
Notez que mes objets sont beaucoup plus petits que les vôtres, le fait de ne pas avoir d'éléments qui se chevauchent donne une meilleure impression d'aléatoire. IMHO, si vous générez des nuages (dépend des objectifs), il pourrait être préférable d'utiliser perlin noise
<div id="container"></div> <button onClick="generate()">Generate</button>
#container {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: red;
}
button {
position: absolute;
z-index: 999;
}
const container = document.getElementById('container');
const Clouds = function() {
for (let i = 0; i <10; i++) {
let myCloud = document.createElement("div");
myCloud.style.height = '15px';
myCloud.style.width = '15px';
myCloud.style.position = 'absolute';
myCloud.style.background = '#fff';
myCloud.style.border = '1px solid #ccc';
myCloud.style.left = Math.random()*100+'%';
myCloud.style.top = Math.random()*100+'%';
container.appendChild(myCloud);
}
}
function generate() {
container.innerHTML = '';
Clouds();
}
Je suis désolé, j'aurais dû mieux l'expliquer. cela se produit encore et encore. J'essaierai d'utiliser le bruit perlin. Merci! :)
Cependant, même avec votre extrait de code, il est très courant d'obtenir la plupart des objets sur un seul axe. C'est étranglé comme ceci: prntscr.com/niavcw
Ce n'est pas si courant que vous le pensez, et c'est moins fréquent lorsque vous augmentez la taille de votre conteneur. Ceci est lié au problème d'anniversaire ci-dessus. Si vous ne voulez pas de coordonnées similaires , il vaut mieux se tourner vers un algorithme de distribution que vers un générateur aléatoire.
Cela arrive-t-il toujours, ou juste parfois? Parce que les nombres vraiment aléatoires (pas que ceux générés par
Math.random ()soient vraiment aléatoires, mais ils devraient être assez bons dans la plupart des cas) "s'agglutineront" plus souvent que les gens s'attendent naïvement à faire des nombres «aléatoires». Mais si vous dites que les valeurs sont toujours dans une plage étroite, disons toujours 51.xxxx, plutôt que de 0 à 100, cela semble très étrange et je ne peux pas l'expliquer à partir de l'extrait de code donné.Aléatoire ne veut pas dire réparti également. Les données vraiment aléatoires devraient avoir des groupes de points rapprochés car chaque point devrait avoir une chance égale d'être choisi. Cela se produit-il autour d'une plage spécifique de points à chaque fois ou est-ce que cela change?
cryptoObj.getRandomValues () est l'alternative pour Math.random essayez ceci
dilbert.com/strip/2001-10-25
Je vois. Pour répondre à @RobinZigmond, non, ils ne sont pas toujours autour de 51. juste un nombre de fois étrangement élevé. mais vous soulevez un bon point. Je pourrais juste mal comprendre ce que signifie aléatoire