Blog

Juan Mellado, 12 Diciembre, 2011 - 16:25

Los defectos de convexidad son importantes en la medida que se corresponden con ciertos puntos que caracterizan un determinado contorno. El ejemplo más clásico es el de una mano. Si se calcula la envolvente convexa que engloba el contorno de una mano y sobre ella se marcan los puntos que se separan más de dicha envolvente, para cada segmento de la misma, estos puntos se corresponderán con el nacimiento de los dedos, es decir, donde dejan la palma. Estos puntos son los defectos de convexidad, y permiten determinar de una forma muy sencilla algunas características concretas, como por ejemplo el número de dedos que tiene levantados la mano.

Siguiendo la implementación de la función cvConvexityDefects de OpenCV he creado un pequeño programa en JavaScript que calcula los defectos de convexidad. Para hacerlo un poco más atractivo visualmente le he dado forma de un pequeño generador automático de constelaciones.

El programa genera varios puntos al azar asegurándose de que forman un polígono simple, o dicho de otra forma, que no se cruzan sus líneas. A continuación calcula la envolvente convexa. Y por último los defectos de convexidad.

La zona azul claro corresponde al área cubierta por la envolvente convexa. Los puntos blancos con doble círculo son los que se encuentran sobre el borde de la envolvente, el resto está dentro de ella. Los puntos amarillos son los defectos de convexidad, es decir, los puntos más alejados para cada segmento de la envolvente.

Juan Mellado, 9 Diciembre, 2011 - 09:12

www.experimentalgameplay.com es una web que propone un tema nuevo cada mes e invita a la gente a crear un juego basado en dicho tema propuesto. La única condición es que lo haga una única persona en menos de una semana, aunque tampoco se controla, es ya cuestión de cada cual cumplirla o reconocer que no lo ha hecho. Este mes sin embargo han cambiado las reglas.

experimentalgameplay.com

Hasta ahora la participación ha sido muy variada, hay meses que han alcanzado hasta casi cincuenta juegos y el mes pasado por ejemplo apenas llegaron a cinco. No hay premio, sólo la recompensa a nivel individual que cada uno quiera atribuirse.

Sin embargo en la última convocatoria han cambiado las reglas. Han dado dos meses de plazo (diciembre y enero), y el tema propuesto es crear un juego que funcione con cinco botones, concretamente con las teclas que van del "1" al "5". Han llamado 5 BUTTONS al tema.

La gracia es que van a utilizar una instalación creada a propósito en una sala de exposiciones para exhibir el juego ganador con un proyector y cinco grandes botones de 80cmx80cm, de forma que en vez pulsarlos lo que se hará en realidad será saltar sobre ellos.

Para rematar la faena han añadido premios en metálico:
- Primer lugar: 1200 €
- Segundo lugar: 600 €
- Tercer lugar: 200 €

Y han confirmado que el juego se expondrá en un evento mayor.

Juan Mellado, 7 Diciembre, 2011 - 15:42

Un experimento rápido y un poco tonto con js-aruco usando las sombras como marcadores de realidad aumentada.


Demo online:
www.inmensia.com/files/aruco/debug/debug.html

Juan Mellado, 5 Diciembre, 2011 - 20:15

Otra pieza del rompecabezas que estoy intentando montar. Esta vez una simple conversión de RGB a HSV en JavaScript. Hay mucha información acerca de como hacerlo en Internet, nada nuevo bajo el sol. He creado un pequeño programa que toma una imagen RGB y la convierte a HSV. Para poder ver los resultados he aplicado una pequeña transformación para devolverlos a RGB (no a los valores originales, claro).

Para los que sólo les interese el código, pongo la función de conversión. Admite como entrada los componentes RGB en el rango [0..1] y devuelve un objeto con los componentes HSV. H un ángulo dentro del rango [0..360], y S y V un porcentaje dentro del rango [0..1].

