isantander.com http://www.isantander.com javascript, html5, canvas, Android y demás cosas divertidas... 2012-02-22 isantander.com feeder proyect en hourly 1Trayectoria circular con Canvashttp://www.isantander.com/articulo/trayectoria_circular_con_canvashttp://www.isantander.com/articulo/trayectoria_circular_con_canvas#comments2011-07-31Israel Santanderhttp://www.isantander.com/articulo/trayectoria_circular_con_canvasCanvas permite animar objetos siguiendo todo tipo de trayectorias. En este tutorial, vamos a ver como mover un objeto a través de una trayectoria c...Canvas permite animar objetos siguiendo todo tipo de trayectorias. En este tutorial, vamos a ver como mover un objeto a través de una trayectoria circular. Por suerte, no es necesario escribir mucho código ni tampoco tener muchos conocimientos de trigonometría.

El concepto es simple. Solamente necesitamos conocer el círculo sobre el que queremos mover el objeto, e ir variando el ángulo en casa paso de la animación.

Pasos a seguir:

  • Esqueleto del documento HTML5
  • Crear el bucle de la animación
  • Dibujar el círculo que usaremos como trayectoria
  • Dibujar y animar un objeto siguiendo la trayectoria circular

Esqueleto del documento HTML5:


<!DOCTYPE HTML>
<html>
	<head>
		<title>Animación con trayectoria circular</title>
		<script type='text/javascript>

		<script>
	</head>
	<body>
		<canvas id ="canvas" width="400" height="400" ></canvas>
	</body>
</html>

Hasta ahora sólo hemos creado un esqueleto de un documento HTML5 al que se le ha añadido una etiqueta canvas de 400x400 a la que se le ha puesto en el documento css un borde y un color de fondo.

Crear el bucle de la animación:

Vamos a añadir un botón para iniciar y parar la animación, para ello, añadimos el siguiente código debajo de la etiqueta canvas:


<div id='controles'>
	<input type="button" value="Iniciar/Parar" id="iniciar" onclick="init()">
</div>

Ahora, dentro de la sección javascript, añadimos lo siguiente:


//Declaración de variables globales
var ctx = null;
var t = null;

function init()
{
	//Obtener el contexto 2d
	if(ctx == null)
		ctx = document.getElementById('canvas').getContext('2d');
		
	//Iniciar la animación si t es null, o pararla si no lo es
	if(t == null)
		t = setInterval("anima()",30);
	else
	{
		clearInterval(t);
		t = null;
	}
}
function anima()
{
	ctx.clearRect(0,0,400,400);
}

Al pulsar el botón, se iniciará la animación, llamando a la función anima() 30 veces por segundo, pero como la única instrucción que tiene es ctx.clearRect(0,0,400,400); solamente se limpiará el lienzo constantemente, por lo que todavía no apreciaremos nada visualmente.

Dibujar el círculo que usaremos como trayectoria:

Vamos a dibujar un círculo con un radio de 150 píxeles desde el centro de la etiqueta canvas, en nuestro caso, como mide 400x400 el centro es el punto x=200, y=200;

Declaramos la variable global radio, con un valor de 150, así como las variables x e y que marcarán el centro de la circunferencia:

	var ctx = null;
	var t = null;
	var radio = 150;
	var x = 200;
	var y = 200;

Y en la función anima(), dibujamos la circunferencia:

function anima()
{
	ctx.clearRect(0,0,400,400);
	ctx.arc(x,y,radio,0,Math.PI*2,true);
	ctx.closePath();
	ctx.stroke();
}

Si todo ha ido bien, al pulsar el botón deberíamos ver algo como esto:

trayectoria_circular1

Dibujar y animar un objeto siguiendo la trayectoria circular:

Por fin llegamos al punto en donde animaremos el objeto siguiendo la trayectoria circular, como expliqué antes, solamente tenemos que calcular las posiciones x e y de la circunferencia mientras se va aumentando el ángulo en cada intervalo de la animación, luego dibujamos el objeto que queramos en esas posiciones. Vamos a ver el código, es más simple de lo que parece.

Añadimos unas variables que nos harán falta, tmpx y tmpy serán las posiciones x e y del objeto en movimiento y la variable angulo:

