El blog de CScazorla

Un quine que juega a la serpiente en su código fuente

2019-05-03T00:00:00+00:00

Un quine es un programa que produce su propio código fuente como salida. Un ejemplo en código C sería el siguiente:

main() { char *s="main() { char *s=%c%s%c; printf(s,34,s,34); }"; printf(s,34,s,34); } 

El quine que os presento hoy se llama quinesnake y se trata de un programa para jugar al famoso juego de la serpiente sobre su propio código fuente. El programa se compila solo, por lo que sólo tendremos que hacer ejecutable el código fuente y ejecturlo (el programa invoca a g++ cuando arranca). Para controlar a la serpiente usaremos las teclas w, a, s y d.

El código fuente lo encontráis en Github y tiene una pinta tal que así:

...
s.erase(e,1);s.replace(s.find(L"%d"),2,L"("+s+L")");initscr();start_color();for(
e=0;e<3;){init_pair(e,0,e+9);C(2,e++,1);}noecho();M();while(T())usleep(z<<7);end
win();})x";I G(I x,I y){K 3&s[y*w+x]>>8;}I C(I x,I y,I c){(s[y*w+x]&=~z)|=c<<8;}
...

Si queréis una versión más legible del código, y que además esté comentada, podéis encontrarla aquí.

¿Cómo se creó la intro de Marvel’s Spider-Man?

2019-04-24T00:00:00+00:00

Tras la última Game Developer Conference de este año, Elan Ruskin desarrollador técnico de Marvel’s Spider-Man para PS4 en Insomniac Games, nos explica cómo se desarrolló la espectacular escena inicial del juego.

En el siguiente vídeo explica, usando una cámara de depuración, cómo iban desactivando diferentes elementos del videjuego conforme la cámara se movía, liberando así recursos del sistema para poder cargar en memoria el escenario de la Torre Fisk. Como resultado, el jugador no apreciaba ningún tiempo de carga, y apreciaba una transición perfecta desde la cinemática de Manhattan hasta la ventana de la torre donde comienza el juego.

Also from our #GDC19 tech postmortem: the transition into Fisk Tower in #SpiderManPS4's intro mission. The interior space is much larger than the exterior envelope, and too big to hold in memory at the same time as Manhattan. So we use some careful camerawork to hide the swap! pic.twitter.com/Ur53ZSVGr8
— Elan Ruskin (@despair) 22 de abril de 2019

Podéis encontrar más información sobre este post-mortem técnico y otras charlas detrás-de-las-cámaras en https://www.gdcvault.com/search.php#&category=free&firstfocus=&keyword=spider-man&conference_id=

Libros de programación de Usborne de los años 80

2019-04-23T00:00:00+00:00

Los que seáis padres seguramente conozcáis la editorial Usborne, famosa por la calidad de sus libros infantiles. Además de su serie de libros infantiles Usborne ha estado editando libros de programación desde la década de los 80s. Con motivo del lanzamiento de su último libro, Coding for beginners using Python, Usborne a puesto a libre disposición algunos sus libros más clásicos de los años 80. Podéis descargarlos en la siguiente web:

https://usborne.com/browse-books/features/computer-and-coding-books/

Os lo recomiendo encarecidamente ya que están maravillosamente ilustrados:

Construye tu propia Game Boy con Raspberry Pi

2019-04-22T00:00:00+00:00

El pasado 21 de abril se cumplieron 30 años desde que la primera Game Boy fue lanzada en el año 1989 por Gunpei Yokoi. Esta consola, que ha vendido más de 118 millones de unidades hasta la fecha, marcó un antes y un después en el mundo de las consolas.

Si eres un nostálgico al que esta consola evoca recuerdos inolvidables, ¿qué mejor manera que homenajearle construyendo tú mismo tu propia Game Boy?

Construyendo tu propia Game Boy

Montar un emulador de Game Boy con Raspberry Pi es muy sencillo. Hay numerosos tutoriales en Internet con suficiente información. Personalmente os recomiendo la plataforma Retropie, que tiene soporte para una ingente cantidad de sistemas (NES, Mega Drive, Amstrad, MAME, etc.)