function rgb2hsv(r, g, b){
  var v = Math.max(r, g, b),
      delta = v - Math.min(r, g, b),
      s = v === 0? 0: delta / v,
      h = 0;
   
  if (0 !== delta){
 
    if (v === r){
      h = 60 * (g - b) / delta;
    }else if (v === g){
      h = 120 + (60 * (b - r) / delta);
    }else{
      h = 240 + (60 * (r - g) / delta);
    }
   
    if (h < 0){
      h += 360;
    }
  }
   
  return {h: h, s: s, v: v};
}
Temas: JavaScript
Juan Mellado, 2 Diciembre, 2011 - 11:28

Google ha lanzado la versión alpha de Google APIs Client Library for JavaScript. O lo que es lo mismo, la posibilidad de acceder a través de JavaScript a todos los servicios de Google (Google+, Calendar, Translate, URL Shortener, Maps, ...). Ya existía en versión beta para otros lenguajes como PHP, Python, Java y .NET. Esta nueva versión para JavaScript se une al resto de versiones que se encuentran en fase alpha como las de Ruby, Objective C, GWT y Go.

He hecho una pequeña prueba ejecutando el API de Google+, lanzando consultas para obtener todas las novedades públicas aparecidas recientemente en mi cuenta de Google+ con el siguiente código:

<script src="https://apis.google.com/js/client.js?onload=init">
...
function init(){
  gapi.client.setApiKey('YOUR_API_KEY');

  gapi.client.load('plus', 'v1', function(){

      var request = gapi.client.plus.activities.list({
          'userId': '101388150953455772115',
          'collection': 'public'
        });

      request.execute( function(response){
        //Aquí se recibe la respuesta
        ...
        });
    });
}

Como se observa, hay que cargar el script de cliente (https://apis.google.com/js/client.js) indicando la función a la que queramos que se llame cuando termine de cargarse el script (?onload=init). Una vez cargado el script hay que establecer la clave personal de acceso al API (gapi.client.setApiKey) que podemos conseguir gratuitamente en la APIs Console. Y a continuación invocar al API que se quiera (gapi.client.load), como el de Google+ por ejemplo (plus), indicando la función que se quiere ejecutar, como la de consulta de actividad por ejemplo (gapi.client.plus.activities.list), y donde queremos recibir la respuesta (request.execute).

Para los que quieran probar sin tener que escribir código, las APIs se pueden consultar y ejecutar de forma online a través del APIs Explorer. Una aplicación muy útil para consultar parámetros y examinar resultados.

Utilizando mi ID de usuario en Google+ (101388150953455772115) he hecho una consulta para obtener mis últimas novedades públicas (public) y he obtenido el siguiente objeto respuesta:

Google API Client - JavaScript

Como se observa, hay un ID, un título, una fecha, una serie de urls y un array de objetos. Ese array es el que contiene las últimas novedades aparecidas en mi cuenta. Veamos el primero:

Google API Client - JavaScript

Nuevamente un id, un título, fechas y urls. Con esta información básica ya se podría montar un pequeño listado de novedades en una página web con los títulos y fecha, e incluso actualizarlo periódicamente desde los propios clientes en JavaScript. Pero aún podemos añadir más detalles examinando los campos actor y object:

Google API Client - JavaScript

Google API Client - JavaScript

El actor es el usuario que generó la actividad, y tenemos su id, nombre, url, e incluso un enlace a la imagen de su avatar.

El object es lo publicado, con su contenido completo, el número de veces que se ha compartido, el número de usuarios que han pulsado el botón "+1" sobre él y los comentarios que ha generado. Incluyendo además una lista de adjuntos, que es lo compartido (enlace, foto, vídeo, ...):

Google API Client - JavaScript

Un último punto que no hay que olvidar, es que el número de llamadas que se pueden realizar con un mismo ID está limitado por API y día. Cada API tiene un límite que Google denomina "de cortesía". Cuando en un día se supera dicho límite deja de funcionar hasta el día siguiente.