Para utilizar todas las funcionalidades que ofrece este sitio, es necesario tener JavaScript habilitado.

Uno de los memes que más me gusta es el de Tenso. Este meme se caracteriza por aumentarle el tamaño a una imagen para resaltar algo inusual o cómico. La imagen se divide en varios recuadros (generalmente en 4) y cada uno se va  acercando un poco más al objetivo a resaltar. En el último recuadro esta escrita la famosa palabra Tenso.

El principio es sencillo, cierto? Porque no programamos un generador de imágenes Tenso en PHP y GD? Debería ser fácil de lograr! Empecemos por la teoría!

Tenemos una imágen como esta:

Encontramos la porción que queremos resaltar y trazamos un punto hasta el centro (o a nuestro punto inicial).

Ahora tenemos que dividir ese vector por la cantidad de recuadros que queremos tener. Seguramente con el teorema de Pitágoras podríamos calcular la distancia y dividir ese valor, luego marcar los puntos en la recta con la famosa Y=mx+b. Yo elegí ver Xdestino, restarle Xinicio y dividir el resultado por la cantidad de recuadros. Eso mismo hice con el eje Y. Progresivamente iré sumando esos valores a las coordenadas que tenga.

De ahí en adelante solo hay que parar en cada punto, centrarlo, hacer zoom y seguir al siguiente recuadro. En el último escribimos Tenso.

Tenemos que contemplar los casos que podrían causar problemas.

  • Que tán grande va a ser el factor que vamos "zoomear"?
  • Que va a pasar si se escoge un punto que este muy cercano a una esquina?

En mi opinión, deberiamos iniciar con un factor de aumento igual a 2X. Para resolver el segundo problema, la idea es asegurarnos que si la imagen no cabe en el recuadro, continuar aumentando el zoom hasta que quepa.

Cuales son los requisitos? Inicialmente necesitaremos una librería que nos permita manipular imágenes, con GD es suficiente. También necesitaremos una fuente/letra para poder escribir "Tenso" en la imagen, en este caso usaré la fuente impact.ttf, la puedes buscar por internet y guardarla junto a tu script.

Ya que tenemos la teoría lista y cumplimos con los requisitos, podemos continuar al código. La base de nuestro generador es la capacidad de aumentarle el tamaño a una imágen, así que aprendamos a hacerlo con las funciones imagecreatetruecolor e imagecopyresampled.

Cojamos la foto lorito.jpg como ejemplo:

Como le hacemos zoom? Mira el código:

Después de ejecutar el script, el resultado será:

Ahora que sabemos usar el zoom, como hacemos para escribir un texto centrado? Y que a su vez tenga bordes negros? Necesitaremos imagecolorallocate, imagefontwidth e imagettftext con una fuente en ttf. Vamos el código:

El resultado:

Ya salimos de la parte más difícil, lo demás es cuestión de imaginación y un poco de sentido común. Con estas herramientas, puedes continuar y crear tu generador de imágenes Tenso. Yo escribí un generador, que puedes encontrar en https://gist.github.com/mpratt/3152284#file-tenso-php

De hecho subí una demostración de mi generador. Lo único que debes hacer es especificar un punto en la imagen y generar el meme. Pruébalo aquí!

Con respecto a la imágen al inicio de esta entrada, puedes ver el resultado aquí. Tengo otro par de ejemplos que usan mi código, como este y este otro.

Gracias por leer y nos vemos en una próxima edición de Aprendiendo con Memes. Chao!

Comentarios