Archivo de la etiqueta: HTML

Matemáticas, física y animación con Canvas html5 – parte 1

canvas
Canvas es una de las cosas que encuentro más interesantes y entretenidas de HTML5, con ella podemos realizar desde gráficos, juegos y un sin fín de cosas sin necesidad de utitilizar ningún plugin en nuestro navegador. Para este ejemplo haremos una pelota (un punto grande) que rebote en contra una pared (caja).
Adjuntaré la librería de Modernizr para garantizar la compatividad en todos los navegadores. Agregando entre las etiquetas head el siguiente código.
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.1/modernizr.min.js"></script>

Comenzaré este post escribiendo todo el código para este ejemplo y luego iremos explicando paso a paso lo que tenemos que hacer. Al final del post está el canvas funcionando.
Pegamos el siguiente código en nuestro head entre las etiquetas script del documento html.
[javascript]
window.addEventListener(‘load’, eventWindowLoaded, false);
function eventWindowLoaded(){
canvasAppPartOne();
}
function canvasSupport(){
return Modernizr.canvas;
}
function canvasAppPartOne(){
if(!canvasSupport()){
return;
}

function drawScreen(){
context.fillStyle = ‘#EEEEEE’;
context.fillRect(0, 0, theCanvas.width, theCanvas.height);
context.strokeStyle = ‘#000000’;
context.strokeRect(1, 1, theCanvas.width-2, theCanvas.height-2);
ball.x += xunits;
ball.y += yunits;
if(ball.x+15 > theCanvas.width || ball.x < 15){
angle = 180 – angle;
updateBall();
}else if(ball.y+15 > theCanvas.height || ball.y < 15){
angle = 360 – angle;
updateBall();
}
context.fillStyle = ‘#000000’;
context.beginPath();
context.arc(ball.x, ball.y, 15, 0, Math.PI*2, true);
context.closePath();
context.fill();
}
function updateBall(){
radians = angle * Math.PI/ 180;
xunits = Math.cos(radians) * speed;
yunits = Math.sin(radians) * speed;
}

var speed = 10;
var angle = 35;
var radians = 0;
var p1 = {x:20,y:20};
var xunits = 0;
var yunits = 0;
var ball = {x:p1.x, y:p1.y};
updateBall();

theCanvas = document.getElementById(‘canvasOne’);
context = theCanvas.getContext(‘2d’);
setInterval(drawScreen, 33);
}
[/javascript]

Luego entre las etiquetas body de nuestro html colocamos el contenedor de nuestro canvas.

<canvas id="canvasOne" width="600" height="300">
  Please update you browser!
</canvas>

Ahora a explicar el código.
Lo primero que hacemos es cargar todo nuestro script en la función load de javascript, para que cuando se cargue la página también lo haga nuestro script.
[javascript]
window.addEventListener(‘load’, eventWindowLoaded, false);
function eventWindowLoaded(){
canvasAppPartOne();
}
[/javascript]

Definimos las variables iniciales de nuestro script. Usaremos la variable speed para determinar la velocidad inicial de la pelota, angle para el ángulo inicial con el cuál se moverá la pelota, radians porque nuestra pelota se moverá en forma de vector con dirección y sentido, y utilizaremos radiales para transformar desde el ángulo, ya que será más legible para nosotros, p1 es la posición inicial de la pelota en la caja, xunits y yunits contendrán la suma que debe aplicarse a la posición de nuestra pelota mientras rebote por la caja, y finalmente ball que será nuestra pelota.
[javascript]
var speed = 10;
var angle = 35;
var radians = 0;
var p1 = {x:20,y:20};
var xunits = 0;
var yunits = 0;
var ball = {x:p1.x, y:p1.y};
[/javascript]

Luego referenciamos el elemento DOM en nuestro html, determinamos que trabajaremos bajo un contexto 2d y definimos el intervalo de refresco de nuestro canvas en milisegundos.
[javascript]
theCanvas = document.getElementById(‘canvasOne’);
context = theCanvas.getContext(‘2d’);
setInterval(drawScreen, 33);
[/javascript]

La función drawScreen será la encargada de pintar el canvas por cada intervalo que hayamos definido. Lo primero que pintamos es la caja con un borde para poder ver los límites. Las primeras dos lineas pintan el fondo y las dos siguiente pintan el borde.
[javascript]
context.fillStyle = ‘#EEEEEE’;
context.fillRect(0, 0, theCanvas.width, theCanvas.height);
context.strokeStyle = ‘#000000’;
context.strokeRect(1, 1, theCanvas.width-2, theCanvas.height-2);
[/javascript]

Ahora con una condición if, vamos podemos saber cuando la pelota choca con los el eje x y el eje y, así podemos cambiar la dirección del vector. En la primera linea si choca con el eje x y en la cuarta linea si choca con el vector y. El número 15 que le sumo a la variable “ball” corresponde radio de la pelota, ya que de no ser así, el borde de la caja chocaría con el centro de la pelota. Fíjese que estoy utilizando la función updateBall(), esta la explicaré un poco más adelante.
[javascript]
if(ball.x+15 > theCanvas.width || ball.x < 15){
angle = 180 – angle;
updateBall();
}else if(ball.y+15 > theCanvas.height || ball.y < 15){
angle = 360 – angle;
updateBall();
}
[/javascript]