var tmpx = 0;
var tmpy = 0;
var angulo = 0;

Y en la función anima() añadimos lo siguiente: 


tmpx = x + ( radio*Math.cos(angulo*(Math.PI*2)));
tmpy = y + ( radio*Math.sin(angulo*(Math.PI*2)));
					
angulo += 0.01;
			
ctx.beginPath();
ctx.fillRect(tmpx-10,tmpy-10,20,20);
ctx.fillStyle = 'red';
ctx.fill();
ctx.closePath();

Usamos las funciones trigonométricas para calcular las posiciones tmpx y tmpy en función del angulo, luego aumenta el valor del ángulo y dibujamos el objeto animado, en nuestro caso, un cuadrado de color rojo de ancho = 20 y alto = 20. A la hora de dibujarlo: ctx.fillRect(tmpx-10,tmpy-10,20,20);, se corrigen los valores de tmpx y tmpy restándole 10 a cada uno ( la mitad del ancho y alto del cuadrado) para que quede centrado en la trayectoria. El resultado es el siguiente:

]]>0Clases con javascript: la propiedad prototypehttp://www.isantander.com/articulo/clases_con_javascript_propiedad_prototypehttp://www.isantander.com/articulo/clases_con_javascript_propiedad_prototype#comments2011-06-27Israel Santanderhttp://www.isantander.com/articulo/clases_con_javascript_propiedad_prototype Dentro de las múltiples posibilidades que nos ofrece Javascript, se encuentra la de crear objetos y clases al estilo tradicional. Aunque no es un... Dentro de las múltiples posibilidades que nos ofrece Javascript, se encuentra la de crear objetos y clases al estilo tradicional. Aunque no es una de las características más conocidas ni utilizadas de este lenguaje, cuyas funciones más habituales son la manipulación del DOM, validaciones y peticiones AJAX, la posibilidad de programar utilizado el paradigma POO se vuelve cada vez más útil y necesario, sobre todo desde la llegada del estándar HTML5, que abre un nuevo abanico de posibilidades al mundo Javascript.

A pesar de que todo lo que se puede hacer con clases y objetos en Javascript, se puede hacer sin ellas, no cabe duda que la programación orientada a objetos nos ofrece una serie de ventajas y "comodidades" que cuanto menos, son dignas de mencionarse.

Comenzamos:

Javascript es un lenguaje orientado a prototipos, por lo tanto, la sintaxis que se utiliza para la creación de clases es ligeramente diferente a lo que estamos acostumbrados en otros lenguajes más tradicionales.

Nota: Existen multitud de formas de crear objetos y clases en Javascript, pero en este tutorial solamente se va a explicar una de ellas.

Constructor: 

	function Persona()
	{
	}
	var juan = new Persona();
	var pepe = new Persona();

Y así de fácil hemos creado una clase en Javascript. Esto es así porque como hemos dicho anteriormente, estamos tratando con un lenguaje basado en prototipos, y cada función sirve como constructor de un objeto.

Propiedades o atributos:

Las propiedades o variables de clase, son los atributos que definen cada objeto instanciado. Una clase puede tener o no atributos, y en Javascript, como en muchos otros lenguajes se referencian utilizando la palabra reservada this seguido de un punto y el nombre de la propiedad. 

function Persona(nombre)
{
	this.nombre = nombre;
	alert('Me llamo '+this.nombre);
}
var juan = new Persona('Juan');
var pepe = new Persona('Pepe');

En el ejemplo anterior, hemos creado la clase Persona, a la que le hemos de pasar el atributo nombre para almacenarlo como propiedad del objeto.

Podemos acceder o modificar los valores de los atributos muy fácilmente , ya que tan solo tenemos que seguir la sintaxis: nombre_del_objeto.atributo, lo vemos mejor en el siguiente ejemplo:

function Persona(nombre)
{
	this.nombre = nombre;
}
var juan = new Persona('Juan');
alert('me llamo '+juan.nombre);
juan.nombre = 'Juan Perez';
alert('ahora me llamo '+juan.nombre);

Métodos

