martes, 24 de abril de 2018

Canvas en HTML5+CSS+JS creando puntitos aleatorios

Con HTML5 podemos crear un canvas que es un lienzo donde poder dibujar figuras geométricas y puntos. En este caso vamos a generar puntos de forma aleatoria usando Java Script.

Versión 1

Puede ver el resultado en la siguiente página web.

https://canvaspuntitos1--financieras.repl.co

Recargando la página con F5 en nuestro navegador hemos creado el siguiente gif animado.



El código utilizado es el siguiente.

HTML 

El fichero se llama index.html.

 <!DOCTYPE html>  
 <html>  
 <head>  
   <meta charset="utf-8" />  
   <meta name="viewport" content="width=device-width">  
   <title>Gamedev Canvas Workshop</title>  
   <link href="index.css" rel="stylesheet" type="text/css" />  
 </head>  
 <body>  
 <canvas id="myCanvas" width="400" height="400"></canvas>  
 <script src="index.js"></script>  
 </body>  
 </html>  

CSS

El fichero se llama  index.css.

 * { padding: 0; margin: 0; }  
        canvas { background: #eee; display: block; margin: 0 auto; }  

JavaScript

El fichero se llama  index.js.

 var canvas = document.getElementById("myCanvas");  
 var ctx = canvas.getContext("2d");  
 ctx.beginPath();  
 for (i = 0; i < 100000; i++) {  
  x=Math.floor(Math.random() * canvas.width) + 1;  
  y=Math.floor(Math.random() * canvas.height) + 1;  
      ctx.fillRect(x,y,1,1);  
 }  
 ctx.closePath();  

Veamos un GIF animado que se obtiene recargando la página web. El gif animado se ha creado con GifCam.exe


Cada vez que se recarga la página se generan 100.000 nuevos puntos aleatorios que se muestran en el canvas.

Versión 2

En la segunda versión de este código lo que queremos es crear una circunferencia con los puntos aleatorios. Cambia el código JavaScript.

JavaScript

 var canvas = document.getElementById("myCanvas");  
 var ctx = canvas.getContext("2d");  
 ctx.beginPath();  
 for (i = 0; i < 100000; i++) {  
  x=Math.floor(Math.random() * canvas.width) + 1-canvas.width/2;  
  y=Math.floor(Math.random() *canvas.height) + 1-canvas.width/2;  
      if (y<Math.sqrt((canvas.width/2)**2-x**2) && y>-Math.sqrt((canvas.width/2)**2-x**2)){  
       ctx.fillRect(x+canvas.width/2,y+canvas.width/2,1,1);  
  }  
 }  
 ctx.closePath();  

La página dónde se puede ver es la siguiente.

https://canvasPuntitos2--financieras.repl.co


Lo que se hace con el if es eliminar los puntos que quedan fuera del circulo. Solo se representan en el canvas los puntitos que quedan dentro del circulo.


Versión 3

Vamos a crear la función draw() que se repetirá cada 100 milisegundos gracias a la siguiente sentencia.

setInterval(draw, 100);

Nuestro código quedará así.

 var canvas = document.getElementById("myCanvas");   
 var ctx = canvas.getContext("2d");   
 function draw(){  
   ctx.clearRect(0, 0, canvas.width, canvas.height);  
   ctx.beginPath();   
    for (i = 0; i < 100000; i++) {   
    x=Math.floor(Math.random() * canvas.width) + 1-canvas.width/2;   
    y=Math.floor(Math.random() *canvas.height) + 1-canvas.width/2;   
    if (y<Math.sqrt((canvas.width/2)**2-x**2) && y>-Math.sqrt((canvas.width/2)**2-x**2)){   
      ctx.fillRect(x+canvas.width/2,y+canvas.width/2,1,1);   
      }   
      }   
  ctx.closePath();   
 }  
 setInterval(draw, 100);  

Podemos ver la esfera actualizándose 10 veces cada segundo en la siguiente página.

No hay comentarios:

Publicar un comentario