Seguidamente dibujamos nuestra pelota que se moverá (o eso parece) por nuestra caja.
[javascript]
context.fillStyle = ‘#000000’;
context.beginPath();
context.arc(ball.x, ball.y, 15, 0, Math.PI*2, true);
context.closePath();
context.fill();
[/javascript]

Y ahora fuera de nuestra función drawScreen, definimos la función updateBall. Que se encargará de transformar nuestro cambio en el angulo que hicimos en el if anterior a radiales, con lo que finalmente cambiará la dirección de la pelota.
[javascript]
function updateBall(){
radians = angle * Math.PI/ 180;
xunits = Math.cos(radians) * speed;
yunits = Math.sin(radians) * speed;
}
[/javascript]
Y aquí está el resultado.
Espero que les haya servido y si tienen suguerencias para mejorar el código puedes escribirlas!
Saludos!

Actualiza tu browser por la chucha!


 

Guía Básica de JQuery Mobile

Estimados visitantes, JQuery Mobile es un framework que integra JQuery y está optimizado para realizar sitios web para dispositivos móviles touch.

Las carácteristicas de JQueryMobile son:
Facilidad de uso: Otorga mucha facilidad para el desarrollo de interfaces de usuario de dispositivos móviles.
Soporte HTML5 markup-driven: Cuando utilicemos este framework, nos olvidaremos de tipear código JavaScript. Gracias al uso de etiquetas HTML, que luego en el momento de renderizado serán procesadas por Jquery Mobile
.- Múltiples plataformas soportadas: JQuery soporta muchos dispositivos y tecnologías, como ser: IOS, Android, Blackberry, Palm WebOS, Symbian, Windows Mobile, etc.
Tamaño reducido: Toda la librería comprimida pesa menos de 12K.
Temas personalizados: El framework expone algunas utilidades para el manejo de temas y también es posible crear temas propios.

Por supuesto lo primero que debemos hacer es importar las librerías necesarias dentro de las etiquetas <head></head> de nuestro sitio web, la de JQuery, JQueryMobile y CSS con los themes del framework.

Nota: Al momento de realizar esta guía la última versión de JQuery era 1.6.1 y JQueryMobile 1.0b. Es recomendable descargar las librerías y subirlas en nuestro sitio web.

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>

La etiqueta <meta></meta> es muy importante ya que determina el tamaño del dispositivo movil.

Dentro de la etiqueta <body>, cada vista o “página” en el dispositivo móvil se identifica con un elemento (normalmente un div) con los data-role=”page” de atributos:

<div data-role=”page”>
Tú contenido...
</div>

Dentro de la “página” de contenedores, cualquier código HTML válido puede ser utilizado, pero para las paginas de JQueryMobile los “divs” dentro deben ser header, content y footer:

<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>

En JQueryMobile podemos tener varias páginas dentro de un mismo archivo HTML, navegando sin tener q recargar un sitio. Para lograr esto necesitamos identificar los diferentes div que contengamos con un identificador único para los tipo “page”, es decir:

<div data-role="page" id="home">...</div>
<div data-role="page" id="login">...</div>
<div data-role="page" id="register">...</div>

Además, en cualquier parte del sitio se pueden desplegar “dialogos”, agregando data-rel=”dialog” a un enlace y el framework automáticamente oscure el fondo y redondea los bordes para darle el estilo del sitio.

<a href="dialogo.html" data-rel="dialog">Abrir dialogo</a>

Nota: Para cerrar la ventana de dialogo puede hacerlo mediante el atributo data-rel=”back” en un enlace refenciado a “#” o con la función $(‘.ui-dialog’).dialog(‘close’) de JQuery.

El efecto de transición al cambiar de vista por defecto es “pop” pero podemos especificar el que deseemos, ya sea “flip”, “slipdown”, “pop” y entre otros que podemos encontrar en la documentación oficial de JQueryMobile.

<a href="dialogo.html" data-rel="dialog" data-transition="pop">Abrir dialogo</a>

Por defecto, los botones de expanden al ancho de la ventana, pero podemos solucionar esto anidando los botones dentro de un div con el atributo <div data-inline=”true”>

<div data-inline="true">
<a href="index.html" data-role="button">Cancelar</a>
<a href="index.html" data-role="button">Aceptar</a>
</div> 

Incluso podemos agrupar botones:

<div data-role="controlgroup">
<a href="index.html" data-role="button">Si</a>
<a href="index.html" data-role="button">No</a>
<a href="index.html" data-role="button">Aveces</a>
</div>

Podemos definir distintos diseños (o themes) a toda la variedad de elementos que componen cada una de nuestras vistas, simplemente agregando el atributo data-theme=”a”. JQueryMobile dispone de 5 themes para nuestros desarrollos: a,b,c,d,e.

<a href="index.html" data-role="button" data-theme="a">Boton</a>

Para organizar nuestros elementos dentro de cada vista, podemos organizarlos en grillas o columnas, esto lo hacemos de la siguiente forma:

<div class="ui-grid-b">
<div class="ui-block-a">Block A</div>
<div class="ui-block-b">Block B</div>
<div class="ui-block-c">Block C</div>
</div>

Y finalmente te invito leer la documentación oficial de JQueryMobile ya que aún existen muchas mas funcionalidades que este framework te puede entregar. Esperando cumplir con las expectativas de los nuevos usuarios que pretenden iniciarse con esta herramienta, me despido.