javascript

Pixelator es una pequeña aplicación web para dibujar imagenes pixel art. Está desarrollado con HTML5 y Javascript Vanilla.

Herramientas:

• Lápiz de trazo libre
• Goma de borrar
• Cubo de pintura (flood fill)
• Trazo de rectas
• Dibujo de rectángulos
• Dibujo de círculos
• Color picker
• Carga y guardado

Demo

Código Fuente

https://github.com/sergiss/pixelator

A continuación dejo un ejemplo de como implementar un reloj digital con React.JS

Código fuente:

https://github.com/sergiss/react-clock

Siguiendo la tendencia del juego de palabras Wordle, he desarrollado mi propia versión en Javascript. Esta traducido a tres idiomas, (inglés, español y catalán) y no he implementado ninguna restricción de tiempo, por lo que se puede jugar tantas veces como se desee.

El juego consiste en encontrar la palabra de cinco letras correcta siguiendo las pistas y usando un máximo de cinco intentos.

En la versión de castellano y catalán, he restringido las palabras del diccionario de modo que solo se permiten palabras que no contengan ningún signo de ortografía como acentos, diéresis, etc., con el fin de mejorar la jugabilidad y equilibrar la dificultad.

Código fuente:

https://github.com/sergiss/words-game

El flickering o bleeding, es un glitch gráfico que aparece a la hora de renderizar escenarios creados a partir de tilesets. El problema está derivado por el redondeo de punto flotante producido en los shaders, en concreto a la hora de mapear las coordenadas UV de las texturas. El resultado son unas lineas verticales u horizontales que aparecen de forma aleatoria entre los tiles, estropeando la experiencia visual del programa.

Una solución rápida y efectiva a este problema, es añadir pixeles extra en la periferia de cada tile, de forma que estos correspondan en color a los pixeles vecinos. A continuación se muestra un ejemplo:

En el ejemplo se muestra como se ha pasado de tener un tileset con las images totalmente pegadas, a otro con las imágenes separadas por pixeles extra, con los que se proyecta la imagen en todas las direcciones, de forma que cuando suceda el redondeo de coordenadas UV, se procesen pixeles que estén en el contexto deseado y así eliminar ruidos indeseados, como es el flickering o bleeding.

Con el fin de realizar este proceso de forma rápida y sencilla, he escrito esta aplicación web:

LIVE DEMO

Código Fuente:

https://github.com/sergiss/tileset-extruder