A repartir para que tengan

Por culpa de un compañero de trabajo he caído en la adicción de hacer katas de código en CodeWars. Por supuesto, en uno de mis lenguajes favoritos: JavaScript.

Lo bueno: He arrancado humildemente por los katas de nivel más bajo, con el tino de crear soluciones que están dentro de las que se consideran las más adecuadas (?), o por lo menos, las que se parecen más a las mejor valoradas (Puntito para el ego).

Lo malo: … en realidad no hay nada malo. Se aprende, se ejercita la mente y se aprende (Eso creo que ya lo dije).

Lo que sí resulta importante es que la mayoría de las soluciones, aquellas más valoradas, están siendo hechas en ECMA6. De a poco nuestro viejo y querido JavaScript ha crecido y se hizo adulto. Y por supuesto, nosotros necesitamos crecer con este.

Con lo que me encontré en uno de los katas (Y que claramente ni sabía que estaba por ahí) fue con los (Sí, tres puntos). Un nuevo operador, el operador de dispersión (Calculo que podemos llamarlo de esa forma).

Este operador permite tomar una colección de valores y asignarlos o “traspasarlo” a una lista independiente de valores o variables. De esta forma, si tenemos una función con muchos parámetros, es posible tomar un array y enviarlo como parámetro para que cada uno de los índices del mismo sean asignados a cada una de las variables de la firma (A alguien le suena apply?).

En TypeScript:

let f = (v: any, r: any) => {
  console.log(v, r);
};

var args = ['hola','mundo'];
f(...args);

En el código, cada índice del array irá a parar a cada una de las variables (v y r). Existen otras aplicaciones, pero para eso es cuestión de dejar volar la mente.


Dibujando X en la pantalla

Estoy escribiendo unos artículos que saldrán publicados en fascículos, dentro de muy poco, para aprender a programar desde la óptica de un desarrollador Full Stack (Aquel que puede programar tanto en el cliente como en el servidor). Mientras escribía, me distraje y se me ocurrió hacer un graficador de algunas funciones simples. Si a alguien le interesa, lo dejo por acá.

var canvas = document.createElement('canvas');
canvas.width = 800;
canvas.height = 600;
document.getElementsByTagName('body')[0].appendChild(canvas);
var ctx = canvas.getContext('2d');

function dibujar(f) {
  ctx.clearRect(0, 0, 800, 600);
  var p = 0;

  for (var i = 0; i < 800; i+=0.1) {
    var r = f(i);
    ctx.fillText('x', r[0], r[1]);
  }
}

Y estas son algunas funciones:

var periodo = 0;
var amplitud = 100;
var sobre_eje_y = 200;
var sobre_eje_x = 400;

function seno(tiempo) {
    periodo += 0.01;
    return [tiempo, (Math.sin(periodo) * amplitud) + sobre_eje_y];
}

capture

function coseno(x) {
    periodo += 0.01;
    return [(Math.cos(periodo) * amplitud) + sobre_eje_x, x];
}

capture

function circulo() {
    periodo += 0.1;
    return [(Math.cos(periodo) * amplitud) + sobre_eje_x, (Math.sin(periodo) * amplitud) + sobre_eje_y];
}

capture


Coding Dojo

highres_457780477El lunes hicimos un Coding Dojo de JavaScript. Algunos ejercicios para romper cabezas y pensar mejores formas de hacer código.

Un interesante ida y vuelta, con rotación frente al teclado de los asistentes.

El código quedó en el repositorio: https://github.com/MatiasIac/JsDojo


SINO y la Global Game Jam

capturePasó otra GGJ y con esta, según me han dicho, son 7 años seguidos participando. En esas furiosas 48 horas de código, ninguna hora de descanso y de ideas alocadas, siempre termina saliendo algún juego que nos divierte, a nosotros como programadores, y colateralmente, a los usuarios del mismo.

Después de 7 años, la evolución en los juegos que hacemos se nota. De tomarnos las 48 horas para hacer un runner, a tomarme 2 horas en hacer otro en la actualidad. De intentar agregar gráficos para suplir la falencia técnica, a enfocarnos en la mecánica del juego como elemento principal, incluso si este análisis nos consume la mayoría del tiempo.

Llegué tarde, no pude escuchar la consigna ni ver los videos introductorios, pero la cosa decía algo como: Ondas u olas (Waves).

Como siempre, corrieron muchas ideas, intercambiando con todos las diferentes posibilidades. Y como siempre, muy entrada la noche del primer día, no teníamos mucho. Aparecieron arduinos, gamepads, frameworks, motores de física. Probamos algunas ideas con Phaser, pero como en otras oportunidades, el framework y las diferentes implementaciones de los motores de física nos defraudaron. Era hora de arremangarse y codear todo (O casi todo).

wp_20170123_001 wp_20170123_002 wp_20170123_003

Muchas horas de ecuaciones más tarde… llegamos a lo que necesitábamos y por fin teníamos el núcleo del juego andando.