Sin embargo, el punto crítico para construir tu propia Game Boy y que la experiencia sea lo más cercana a la realidad, es la carcasa. Retroflag soluciona ese problema con GPi CASE. Este paquete, compatible con Raspberry Pi ZERO y ZERO W, incluye todo lo que necesitas para montar tu consola: pantalla IPS de 2.8 pulgadas, LEDs, etc.

¿Interesado en crear juegos de Game Boy?

Si siempre has pensado en realizar un videojuego para la Game Boy tienes que echar un vistazo a GB Studio, una herramienta gratuita y muy intuitiva para crear ROMs de Game Boy. No es necesario que tengas ningún conocimiento previo para desarrollar tus propios juegos. Usando su interfaz gráfica podrás diseñar los diferentes niveles y conectarlos entre sí.

¿Por qué hay atasco en los autobuses?

2019-04-03T00:00:00+00:00

En la web de http://setosa.io/bus/ han construido un estupendo simulador de una línea de autobuses urbana. ¿Has esperado alguna vez en una parada de autobús y de repente has visto llegar a dos o tres autobuses juntos? Este simulador nos ayuda a comprender cómo un ligero retraso de cualquier autobús hace que toda la línea se colapse, repercutiendo en largas colas y en un sistema ineficiente.

En cualquier momento podemos pulsar en un autobús para “retrasarlo” y ver cómo impacta al funcionamiento del servicio. Dejando el ratón encima de una parada de autobús podemos ver una gráfica con el tiempo acumulado de espera de los usuarios.

Para construir esta animación han usado varias herramientas diferentes: d3, Angular Material, Coffescript, Browserify y Gulp.

SQL injection crítico en Magento

2019-04-01T00:00:00+00:00

Si utilizas la herramienta de e-commerce Magento debes actualizarla lo antes posible. El viernes publicaron una nueva actualización que corregía más de 35 fallos de seguridad críticos. Entre estos fallos de seguridad se encuentra una inyección de código SQL crítico explotable por usuarios no autenticados del sistema.

Las versiones de Magento afectadas son:

Magento Open Source prior to 1.9.4.1
Magento Commerce prior to 1.14.4.1
Magento Commerce 2.1 prior to 2.1.17
Magento Commerce 2.2 prior to 2.2.8
Magento Commerce 2.3 prior to 2.3.1

Todavía no hay un CVE ID asociado a este fallo pero internamente se le conoce como PRODSECBUG-2198. Ya que Magento almacena información financiera y el histórico de pedidos de los clientes, esta vulnerabilidad resulta realmente grave.

Aprendiendo sobre salud con Juego de Tronos

2019-04-01T00:00:00+00:00

El equipo de Yo, doctor ha creado una serie de infografías ambientadas en Juego de Tronos para explicar algunos problemas de salud (i.e. Hodor y la afasia). Es un orgullo tener gente así en España :)

Creando un sistema de partículas

2019-03-27T00:00:00+00:00

Hoy os quiero enseñar lo sencillo que es hacer un sistema de partículas que os permita hacer efectos de humo, explosiones, o cualquier otra idea que se os ocurra. Utlizaremos el lenguaje de programación Javascript, para que todos podáis probarlo en vuestro navegador y no sea necesario instalar ningún software. No os preocupéis, no necesitamos ningún doctorado en matemáticas o física para generar este sistema :)

Todo el código lo podéis encontrar al final del artículo. Se trata únicamente de dos ficheros:

index.html - HTML para situar el canvas en la pantalla.
main.js - Código Javascript para generar el sistema de partículas.

Para ejecutar la animación sólo tenéis que abrir index.html con cualquier navegador. Este código está basado en las demos PlayfulJS de Hunter Loftis al que he añadido algunos cambios.

Objetivo

Nuestro objetivo es crear un motor que mueva partículas por la pantalla hacia un punto determinado. En nuestro caso, ese punto será el cursor del ratón. Al iniciar la simulación, cada una de las partículas (situadas inicialmente en puntos aleatorios de la pantalla) se verán empujadas hacia la posición donde esté el ratón. Por tanto, lo que tendremos que implementar es un bucle (game loop) que en cada frame

pinte puntos/partículas por la pantalla,
calcule el vector velocidad (dirección y módulo) de cada partícula,
y avance frame a frame la simulación.

Estos tres pasos se ejecutarán (para todo el array de partículas) en nuestro game loop de la siguiente manera:

