Funciones matemáticas y números aleatorios en JavaScript

Aquí están convertidas las imágenes a png:
https://raw.githubusercontent.com/tito026/platzi/master/progbasica/villaPlatzi/tile.png
https://raw.githubusercontent.com/tito026/platzi/master/progbasica/villaPlatzi/pollo.png
https://raw.githubusercontent.com/tito026/platzi/master/progbasica/villaPlatzi/vaca.png
https://raw.githubusercontent.com/tito026/platzi/master/progbasica/villaPlatzi/cerdo.png

✨ Math.random() es una función que retorna un punto decimal, un número aleatorio dentro el rango [0, 1]. El rango no puede ser elegido o cambiado por el usuario.

Es muchisimo más facil hacer esto en Python, sin embargo me propuse primero terminar el curso de Programación Básica antes de continuar aprendiendo Python.

Una sugerencia para los que no han comprado Platzi Premium y quieren aprender Python: Lean el libro “Automate the boring stuff with Python”, les enseña desde cero como hacer codigo en Python.

Espero que les haya servido la sugerencia!(:

Hola chicos, veo que algunos tienen problemas con las imagenes, en primer lugar yo no soy un experto en usar photoshop o algun otro editor de fotos pero me tome el tiempo de generar las imagenes de los animales les un link para que lo descarguen
https://www.mediafire.com/file/bjgwx4yiuh0ci1s/ANIMALES_PNG.zip/file

Una formula alternativa para generar números aleatorios:

Math.round(Math.random() * (max - min) + min)

A diferencia del método floor, el método round redondea números con criterio matemático, es decir redondea el numero al siguiente entero mayor si el numero después del decimal es mayor o igual a cinco. Seguirá el patrón contrario si es menor a cinco.

Me puse a pensar cómo funcionaba la fórmula de random con máximos y mínimos. Y trabajé por este mini proyecto, si pueden indicarme si estoy en lo cierto lo valoraré mucho! ❤️

Higthlights

1. Tile así se denomina la parte gráfica sobre la que se hace un video juego.
2. Los números aleatorios en Javascript son decimales.
3. Normalmente se usa parseInt() para convertir cualquier número en entero pero hay otras alternativas para tener mayor control:

ceil(); que nos permite redondear por encima del número.
floor(); que nos permite redondear por debajo del número.

1. Math() es un método estático que tiene un conjunto de funciones por dentro. Una de ella es radom que se escribe de la siguiente manera: Math.random();

2. La función Math,random(); retorna valores entre (0.000~1 y el 0.999~9)

No sé si alguien más lo hizo en comentarios, pero como se me descargaban en formato .webp las imágenes de cerdo y pollo tuve que utilizar el siguiente convertidor:

https://imagen.online-convert.com/es/convertir/webp-a-png

Dejo las imágenes también por si las necesitan.

Otra función de Math que se puede usar para redondear un numero correctamente, es “Math.round”, de esta manera si los decimales son mayores de cero punto cinco, el resultado es el numero mayor, viceversa, si es menor de cero punto 5 el numero sera el menor.

24:14 Cuando coloca

z = aleatorio(5,0);

Freddy dice que funciona, pero no es así. Si notan sólo se encuentran números entre 1 y 4. Esto es debido a la función floor y que cambia un signo en nuestra función. Cuando aplicamos floor a un número negativo funciona al revés que con un número positivo: floor( 0.1 ) = 0, y floor ( -0.1 ) = -1. Prueben lo siguiente en la consola:

Math.floor(0.1);
Math.floor(-0.1);

Una solución es usar ceil, y modificar la ecuación ligeramente:

resultado = Math.ceil(Math.random()* (maxi - mini - 1)) + mini;

Pero tendremos problemas nuevamente si colocamos primero el mínimo y luego el máximo.
Una solución es aplicar cada ecuación cuando se de cada caso

function aleatorio (mini,maxi)
{
  var resultado;
  if( mini < maxi )
  {
    resultado = Math.floor(Math.random()* (maxi - mini + 1)) + mini;
  }
  else
  {
    resultado = Math.ceil(Math.random()* (maxi - mini - 1)) + mini;
  }
  return resultado;
}

Pero estamos escribiendo unas líneas de más, ya que basta con intercambiar maxi y mini.

function aleatorio (mini,maxi)
{
  var resultado;
  if( maxi < mini )
  {
    var temporal = maxi;
    maxi = mini;
    mini = temporal;
  }

  resultado = Math.floor(Math.random()* (maxi - mini + 1)) + mini;

  return resultado;
}

Ambos códigos solucionan el problema, usa el que más te sea fácil de entender.

Platzi puede destruir universidades jajaja

Mi explicación de porqué el algoritmo funciona aún cuando se invierten los valores es la siguiente:
Cuando se calcula

max - min + 1

Y el máximo es menor al mínimo, el resultado es negativo o cero.
Bueno, después de multiplicar este resultado por el número aleatorio, y ser redondeado, el resultado también es negativo. Pero, al final se le suma el mínimo, lo cual da como resultado el inverso aditivo de este número (el mismo número, pero con signo distinto).

esto se ve mejor si hacemos el cálculo paso a paso:
(consideremos que nuestro número aleatorio es 0.310)

Tenemos que

min = 9
max = 1

floor(0.310 * (1 - 9 + 1)) + 9
floor(0.310 * (-7)) + 9
floor(-2.17) + 9
-2 + 9
7

el enlace de descarga me daba la imagen en un formato raro, tuve que usar un convertidor de formato aquí les dejo las imágenes por si a alguien le pasa lo mismo.

Veo que muchos hemos tenido problemas con la descargar de imágenes, aparentemente la solución es:

En al área de Archivos y Enlaces, darle clic derecho a la flechita de descargar. Después seleccionar “Guardar enlace como…” y eso nos permitirá guardar el archivo con su extensión correcta.

Para los que tienen problema con descargar las imagenes

Hagan uso de este conversor, les ahorrara tiempo y estress.
https://imagen.online-convert.com/es/convertir/webp-a-png

Apuntes de clase:
ParseInt() : convierte un número Float a Integer.
Math() : Es una clase estatica que contiene una coleccion de funciones especiales que nos permiten hacer operaciones matematicas complejas.
Math.ceil : Devuelve el numero entero por debajo de los decimales (Ej: Math.ceil(3,7)=4).
Math.floor: Devuelve el numero entero por debajo de los decimales. (Ej: Math.floor(3,7)=3).
Math.random(): Devuelve un numero aleatorio de 0 a 0.9999…
La sentencia return finaliza la ejecución de la función y especifica un valor para ser devuelto a quien llama a la función

Quisiera tener esa habilidad mental que tiene Fredy, jejeje

document.addEventListener("mousedown",dibujarMouse);
document.addEventListener("mouseup",dibujarMouse);
var cuadrito = document.getElementById("mouse_dibujo");//elemento que nos trae un atributo de java srip a travez de su id
var papel = cuadrito.getContext("2d");
var x1, y1, x2, y2;
function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal, lienzo)
{
  lienzo.beginPath();//función para arrancar trazo
  lienzo.strokeStyle = color;//atributo del objeto lienzo color de lineazo.
  lienzo.lineWidth=3;
  lienzo.moveTo(xinicial,yinicial);//moviendo de donde inicia la linea
  lienzo.lineTo(xfinal,yfinal);//hasta donde llega la línea
  lienzo.stroke();//dibujar la línea
  lienzo.closePath();//cerrar el trazo
}