Sino parece simple, pero es un juego sustentado por la matemática. No solo para dibujar una onda en la pantalla sino por poder modificar esa onda y desplazarse por la misma. Entender como el tiempo, frecuencias, amplitudes y fases impactan en el cálculo y el estado de la onda. Un juego que, de alguna forma, nos recordó a RouteLoop, otro resultado de una GameJam donde las matemáticas eran la columna que lo sostenía todo.

Y como ya estábamos con el cerebro en funcionamiento, este juego también se llevó de premio un creador de mapas mediante imágenes.

map1 map2 map3 map4

 

 

Cada mapa, en vez de ser escrito en el código, es tomado desde una pequeña imagen y reconstruido en el juego. Si bien es una técnica bastante conocida, se suele pasar por alto. En mi caso fue un momento de nirvana cuando mi compañero de equipo me dijo: Leamos el mapa desde una imagen!

Simplemente mi cabeza explotó y se puso a trabajar en el código para que eso fuera realidad.

El resultado de todo esto se encuentra en GitHub: https://github.com/MatiasIac/Sino

Una Jam extraña, o diferente a otras, tal vez reflejo de esos 6 años de participación.


Evento en Córdoba – Coding Dojo de JavaScript

karate-computerComo muchos de estos eventos, aparecen, se discuten, y en menos de una hora ya tenemos fecha, lugar y temática.

El lunes que viene, a las 6:30 de la tarde haremos un Coding Dojo de JavaScript.

La idea surgió de Juan Gabardini (Un tipo de esos que transpiran conocimientos).

La idea de un dojo de código es plantear un problema o una serie de ejercicios para que los desarrolladores resuelvan. Mientras se meten las manos en el código, se comparten las posibles soluciones. Un moderador o posible guía (En esta oportunidad seré yo) intentará darle solución o contexto a las diferentes dudas.

En definitiva, un evento más que interesante. Pueden anotarse aquí: https://www.meetup.com/agiles-arg/events/237045139/


Ya en librerías

Programación de videojuegosFinalmente el libro de desarrollo de videojuegos con HTML5 y JavaScript ha salido a la luz.

En Argentina, puedes conseguirlo en librerías y kioskos, así cómo desde la página de la editorial.

http://www.redusers.com/noticias/publicaciones/programacion-de-videojuegos/


Patrón Singleton con JavaScript

Seguimos con esta idea de presentar diferentes patrones de diseño desde la mirada de JavaScript. En esta oportunidad les traigo el patrón singleton.

En muchos lenguajes de programación este patrón ya viene encapsulado en la propia sintaxis. Usar, por ejemplo, un tipo static en C# es básicamente lo mismo que un singleton, pero sin tener que escribir el código del patrón y al mismo tiempo con ventajas sobre el manejo de hilos y procesos.

En otros lenguajes, como en el caso de JavaScript, aún tenemos que hacerlo al viejo estilo (O por lo menos eso queremos para que este post tenga sentido).

Este patrón nos permite, para resumirlo de forma rápida, obtener una misma instancia de determinado objeto. Una ventaja de esto sería si necesitamos que un proceso particular no pueda ser manejado desde diferentes objetos por más que sean una copia del mismo código.

Un ejemplo simple de imaginar (Aunque no relacionado de forma directa a JavaScript) sería el de tener un formulario para una aplicación de escritorio, el cuál se abre al presionar un botón. Si para abrir este formulario necesitáramos crear un nuevo objeto del mismo, tendríamos copias de este formulario tras cada creación. Con un singleton, por el contrario, podríamos llamar al mismo formulario una y otra vez asegurándonos que siempre será el único y originalmente creado el que se muestre al usuario.

Pero vamos con el código para JavaScript:

(function (w) {
 var _instance = null;
 
 var singleton = function () {
  this.URL = "";
 };
 
 singleton.prototype.conectar = function () {
  console.log("Conectando a ", this.URL);
 };
 
 w.conector = {
  getInstance: function () {
   if (_instance === null) {
    _instance = new singleton();
   }
 
   return _instance;
  }
 };
}(window));

Analicemos un poco el código. Lo que usamos para generar todo el objeto es una función auto ejecutada (Tiene otros nombres, pero puede que ese nombre ayude a entender cómo funciona). Esta función se ejecuta automáticamente y debido a la forma en cómo JavaScript maneja las variables y su alcance (Closure) podremos mantener la variable _instance a la espera de una instancia de un nuevo objeto.

Luego crearemos en la variable singleton lo que sería una representación de nuestro objeto (Como si fuese una clase en otros lenguajes). Esta posee una variable URL y una función conectar.

Por último, inyectaremos al objeto window (Padre del árbol de objetos en el navegador) un objeto llamado conector y que tendrá una función getInstance. Es esta función la que nos permite crear y manejar el singleton. En ella, cada vez que alguien pide una instancia de nuestro singleton verificamos si la variable _instance tiene ya una referencia al objeto en cuestión. Si no la tuviere, creamos un nuevo objeto y retornamos ese valor, pero si por el contrario ya hubiera sido instanciado por otra llamada, entonces retornaremos el mismo objeto ya creado, haciendo que el consumidor de nuestro objeto siempre obtenga la misma referencia al objeto singleton.