for (var i = 0; i < particles.length; i++) {
  particles[i].attract(mouse.x, mouse.y);
  particles[i].integrate();
  particles[i].draw();
}

En cada frame de nuestra simulación se llamarán a tres funciones:

attract() - Calcula cuál es la dirección y módulo de velocidad necesaria para cada partícula para alcanzar el punto destino (posición del ratón.)
integrate() - Conocidas las coordenadas actuales y las que se quiere desplazar, realiza los cálculos de integración (posición -> velocidad -> aceleración).
draw() - Dibuja la partícula en su nueva posición en la pantalla.

El sistema de partículas

Lo primero es definir una entidad en Javascript que nos permita gestionar cada partícula. En este caso se ha definido un objeto Particle con dos atributos: su coordenada X e Y en la pantalla.

function Particle(x, y) {
    this.x = this.oldX = x;
    this.y = this.oldY = y;
}

Inicialmente, como las partículas no se mueven, la posición anterior y la actual (tras la ejecución de un frame), será la misma.

Al arrancar la simulación podremos inicializar (en posiciones aleatorias de la pantalla) tantas partículas como queramos mediante el siguiente bucle:

for (var i = 0; i < NUMBER_OF_PARTICLES; i++) {
    particles[i] = new Particle(Math.random() * width, Math.random() * height);
}

El bucle principal

1. Seguimiento del ratón

En esta simulación las partículas siguen la posición del ratón en la pantalla en cada frame. El efecto conseguido es el de un enjambre de partículas siguiendo a un punto.

Como veíamos anteriormente en el bucle principal, a la función attract() se le pasan como parámetros las coordenadas X e Y actuales del ratón. El código de esta función es el siguiente:

Particle.prototype.attract = function (x, y) {
    var dx = x - this.x;
    var dy = y - this.y;
    var distance = Math.sqrt(dx * dx + dy * dy);
    this.x += dx / distance;
    this.y += dy / distance;
};

La distancia desde el punto actual de la partícula, al punto que queremos dirigirnos (la posición del ratón), podremos calcularla mediante el módulo del vector que une dichos puntos

Actualizamos las variables locales this.x y this.y (que representan la posición que queremos alcanzar en el siguiente frame) con los valores deseados. La división por distance provoca que las partículas más cercanas al ratón se desplacen con mayor aceleración (podemos verlo como una fuerza de atracción mayor)

2. Mover las partículas

Tenemos que enseñar a nuestras partículas a moverse por la pantalla. En cada frame hay que decir a cada partícula la nueva dirección y módulo de su velocidad. En el paso anterior calculamos en las variables locales x e y de cada partícula la nueva coordenada a la que queremos que se desplace. Para poder conseguir una velocidad (variación de posición / variación de tiempo), necesitamos integrar.

Un recurso sencillo, y que nos evita tener que integrar, es utilizar la Integración de Verlet. Lo que hacemos es comparar la posición actual de la partícula (la que hemos calculado en el paso anterior y que queremos alcanzar) respecto a su posición en el frame anterior (la que tiene actualmente).

Nuestro proceso de integración de la posición de la partícula de un frame a otro se realiza mediante la siguiente función:

Particle.prototype.integrate = function () {
    var velocityX = (this.x - this.oldX) * DAMPING;
    var velocityY = (this.y - this.oldY) * DAMPING;
    this.oldX = this.x;
    this.oldY = this.y;
    this.x += velocityX;
    this.y += velocityY;
};

Las variables velocityX y velocityY almacenan la diferencia de posición en X e Y entre el frame actual y el frame anterior. Se multiplican por un coeficiente DAMPING para darle cierto toque de rozamiento.

3. Pintar la partícula

El último paso es dibujar en pantalla la posición de la partícula. Para ello haremos uso de la siguiente función:

Particle.prototype.draw = function () {
    if (COLOR_ENABLED) {
        ctx.strokeStyle = '#' + (0x1000000 + (Math.random()) * 0xffffff).toString(16).substr(1, 6);
    } else {
        ctx.strokeStyle = '#ffffff';
    }
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(this.oldX, this.oldY);
    ctx.lineTo(this.x, this.y);
    ctx.stroke();
};

Esta función se encarga de pintar el pixel en la pantalla y moverlo de la posición anterior (this.oldx,this.oldy) a la nueva posición (this.x,this.y).