Los métodos son las acciones que puede realizar el objeto y con ellos puede interactuar con sus atributos o variables externas.

Llegados a este punto, es hora de conocer la propiedad prototype, que nos permite agregar atributos o métodos a un objeto o clase. También veremos la posibilidad que nos ofrece Javascript para igualar variables a funciones, que dota de una increíble flexibilidad a este lenguaje. Quién haya programado en algún lenguaje orientado a objetos como Java o C++ ,verá aquí las principales diferencias de sintaxis que se han mencionado anteriormente. 

function Persona(nombre)
{
	this.nombre = nombre;
}
//Aquí creamos el método de la clase:
Persona.prototype.decirNombre =  function()
{	
	alert(this.nombre);
};
var juan = new Persona('Juan');
juan.decirNombre();

Como vemos, la forma para crear métodos de clase dista bastante de otros lenguajes, pero por suerte siempre se sigue el mismo patrón: Nombre_de_la_clase.prototype.nombre_del_metodo = function(parametros){ ...código del método...}

Vamos a ver ahora un ejemplo un poco más completo con un método con parámetros:

function Persona(nombre)
{
	this.nombre = nombre;
}
//Método con parámetros:
Persona.prototype.addDatosPersona = function(apellidos,edad)
{
	this.apellidos = apellidos;
	this.edad = edad;
}
Persona.prototype.decirDatos=  function()
{	
	alert('Nombre completo: '+this.nombre+' '\
	+this.apellidos+', edad: '+this.edad);
};
var juan = new Persona('Juan');
juan.addDatosPersona('Perez Martín', 34);
juan.decirDatos();

Hemos añadido el método addDatosPersona, que requiere los parámetros apellidos y edad. Para llamarlo juan.addDatosPersona('Perez Martín', 34);.

Herencia:

La herencia consiste en crear una clase hija a partir de otra clase base o padre, normalmente añadiendo características propias como atributos o métodos a los ya existentes en la clase padre. Esto puede resultar muy útil cuando tratamos con aspectos que tienen elementos en común, pero otros que se diferencian entre sí. Javascript solamente permite la herencia de clases individuales. Veamos un ejemplo, una clase genérica o padre Vehículo, que contiene los elementos comunes a los distintos vehículos que trate el programa. Y además una subclase o clase hijascoche, que añade características propias de un coche: 
//Clase padre
function Vehiculo(marca,color,velocidad)
{
	this.marca = marca;
	this.color = color;
	this.velocidad = velocidad;
}
Vehiculo.prototype.decirVelocidad = function()
{
	alert('El vehículo tiene una velocidad de  '+this.velocidad+' km/h');
}
Vehiculo.prototype.caracteristicas = function{};

Ya tenemos nuestra clase base, que consta de los parámetros marca, color y velocidad, además de los métodos avanzar() y caracteristicas(). El método avanzar nos dirá la velocidad del vehículo, mientras que el método características está vacío, para poder ver la capacidad de las clases hijas de sobreescribir los métodos de la clase padre. 

//Clase hija coche
function Coche(marca,color,velocidad ,puertas)
{
	//Llamamos al constructor  de la clase padre y le pasamos
// los parámetros correspondientes
	Vehiculo.call(this, marca,color,velocidad);
	this.puertas = puertas;
}
//Aquí hacemos que la clase coche herede de la clase Vehiculo:
Coche.prototype = new Vehiculo();
//sobreescribir el método caracteristicas()
Coche.prototype.caracteristicas = function()
{
	alert('Marca:'+this.marca+',color:'+this.color+',velocidad:'\
+this.velocidad+'Puertas:'this.puertas);
};
Coche.prototype = new Coche();
var citroen = new Coche('Citroen','Rojo',100,5);
citroen.decirVelocidad();
citroen.caracteristicas();

Del último ejemplo cabe descatar la sentencia : Vehiculo.call(this, marca,color,velocidad); , que llama al constructor de la clase padre. También hay que destacar la sentencia: Coche.prototype = new Vehiculo();, que se encarga de hacer que los objetos de la clase coche sean instancias de la clase Vehiculo. Además, el método decirVelocidad() de la clase coche sobreescribe al método de la clase padre.

]]>1