Muchas formas de utilizar Math.random () en JavaScript | Programar Plus

Math.random() es una API en JavaScript. Es una función que te da un número aleatorio. El número devuelto estará entre 0 (inclusive, como en, es posible que se devuelva un 0 real) y 1 (exclusivo, como en, no es posible que se devuelva un 1 real).

Math.random(); // returns a random number lower than 1

¡Esto es increíblemente útil para juegos, animaciones, datos aleatorios, arte generativo, generación de texto aleatorio y más! Se puede utilizar para desarrollo web, aplicaciones móviles, programas de computadora y videojuegos.

Siempre que necesitemos aleatorización en nuestro trabajo, ¡podemos usar esta función! Veamos ocho formas diferentes de usarlo. Estos ejemplos son todos de diferentes autores que están haciendo algo interesante con esta API.

Animación

Para generar un objeto y animarlo, usamos Math.random. Las líneas de neón forman hexágonos espontáneos, pero la aleatorización también está en sus chispas generativas.

Música generada por computadora

Este programa toma la melodía tradicional de “Auld Lang Syne” y toca notas aleatorias en piano. Se crea un paquete de cambios a partir de los datos de recuento y se genera un número aleatorio para seleccionar un valor. La octava también se selecciona al azar.

Mostrar una imagen aleatoria

Las imágenes se almacenan en una matriz. Se genera un número y se multiplica por el número de imágenes en la matriz a través de array.length. Entonces Math.floor redondea el valor a un número redondo y establece el src de la imagen en el HTML cuando se carga la página o se hace clic en el botón.

Color de fondo aleatorio

Aquí es donde ocurre la magia:

const random = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

La primera línea de código mezcla aleatoriamente la matriz y la segunda línea devuelve un número aleatorio entre 0 y 10. En el ejemplo de un fondo de color aleatorio, se puede establecer la gama de colores y detalles como matices, saturaciones y matices.

Para conocer otro método para generar un color hexadecimal aleatorio, consulte este artículo de Chris Coyer.

Arte generativo

En esta curva fractal morphing, Math.random se usa dos veces para establecer los colores del degradado y una vez más para el radio máximo de las curvas. ¡Esta es una excelente manera de construir una apariencia completamente nueva con cada iteración!

Generador de palabras

Reemplazamos el encabezado con una palabra seleccionada al azar de una matriz usando Math.random:

var word = words[Math.floor(Math.random() * words.length)] + "!";

Esto se parece mucho al ejemplo de una imagen aleatoria: ¡el tipo de práctica perfecta para principiantes!

Generador de claves API

¡Aquí hay un caso de uso práctico súper real para números aleatorios! La demostración genera 16 números aleatorios para crear un identificador único universal (UUID) que se puede utilizar como una clave que proporciona acceso a una API.

Codificación de texto

Algunas frases se almacenan y muestran en secuencia, separadas por una animación que parece mezclar las letras con caracteres aleatorios entre frases seleccionadas por Math.random.

Piedra Papel tijeras

En este clásico juego infantil de Rock Paper Scissors, Math.random se usa para generar un movimiento aleatorio para que la computadora juegue como el oponente. Elige entre los tres movimientos disponibles.

Generador de contraseñas seguras

Este generador de contraseñas usa Math.random para obtener una matriz de contraseñas llena de letras mayúsculas y minúsculas y luego agrega dígitos aleatorios a la contraseña generada. ¡Este es otro gran ejemplo práctico!

Un par de notas …

Es posible que tenga preguntas después de ver Math.random en estos ejemplos. Hay un par que veo aparecer a menudo …

Es Math.random() realmente al azar?

No exactamente. Math.random () devuelve un número pseudoaleatorio. Este algoritmo se denomina generador de números pseudoaleatorios (o PRNG). Esto significa que su aleatorización se puede reproducir en determinadas circunstancias.

La aleatorización se basa en el algoritmo xorshift128+, que probablemente se esté ejecutando en su navegador.

Entonces, es aleatorio.

¿Cómo maneja los valores repetidos?

Existen muchos métodos para lograr valores únicos sin repetición. Fisher-Yates es una excelente manera de evitar obtener el mismo número dos veces al mezclar la secuencia. Math.random seleccionará un valor de la matriz mezclada de una secuencia finita demostrada por el fragmento de código a continuación.

function shuffle (array) {
  var i = 0
    , j = 0
    , temp = null

  for (i = array.length - 1; i > 0; i -= 1) {
    j = Math.floor(Math.random() * (i + 1))
    temp = array[i]
    array[i] = array[j]
    array[j] = temp
  }
}

Es Math.random() lo mismo que WebCrypto?

Como ha visto en este artículo, Math.random () es increíble. Sin embargo, si trabaja con aplicaciones sensibles y necesita un método más seguro de aleatorización, le recomendaría WebCrypto. Las razones por las que puede querer utilizar WebCrypto incluyen códigos de verificación temporales, generación de contraseñas aleatorias, números de lotería aleatorios, etc.

Si necesita aleatorización con fines de ciberseguridad, criptografía o estadísticas, utilice la función window.crypto.getRandomValues y consulte la documentación de Mozilla sobre la API de WebCrypto.

(Visited 6 times, 1 visits today)