function dibujarMouse(evento)
{
  colorcito="pink";
  console.log(evento);
  var tipo=evento.type;

   console.log(tipo);

   x1=evento.layerX;
   y1=evento.layerY;

 if (tipo=="mousedown")
 {
   x2=x1;
   y2=y1;
 }

 if (tipo=="mouseup")
 {
   dibujarLinea(colorcito,x1,y1,x2,y2,papel);
}
}

Aquí está mi ejercicio. Le agregué una línea de document.write adicional para que no terminara en coma (,) sino en un punto (.).
.
¿Qué les parece?
.

var z;

for(var i=0; i<9; i++)
{
  z = aleatorio(10, 20);
  document.write(z + ", ")
}

document.write(z + ".");

function aleatorio (min, maxi)
{
  var resultado;
  resultado = Math.floor(Math.random() * (maxi - min + 1)) + min;
  return resultado;
}

.
Esto es emocionante, aunque la plataforma últimamente no me deja estudiar mucho porque no carga.

yo, al terminar esta clase:

Hola, recuerden que math.random devuelve dentro del objeto un número entre 0 y 1, pero nunca va a ser 0 ni 1. Puede ser 0.000001, 0.999999, 0.0000000000001 y así sucesivamente, pero nunca llega a cero ni a uno.