COLOR_ENABLED es una variable de configuración para indicar si queremos pintar cada partícula de un color diferente. En caso contrario, todas se pintarán en blanco.

Código fuente

index.html

<!doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Sistema de Partículas</title>
</head>
<body style='background: #000; margin: 0; padding: 0; width: 100%; height: 100%;'>
    <canvas id='display' width='1' height='1' style='width: 100%; height: 100%;' />
    <script src="main.js"></script>
</body>
</html>

main.js

var DAMPING = 0.99999; 
var NUMBER_OF_PARTICLES = 300;
var COLOR_ENABLED = false;

function Particle(x, y) {
    this.x = this.oldX = x;
    this.y = this.oldY = y;
}

Particle.prototype.integrate = function () {
    var velocityX = (this.x - this.oldX) * DAMPING;
    var velocityY = (this.y - this.oldY) * DAMPING;
    this.oldX = this.x;
    this.oldY = this.y;
    this.x += velocityX;
    this.y += velocityY;
};

Particle.prototype.attract = function (x, y) {
    var dx = x - this.x;
    var dy = y - this.y;
    var distance = Math.sqrt(dx * dx + dy * dy);
    this.x += dx / distance;
    this.y += dy / distance;
};

Particle.prototype.draw = function () {
    if (COLOR_ENABLED) {
        ctx.strokeStyle = '#' + (0x1000000 + (Math.random()) * 0xffffff).toString(16).substr(1, 6);
    } else {
        ctx.strokeStyle = '#ffffff';
    }
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(this.oldX, this.oldY);
    ctx.lineTo(this.x, this.y);
    ctx.stroke();
};

var display = document.getElementById('display');
var ctx = display.getContext('2d');
var particles = [];
var width = display.width = window.innerWidth;
var height = display.height = window.innerHeight;
var mouse = { x: width * 0.5, y: height * 0.5 };

for (var i = 0; i < NUMBER_OF_PARTICLES; i++) {
    particles[i] = new Particle(Math.random() * width, Math.random() * height);
}

display.addEventListener('mousemove', onMousemove);

function onMousemove(e) {
    mouse.x = e.clientX;
    mouse.y = e.clientY;
}

requestAnimationFrame(frame);

function frame() {
    requestAnimationFrame(frame);
    ctx.clearRect(0, 0, width, height);
    for (var i = 0; i < particles.length; i++) {
        particles[i].attract(mouse.x, mouse.y);
        particles[i].integrate();
        particles[i].draw();
    }
}

Markdown2PDF

2019-03-26T00:00:00+00:00

Hoy os quiero enseñar la aplicación Markdown2PDF. Se trata de una página web que nos permite escribir texto en formato markdown y convertirlo en PDF directamente desde el navegador.

Podemos escribir nuestro texto markdown en el navegador o podemos subir un fichero .md desde nuestro ordenador. Automáticamente el texto se renderizará en la pantalla mostrando enlaces, bloques de código, emojis, etc.

Pulsando en el botón Transform podremos generar el fichero PDF.

Aventuras conversacionales con Microsoft TextWorld

2019-03-25T00:00:00+00:00

¿Sois del selecto grupo de personas que crecísteis con las aventuras conversacionales? ¿Disfrutásteis durante horas y horas tecleando comandos en La Aventura Original, Zork, El Quijote o Megacorp?

Si habéis respondido sí, y además siempre habéis soñado con poder desarrollar vosotros mismos una aventura conversacional, tenéis que probar TextWorld. Esta herramienta Open-Source desarrollada en Python por Microsoft permite generar y simular aventuras conversacionales.

A partir de una serie de parámetros como el tamaño del mapa, número de objetos, extensión de la aventura, complejidad, etc. permite generar aventuras y jugarlas. Por ejemplo, para generar un mapa y en la carpeta tw_games sólo tendríamos que ejecutar en la consola:

tw-make custom --world-size 5 --nb-objects 10 --quest-length 5 --seed 1234 --output tw_games/custom_game.ulx

Para jugar a este juego sólo tendríamos que ejecutarlo mediante:

tw-play tw_games/custom_game.ulx

Por cierto, si os interesa este mundillo no dejéis de leer este fabuloso artículo de John Tones en Xataka