appiweb: febrero 2013

jueves, 21 de febrero de 2013

Cambiar el background color con Javascript

Hola a todos!
Para cambiar el background color del body con Javascript, basta con asignar un nuevo código en formato RGB al atributo background del estilo del elemento que queramos cambiar, en este caso el body, el formato es "#rrggbb".

document.body.style.background = "#000cff";

Para trabajar de forma más cómoda opino que es mejor encapsular esta línea en una función:


function bgcolor(color){
    document.body.style.background = color;

}

Supongamos que queremos que al pulsar sobre una imagen cambie el color de fondo, en el evento onclick podemos añadir lo siguiente:


<img src="boton.png" onclick="bgcolor('#d2ffae');"/>

Y ya está!!

miércoles, 20 de febrero de 2013

HTML5: Dibujar un círculo en el canvas

Buenas a todos!
Para dibujar un círculo en el canvas, no disponemos de una función específica, es necesario dibujar un arco cerrado y después pintar su interior.

En el siguiente código la función que se encarga de dibujar el círculo recibe 4 parámetros, las coordenadas (x, y) donde se dibujará el círculo, su radio y el color de relleno.


<html>

<head><title>ball html5</title></head>

<body>

 <canvas id="c" width="200" height="200"></canvas>

 <script type="text/javascript">

 

 var canvas, ctx;

 

 function drawBall(x,y,r,color){

  ctx.fillStyle = color;

  ctx.beginPath();

  ctx.arc(x, y, r, 0, Math.PI*2, true);

  ctx.closePath();

  ctx.fill();

 }



 function clear(){

  canvas.width =  canvas.width;

 }

 

 function init(){

  canvas = document.getElementById("c");

  ctx = canvas.getContext("2d");

  setInterval(loop, 1000/30);

 }

 

 function loop(){

  clear();

  drawBall(100,100,20,"#007eff");

 }

 

 window.onload = init;

  

 </script>

</body>

</html>

El código es completamente funcional para que creéis directamente un .html y veáis como funciona. La estructura es la clásica que ya he introducido en otros tutoriales, una función de inicialización donde configuro los objetos que referencian al canvas y su contexto y una función loop, que itera constantemente pintando el canvas a 30 fotogramas por segundo.

Un saludo a todos!

martes, 19 de febrero de 2013

Punteros a funciones con Java

Buenas a todos!

El siguiente post es el resultado de una serie de experimentos matutinos que he llevado a cabo y que únicamente pretendían explorar nuevas formas de trabajar con grandes grupos de condicionales.

Supongamos que queremos ejecutar diferentes comandos en función de un parámetro entero. Es una situación bastante común que suele solventarse empleando un "switch case" o con condicionales del tipo "if ( param == value)", estos métodos clásicos son perfectos, pero su lógica es invariable, difícilmente dinámica, y además no podemos emplearla en diferentes puntos del programa.

Para generar los punteros a funciones he empleado un array de un tipo de clase definida como interface, esto me permite tener instancias con implementaciones distintas para cada función definida por esta interface.


public interface Function{

 public void function(); 

}




Function[] options = {
 new Function(){ public void function(){ System.out.println("Option 0"); } },
 new Function(){ public void function(){ System.out.println("Option 1"); } },
 new Function(){ public void function(){ System.out.println("Option 2"); } },
 new Function(){ public void function(){ System.out.println("Option 3"); } }
};

options[2].function();

Tras realizar unas cuantas pruebas, (tampoco excesivamente exhaustivas), he podido concluir que en todos los casos se obtiene un rendimiento igual o superior al que obtendríamos empleando un "switch case". Además, en los casos en que tengamos muchas opciones, el código será mucho más legible, sobretodo si empleamos constantes para definir los índices que originan los distintos comportamientos. Otra ventaja es la posibilidad de reutilizar este tipo de estructura condicional entre distintas partes del programa, es tan simple como compartir el objeto "options".

Espero que os sea de ayuda o al menos que sirva para mostrar otra forma de pensar en las estructuras condicionales.

Un saludete a todos!

domingo, 17 de febrero de 2013

Jagged Arrays en Java

Hola a todos!

¿Qué es un Jagged array?

Jagged significa mellado o dentado, así que más o menos su nombre indica que está incompleto o falta algo por especificar.

Cuando trabajamos con arrays multidimensionales, es muy corriente encontrarnos con el problema de que no todos los niveles del array tendrán las mismas dimensiones o simplemente inicialmente desconocemos las dimensiones de cada nivel.

Supongamos que queremos definir un array que guarde identificadores de fotogramas de diferentes animaciones, pero a priori desconocemos cuantos fotogramas tendrá cada animación.

int MAX_ANIMATIONS = 10;
int[][] animations = new int[MAX_ANIMATIONS][];

  
int[] framesAnim0 = {1, 2, 3, 4, 5};
int[] framesAnim1 = {6, 7, 8};
int[] framesAnim2 = {9, 10, 11, 12};

  
animations[0] = framesAnim0;
animations[1] = framesAnim1;
animations[2] = framesAnim2;

animations[][] es el jagged array, es inicializado con un máximo de 10 animaciones, y no especificamos cuántos fotogramas tendrá cada animación.
En caso de que hubiéramos especificado por ejemplo que cada animación tendrá 5 fotogramas, se habrían generado automáticamente 10 arrays con 5 ceros cada uno.

int[][] animations = new int[MAX_ANIMATIONS][5];

Después simplemente asignamos 3 arrays de animaciones a las 3 primeras posiciones del array animations.
En este caso las dimensiones de cada animación pasan a ser directamente las dimensiones de cada uno de los arrays de frames referenciados.

En el caso de que no disponemos de arrays previamente inicializados pero deseamos inicializar con distintas dimensiones cada uno de los niveles de un jagged array podemos hacerlo de la siguiente forma:


int MAX_ANIMATIONS = 4;

int[][] animations = new int[MAX_ANIMATIONS][];

  

animations[0] = new int[2];

animations[1] = new int[4];

animations[2] = new int[8];

animations[3] = new int[16];

Con este tipo de inicialización conseguiríamos un array que contiene los siguientes elementos:

animations[0] = {0,0};
animations[1] = {0,0,0,0};
animations[2] = {0,0,0,0,0,0,0,0};
animations[3] = {0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0};

Un saludo a todos!