Un ejemplo (-5, 5)
donde min = -5 y maxi = 5.

Entonces:
Math.floor(Math.random() * (5 - (-5) + 1)) + min;
en JS se resuelve el paréntesis primero y matemáticamente sería algo así:

Math.floor(Math.random() * (5 - (-5) + 1)) + min;
Math.floor(Math.random() * (10 + 1)) + min;
Math.floor(Math.random() * 11 + min;
Ahora math.random * 11 , recuerden nuevamente que math.random devuelve un número aleatorio entre 0 y 1 pero que nunca llega a 0 ni a 1.

Teniendo en cuenta lo anterior imaginen que math.random devuelve los siguientes números:
0.0001 y 0.9999. Hagamos la operación:

con Math.random = 0.0001:
Math.floor(0.0001() * 11 + min;
Math.floor(0,0011) + min;
Math.floor(0,0011) + (-5);
Math.floor(-4,9989‬);
recuerden que Math.floor redondea hacia abajo, entonces sería
Math.floor(-4);

con Math.random = 0.9999:
Math.floor(0.9999‬() * 11 + min;
Math.floor(10,9989‬) + min;
Math.floor(10,9989‬) + (-5);
Math.floor(5,9989)
recuerden que Math.floor redondea hacia abajo, entonces sería
Math.floor(5)

Entonces, cuando math.random devuelve aleatoriamente los números 0.0001 y 0.9999 el resultado es -4, 5,

Comparto resumen de la clase:

en la función también se puede hacer toda la lógica directamente en el return de esta forma

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

Pues yo hice unos daditos xD

var z = aleatorio(1, 6);
var y = aleatorio(1, 6);


document.write("dado1\b = " + z);
document.write("<br>dado2\b = " + y + "</br>");

function aleatorio(min, max)
{
  var resultado;
  resultado = Math.floor(Math.random()*(max - min + 1)) + min;
  return resultado;
}```

Para guardar las imágenes en PNG, simplemente denle guardar como y coloquen al final del nombre la extensión .png

me salió tremendo bololó al intentar hacer la ecuación XD, la de Freddy es más sencilla 😉

Así te genera dos numeros aleatorios y te los guarda en un array de dos
para poder utilizarlo como coordenadas

var z;
var coords= new Array(2);

for(var i=0; i<2;i++)
{
  z = aleatorio (10,490);
  coords[i]=z;
  document.write(coords[i] + ",");

}


function aleatorio (min, max)
{
  var resultado;
  resultado = Math.floor(Math.random()*(max - min+1))+min;
  return resultado;
}

Para descargar las imágenes tile.png y cerdo.png copien y peguen el enlace de las imágenes en la siguiente web y le clickean en descargar: https://imagecyborg.com/

La ecuación funciona aunque se pongan al revés los números por que el último paso es sumar el min, y el mínimo siempre va a ser más grande que el resultado, por lo que el resultado siempre será positivo. Aquí la comprobación:

0.001 * 11 = 0.011

Que clase de cara es esa Jajajajaj XD esa es la cara que yo pongo cuando mi novia me deja… a cierto no tengo una xdxdxd

cada vez me gusta mas este curso, ha sido dificil…pero voy con toda

0.001*11=0.011 Freddy tuvo un error ahí en el minuto 13:14

Ey ! no olviden descargar las imagines y al momento de guardarlas cambiar la extencion a .PNG

Los programadores siempre dividen un problema grande , en problemas pequeños.

Para poner entre paréntesis como hace Freddy en el minuto 19:55 es sencillo.
1- Selección del texto que quieres que este entre paréntesis.
2- Mantén pulsado Shift + ( (En mi caso es la tecla “8” pero busquen donde tienen los paréntesis su teclado)

funciona el visual estudio code

Les adjunto un desafío que me entretuvo varias horas…
Viendo el código de la página de este ERP nos proponía completar el desafío y si lo lograbamos nos postularía para un acceso laboral automáticamente.
Nos pone a prueba en el manejo de la consola del Browser y conocimiento JS.
Nota: El objetivo es descubrir la contraseña que está escondida en el Código.
Desafío Odoo

Me encanta tu forma de explicar Freddy!!! #TeamPlatzi 💚

yo en esta clase

![](

Dale un corazon , si te gusta la remera que trae Freddy puesta 😄 !!!

16:21, ya no es esa vaca. En 2021 es esta.

Por alguna razón no me funciona el document.write() por lo que he visto en la red hay algunas actualizaciones que lo bloquean pero no veo la solución. ¿Algún consejo?

Solución al problema de descargar las imagenes: 🤖🤖🤖
extensión ( .webp )
copiar la url completa
ingresar a google
pegar la url del punto 1
luego de esto aparece que la imagen no fue encontrada, pero en la parte inferior aparece una
opción que dice “buscar por imagen”
aparecera la imagen.
click derecho guardar imagen
les aparece de la siguiente forme (unnamed.png)
le cambian el nombre.

No había pensado la ecuación como max - min + 1 sino solo la diferencia entre el máximo y mínimo, pero de esta forma nunca tomaría el máximo valor. Apliquemos la aleatoriedad entonces para crear posiciones de personajes.

Enlace para cambiar el formato .web a .png de las imagenes
https://imagen.online-convert.com/es/convertir-a-png

Aquí está mi aporte. Aunque se generan el número de valores aleatorios indicados en el input (tal y como se muestra en la consola), aun sigo trabajando para su representación dentro del cuadro de texto de resultados. Es más complicado de lo que parece si no haces el document.write y sin quitar el body de tu html.

Vaya, creo que me emociono programando de más.

Math.floor() devuelve el número entero por debajo de los decimales.

Math.ceil() devuelve el siguiente número entero arriba de los decimales

Math.random() devuelve un número aleatorio de 0 a 0.999…

Si descargas las imágenes automáticamente, te van a guardar como .webp Como dicen los demás, guárdalas como .png para que el código funcione.

no pude desarrollar el problema del Mouse, entro en Bucle varias veces, vi lo que hicieron los demás pero no encontré lógica en la estruturacion del codigo, porfavor Freddy nos puedes mostrar como se hace el ejercicio?

Utilice un while, entonces se va a escribir en pantalla números aleatorios desde 1 a 2000, el ciclo termina cuando es valor 1

var z=aleatorio(1,2000);
while (z!=1) {
    document.write("<p><b><cr>"+z+"</cr></b></p>");
    z=aleatorio(1,2000);
    console.log("Numero ->"+z);
}
document.write(z);


function aleatorio(min,max) {
    var resultado;
    resultado=Math.floor(Math.random()*(max-min+1))+min;
    return resultado;
}```

alguno le pudo cambiar la extension a las imagenes?? la imagen de vaca y pollo no me descargan en formato png y cambio la extension la imagen no me sale 😦

Tengo el codigo de la siguiente manera, pero no me arroja numeros aleatorios al recarga el html, donde esta el error:

var z = aleatorio(10, 20);
document.write(z);

function aleatorio(min, max)
{
var resultado;
resultado = Math.floor(Math.randon() * (max - min + 1)) + min;
return resultado;
}

Variables Locales: variables creadas dentro de una función, solo pueden ser accedidas desde dentro de la función.
Variables Globales: podemos acceder a ellas desde cualquier parte del código.

Dato importante: ¿Cómo piensa un programador?

• “Un programador ver un problema y lo descompone en problemas más pequeños”

Para hacer cálculos en javascript se usa la clase estática Math
Math es (también) un objeto

Tiene atributos como:

Math.PI
Math.E

Tiene métodos como:

Math.sqrt(numero)
Math.floor(numero)
Math.ceil(numero)
Math.random()

Math.random() retorna un número aleatorio entre 0.000 y 9.999
Para generar un número aleatorio “y” cualquiera en el rango [min ; max> en función de la variable aleatoria “x” que solo va de cero a uno [0;1> se usa la función de la recta:
y = m*x + b
y: resultado
m: pendiente = (max - min)
x: número aleatorio = Math.random()
b : término independiente = min
Ya que Math.random() genera un número aleatorio en el rango [0;1> es decir, no llega a 1, la función aleatorio tampoco llegará jamás al valor max, como mucho a max - 1.
Esto se resuelve ampliando el rango al momento de escribir la función aleatorio.

function aleatorio(min, max)
{
	var resultado = (max + 1 - min)*Math.random() + min;
	resultado = Math.floor(resultado);
	return resultado;
}

Es posible cargar toda la función en la consola para probarla si se la escribe en una sola línea:

function aleatorio(a,b){var y = Math.floor((b+1-a)*Math.random()+a); return y;}

Un consejo si en las imagenes les aparece por ex: pollo.webp o algo asi solo renombrenlo por .png ex: pollo.png

platzi es lo mejor
me ha enseñado muchas cosas nuevas que no conocía, siempre me ha interesado el desarrollo y la programación pero no sabia por donde empezar y gracias a dios encontré platzi de verdad muchas gracias.

Excelente, por lo menos ya estoy entendiendo

Hola comparto código de números aleatorios,

Adjunto mis apuntes sobre esta clase x) por si a alguien le son de utilidad.

Apuntes de la clase.

Concuerdo mucho con Freddy en la parte donde menciona que no todos los programadores son buenos en matemáticas, a veces dicen que son muy necesarias, pero depende mucho en que área se va a enfocar el programador, obvio si uno puede aprender y volverse muy bueno en matemáticas, es un plus.

la ecuacion quedaria asi

z = floor(random*(maxi - min + 1) + min );

Lo que freddy dijo que haríamos:

Chicos vamos a hacer un juego sencillo

Lo que yo sentí que hicimos:

Les cuentos una tecnica que tengo para estudiar el codigo, es el uso de comentarios tal vez le pueda ayudar aun que no se si sea una buena practica , en caso contrario me gustaria saberlo.
Ejemplo:

HTML
<meta charset=“UTF-8”> <!–Para que el navegador lea correctamente las tildes–>

JavaScript
boton.addEventListener(“click”, dibujoPorClick); //Evento del click en el button

y asi para cada lenguaje es diferente
pero basicamente hace lo mismo que es que el compilador o interprete ignore lo que se apunto para recordar o saber que hace, lo hago como mi sistema de apunte dentro de los mismo programas

este es el codigo de base que siempre podemos usar para la creacion de numeros aleatorios. y se incluye un termino para buscar mas informacion: las clases estaticas.

“Puede incluso destruir negocios” XD 100✔✔
Aprovecho la ocasión para decir que me encanta su forma de enseñar amena y divertida. Siga adelante Freddy, que los buenos lo vamos siguiendo.

Muchachos yo sé que Fredy se ve muy caja pero para los que se pregunten si hay una función que redondeé al número que tenga más cerca es Math.round
Por ejemplo yo hice la mía así:

/**
 * The intRand function returns the value of a number rounded to the nearest integer within a given range
 * @param {number} min the minimum value that the function can return
 * @param {number} max the maximum value that the function can return
 */
function intRand(min, max) {
    return Math.round(Math.random() * (max - min) + min);
}

Acepto criticas constructivas e insultos también

AJAJJ y así es como le dicen a uno “échelo automático” y el baloto se hace millonario con solo tener ese código.

puede que la pregunta suene tonta o no, pero,¿este curso oeste tipo de programacion es usada para ingenieria de sistemas?

Hola gente.
Les dejo mi pequeño aporte hecho diferente:

const numeroAleatorio = (min, maxi) => resultado = Math.floor(Math.random() * (maxi - min + 1)) + min
const contenedor = document.querySelector('.caja')

//Podemos cambiar el numero maximo y minimo. Estos numero son el rango en el que se genera el numero aleatorio.
const NUMBER_MIN = 10
const NUMBER_MAXI = 20

for(let i = 0; i < 10; i++) {
    const pharagraph = document.createElement('p')
    const number = numeroAleatorio(NUMBER_MIN, NUMBER_MAXI)
    const text = document.createTextNode(number)
    pharagraph.appendChild(text)
    contenedor.appendChild(pharagraph)
}

Para los que tienen problema con la descarga de las imagenes en .png aqui dejo un enlace para que las descarguen.

https://arkticstm.cteraportal.com/invitations?share=6fafc57b382f64d927a3

Para los que tengan problema con las imágenes que no las puedan descargar en png, solo haciendo click derecho sobre el nombre de la imagen y puse la opción de Save link as… y se guardaron correctamente en png todas las imágenes, espero que les ayude. saludos

😊👍🏽

Para los que esta teniendo problemas al descargar las imagenes, Les comparto el truco.
al descargar e ir a “Guardar como” simplemente sustituyan el final del nombre de archivo por “.png” guardan y listo, tendran la imagen en png. No necesitan convertidores o perder tiempo buscando paginas o usando photoshop.

la vaca no me descarga.
jjajaja help me.

Me gusta la idea de crear projectos para aprender

Me gusta Platzi!

Excelente clase Platzi

Esta es la Clave!

Math.floor() devuelve el número entero por debajo de los decimales.

Math.ceil() devuelve el siguiente número entero arriba de los decimales

Math.random() devuelve un número aleatorio de 0 a 0.999…

Buenisimo!

¿alguno sabe porq al decargar los archivos que se necesitan para el ejercicio no me salen .png sino .webp?

Comunidad, ¿alguno de casualidad me puede pasar las imágenes en un archivo .rar? Es que me dice error y solamente el único que me dejó descargar fue el pollo

let nums =aleatory(10,20);
let firstNum = parseFloat(nums.resultado),
    secondNum = parseFloat(nums.resultado2);

document.write("Usando la función Math.round: " + firstNum, "<br>Usando la función Math.floor: " + secondNum)


/*/JS To return multiple values from a function, you can pach the return values as elements 
of an array or as a properties of an object This example show how you can  returning 
values from a function using an object/*/

function aleatory(min, max)
{   
    var z = Math.random();
    let resultado = Math.round(z * (max - min +1)) + min;
    let resultado2 = Math.floor(z * (max - min +1)) + min;
    document.write("El número aleatorio es: " + z + "<br>")

    return {resultado,resultado2};
    
}

Con éste tengo un mismo número con el que puedo comparar entre las funciones float, ceil y round:

El número aleatorio es: 0.43408286046797984
Usando la función Math.round: 15
Usando la función Math.floor: 14

muy bien

Gracias por la enseñanza

Muy interesante 🤓

Higthlights

Tile así se denomina la parte gráfica sobre la que se hace un video juego.
Los números aleatorios en Javascript son decimales.
Normalmente se usa parseInt() para convertir cualquier número en entero pero hay otras alternativas para tener mayor control:
ceil(); que nos permite redondear por encima del número.
floor(); que nos permite redondear por debajo del número.

Math() es un método estático que tiene un conjunto de funciones por dentro. Una de ella es radom que se escribe de la siguiente manera: Math.random();

La función Math,random(); retorna valores entre (0.000~1 y el 0.999~9)

Que buen video 😄

todo muy bien esta exelente el servicio

🐱‍💻 Ventajas del uso de funciones son las siguientes:
✔ Reducción de código
✔ Legibilidad del programa
✔ Facilidad en la depuración
✔ Mantenimiento

buenas noche me presento mi nombre es nelson

¿Por qué es necesario sumarle 1 a maxi - mini antes de multiplicar el random?

Tu cara cuando te das cuenta de la embarrada

Cuando decidi resolver los numeros aleatoreos hice los siguiente:

var w = Math.random() * y;
if (w < x)
{
w = w + x;
}
console.log("final: "+Math.round(w));
//Math.round() redondea dependiendo de si el decimal es menor de 0.5 o no

me costo trabajo entender las funciones videos aparte

Hoy aprendi que si dejas un ; al final de declarar una funciono no te va a arrancar el código

var z;

for(var i=0; i<10; i++)
{
  z = aleatorio(10, 20);
  document.write(z + ",");
}



function aleatorio (min, max)
{
  var resultado;
  resultado = Math.floor(Math.random()*(max-min))+min;
  return resultado;
}```
 :v