Propuesta para desafíos javascript 2014

[marlanga]

Tiene problemas con decodificar cadenas morse un poco mas largas, parece como si entrara en bucles infinitos; básicamente es un browser-killer xd. Pero estás cerca.

Por otro lado, la respuesta debe ser un array de una sola dimensión, aunque si no tienes la idea feliz, mejor sigue haciéndolo igual, partiendo la frase en palabras y codificando cada palabra.

[Lynxcraft]

ok corregido el problema de la memoria XD

lo de quitar el multidimecional a ver si mañana lo acabo XD

http://jsfiddle.net/lynxcraft/gSyGf/1/

[marlanga]

Está casi perfecto, pero por ejemplo, la cadena "Cesar" tiene 2764 posibles soluciones, pero tu algoritmo calcula que son 2872. Debe de estar metiendo repetidos o cadenas erróneas, échale un vistazo. Usa el de Pantaláimon para comprobar cuáles son las salidas correctas.

[Lynxcraft]

http://jsfiddle.net/lynxcraft/gSyGf/3/

Corregido pero he visto que tarda más de 500 misilsegundos que el de
Pantaláimon lo cual me deprime un poco

en fin con esta ya van dos en la que me quedo resagado tengo que estudiar más

[marlanga]

Para controlar los tiempos, te recomiendo que uses la consola de chrome y console.time("identificador"); tu-código-mágico(); console.timeEnd("identificador");

Y que el de pantalaimon sea más rápido que el tuyo, no te preocupes; también es mas rápido que el mío, ya que exprimió la eficiencia hasta posiblemente el extremo xd. De hecho por MP me envió una segunda versión aún más rápida xd.

El mío es éste:
http://jsfiddle.net/marlanga/EdZSy/
En él puedes ver cómo combinar tus arrays de soluciones para formar cadenas de soluciones, que es lo que pedía. Eso tiene un pequeño coste de procesamiento, que hará que tu algoritmo tarde aún más xd.
Y como decía, es más lento que el de pantalaimon, pero oye, al menos es mas sencillo de entender, alguna ventaja tenía que tener xd.

Y ahora no sé que hacer; no creo que venga mucha más gente a participar, y encima los pocos que lo han hecho, me dan confianza de continuidad solo vosotros dos xd.
¿Pongo otro, o morimos en paz?

[Pantaláimon]

Trinchera!

[marlanga]

Esa expresión no sé como tomármela xd.
Y pon el link de tu mejora del morse anda, lo mejor que tiene escribir buen código es poder restregárselo por el morro a los demás. Si no, ¿qué sentido tiene participar el retos de programación? xd.

[Pantaláimon]

Era referente a la última frase que has dicho. De morir en paz, nada. Trinchera y a resistir.

http://jsfiddle.net/jefebrondem/8yzr4/2/

Ahora estaba pensando en podar un poco las soluciones en decodificaMorse:
- solo aceptar soluciones con menos de tres letras seguidas repetidas.
- no más de ¿4? vocales seguidas
- no más de 4 consonantes seguidas. (A parte de la palabra angstromio, creo que como mucho hay palabras de 4 consonantes seguidas en castellano ).

Pero no sé si lo haré. No es demasiado sano estar pensando todo el día en un código obsoleto. Así que espero nueva propuesta para desquitarme de esta.

[Lynxcraft]

Iniciado por marlanga

Para controlar los tiempos, te recomiendo que uses la consola de chrome y console.time("identificador"); tu-código-mágico(); console.timeEnd("identificador");

Y que el de pantalaimon sea más rápido que el tuyo, no te preocupes; también es mas rápido que el mío, ya que exprimió la eficiencia hasta posiblemente el extremo xd. De hecho por MP me envió una segunda versión aún más rápida xd.

El mío es éste:
http://jsfiddle.net/marlanga/EdZSy/
En él puedes ver cómo combinar tus arrays de soluciones para formar cadenas de soluciones, que es lo que pedía. Eso tiene un pequeño coste de procesamiento, que hará que tu algoritmo tarde aún más xd.
Y como decía, es más lento que el de pantalaimon, pero oye, al menos es mas sencillo de entender, alguna ventaja tenía que tener xd.

Y ahora no sé que hacer; no creo que venga mucha más gente a participar, y encima los pocos que lo han hecho, me dan confianza de continuidad solo vosotros dos xd.
¿Pongo otro, o morimos en paz?

Muchas gracias por los consejos marlanga y por los animos que das al ver los puntos buenos del código .

Me gustaría otro reto tengo que ir afinando.
Lo único que os comento que este finde estaré ausente un par de semanas lo digo para que no pienses que he abandonado, en cuando vuelva si hay mas retos me pondría con ellos.

Estaria bien pensar algo con IndexedDB lo dejo ahi XD

[marlanga]

Pantaláimon, eso mismo pensé yo, en incluir podas de soluciones con ciertas reglas ortográficas para descartar cadenas absurdas. Pero como ya noté que me había pasado de dificultad con lo de decodificar, y que con ello eliminé de un plumazo a posible audiencia (también es verdad, que de poco nivel jajaj xd), me callé como una perra para no hacer aún más sangre.

Bueno, pues como yo me debo a mis fans, he aquí otro reto que me acabo de inventar, o quien sabe si es una tarea escolar pendiente de entrega o un trabajo que me pidió un cliente al que cobraré en cuanto entregue:

Imaginad un tablero de ajedrez de 8x8 casillas, numeradas las filas y columnas con índices de 0 a 7.

Pues teneis que hacer una función a la que yo le pueda pasar dos reinas blancas y un rey negro, y me diga "jaque mate" si el rey está en jaque mate, "libre" si el rey no está en jaque, "ahogado" si el rey no está en jaque, pero no se puede mover, o un número entero con la cantidad de posiciones a las que el rey puede escapar si está en jaque. Ojo, si el rey tiene una reina adyacente, y esta reina se la puede comer porque no está "cubierta" por la otra reina, cuenta como escapatoria.

Con esta pinta:

Código Javascript:

function ajedrez(reinas,rey){
    //Si jaque mate
    return "jaque mate";
    //Si jaque
    return 3; //Esto quiere decir que el rey escapa del jaque moviéndose a 3 posibles casillas.
    //Si rey no está en jaque, pero no se puede mover a ninguna casilla:
    return "ahogado";
    //Si no jaque
    return "libre";
}
 
var reinas=[[0,0],[1,1]]; //Fila 0, columna cero; Fila 1, columna 1
var rey=[0,1]; //Fila 0, columna 1
console.log(ajedrez(reinas,rey));
 

Lynxcraft, ¿dos semanas fuera? Que futuro mas negro tiene la propuesta de reto, lo mismo cuando vuelvas ya me han baneado. Motivos van a tener xd.

[marlanga]

Como un rayo de luz inspiradora me ha llegado la idea de que es posible que el rey esté ahogado, es decir, no esté en jaque, pero no se pueda mover (y con ello la partida termina en tablas). Añadido.

[jonni09lo]

Aportando a estas competencias y para que @marlanga no se sienta mal por la poca participación, presento esto. Me costó un poco adaptar una sola función para que trabaje con el número máximo de movimientos de la pieza, pero al final lo pude hacer.

PD: Quedo atento mejoras, consejos, regaños y golpes de remo

Saludos

[marlanga]

Aún no he creado una batería de pruebas, pero a primera vista, parece que funciona bien; aunque me hayas ignorado y en vez de devolver el número de posiciones válidas, me devuelvas coordenadas.

[jonni09lo]

Iniciado por marlanga

Aún no he creado una batería de pruebas, pero a primera vista, parece que funciona bien; aunque me hayas ignorado y en vez de devolver el número de posiciones válidas, me devuelvas coordenadas.

Es más chulo así además solo es añadir .length a movimientosLibres y listo

Saludos

[Pantaláimon]

Pero estaria bien seguir a pies juntillas la especificación para poder facilitar la corrección. Bienvenido jonni09lo!

Aquí dejo mi solución:
http://jsfiddle.net/jefebrondem/9b2Q6/

[ouijaonline]

ajedrez por fin algo fácil, ha ver que que ta se me da

Solo tengo una duda como se juega?

[Pantaláimon]

Iniciado por ouijaonline

ajedrez por fin algo fácil, ha ver que que ta se me da

Solo tengo una duda como se juega?

Bienvenido ouijaonline.

Para facilitar el asunto estamos publicando nuestro código en http://jsfiddle.net y usando la consola de Chrome para mostrar la salida.

Quizá deberían especificarse unas pautas a seguir en el primer post.

[marlanga]

Bueno, pues esta vez parece que todos funcionan.
Pero en cuanto a tiempos de ejecución, el de pantalaimon sorprendentemente dobla al de jonni09lo.

Y aquí pongo el mío, que en tiempo de ejecución hace trizas al resto xd.
http://jsfiddle.net/marlanga/3DvSy/

El foro no permite modificar post si debajo tiene respuestas.

[Pantaláimon]

Felicidades marlanga.

Me ha sorprendido que el hecho de marcar las casillas del tablero sea más eficiente que hacerlo sin marcarlo. Pero analizando de más cerca el algoritmo, el número de pasadas es siempre menor en tu caso. Esto me ha hechoa pensar una manera de resolverlo marcando menos casillas.

Por otro lado, creo que todos podríamos mejorar el algoritmo en el caso de que el resultado sea "libre". Pues esa condición se cumple cuando no hay jaque y hay almenos una posibilidad de escapatoria (no hace falta contar todas las posibilidades de escapatoria).

Un saludo!

[marlanga]

Creo que lynx tarde o temprano mandará el suyo, pero mientras tanto, pondré otro reto, pero cambiando totalmente de tercio: toca manipulación de imágenes.


RETO NUEVO

Quiero una función que simplemente me pixele una imagen.
Daré pistas:
http://jsfiddle.net/marlanga/Ld4ht/1/

Para evitar el cross-origin que se produciría al manipular los píxeles de una imagen alojada en un servidor remoto, he tenido que meter una imagen en base 64, así que tardará un poco en cargar.

Es un ejemplo simple de cómo dibujar una imagen en un canvas. Es obligatorio usar mi avatar, o te echaré del reto javascript para el resto de tu vida.
Con ctx.getImageData podeis recuperar un array de una dimensión del canvas con los colores de los píxeles. Cada color tiene 4 componentes: los típicos R, G y B, y Alpha. Están seguidos en el array, es decir, en array[0] está el R del primer píxel, en array[1] el G del primer pixel, en array[2] el B del primer pixel, en array[3] el Alpha del primer pixel, en arr[4] el R del segundo pixel, y así sucesívamente.

Si modificas ese array de píxeles, es posible volver a metérselo al canvas para que lo dibuje con ctx.putImageData.

La función pixelar acepta un parámetro pixeles, que es el número de píxeles que tendrá el lado de cada "cuadradillo" pixelado de la imagen final. En el ejemplo he puesto 50. Si la imagen mide 200x200 y le digo pixelar(50), me pixelará la imagen en 16 (4 de lado, 4 de alto) cuadrados de 50x50. Si el tamaño de la imagen no es divisible por el argumento de pixelado, simplemente los "cuadrados pixelados" de los extremos serán en realidad rectángulos de menor tamaño.

Así que venga, a currar.


Para los que usuarios que quieran participar: Los retos no caducan. Podéis hacer el que queráis por muy viejo que sea.

Música de ambientación: http://www.youtube.com/watch?v=koaPuo9EAt4

Resumen de retos completados:

+Reto, buscar tercer elemento mas pequeño de un array
Envío de Lynxcraft - Correcto
Envío de Panino5001 - Casi correcto
Envío de pantalaimon - Correcto
Envío de aijona - Correcto
Envío de IsabelM - Correcto


+Reto codificación morse
Envío de IsabelM - Lo importante es participar
Envío de lynxcraft - correcto
Mi envío - Super-hyper-mega correctísimo. Sin trato de favor.
Envío de Pantalaimon - Correcto


+Reto de ajedrez jaque al rey
Envío de jonni09lo - Correcto
Envío de Pantalaimon - Correcto
Mi envío - Fascinantemente perfecto.

[Panino5001]

Bueno, es medio tramposa porque las hice hace mucho
http://jsfiddle.net/panino/RaF8F/
http://jsfiddle.net/panino/qvUUs/

[marlanga]

Sí, es un poco tramposa porque coges el primer pixel de cada "cuadradillo" que representa la zona a pixelar para darle todo el color a la pixelación, en vez de aplicar otras técnicas mas costosas que no nombraré, pero que tienen resultados más precisos con imágenes complejas.

Pero el detalle fundamental es que no usaste mi avatar, así lo evaluaré como casi incorrecto.

Para no volver locos a los participantes: Que este ejemplo haya dibujado los pixelados a base de pintar cuadrados, es una opción; pero la que yo puse en el ejemplo, que no quiere decir que sea mejor ni peor, es modificar directamente el array de píxeles que devuelve el canvas. Ninguna de las opciones es mejor o peor; sólo son alternativa igual de válidas. Pintar rectangulos supongo que es un poco mas rápido que modificar los píxeles uno a uno del array, pero no es un factor determinante. Os aconsejo que modifiqueis los píxeles del array, porque quizás en el futuro caiga otro de manipulación de imágenes en el que seguramente estaréis obligados a trabajar así.

En cuanto a la pixelación con círculos, dejas huecos entre los círculos al pintarlos con la misma lógica que los cuadrados. Se soluciona pintando el doble de círculos, tampando así los huecos.

[HackmanC]

Hola,

Iniciado por Panino5001

Bueno, es medio tramposa porque las hice hace mucho ...

Solo experimenté un problema, me mató a Firefox en todos los casos (con todos sus cachivaches instalados).

Iniciado por marlanga

Sí, es un poco tramposa porque coges el primer pixel de cada "cuadradillo" que representa la zona a pixelar para darle todo el color a la pixelación, en vez de aplicar otras técnicas mas costosas que no nombraré, pero que tienen resultados más precisos con imágenes complejas.
...

No he probado a resolver ese problema, pero era exactamente lo primero que se me ocurrió, todos los algoritmos que he visto hacen exactamente eso, tomar un pixel y colorear todos los aledaños con el mismo color, sino tienen otros nombres que no son pixelar. Creo que está difícil mejorar el algoritmo de Panino5001 sino es optimizar el desempeño. Voy a intentar resolverlo de alguna otra forma, aunque creo que va a estar difícil.

Saludos,

[Pantaláimon]

¿Debo entender que deben promediarse los colores de todos los pixeles de un recuadro? Si es ese el caso, aquí dejo la solución:
http://jsfiddle.net/jefebrondem/745Ds/
Esta vez me he preocupado más de crear un API reaprovechable que de la eficiencia en sí.

Edit.: Tengo dudas a la hora de manipular el tipo Uint8ClampedArray. Quizá hay maneras más directas de extraer los elementos de 4 en 4 y obtener el color en RGBA.

[marlanga]

Sí, calcular la media es una forma, la más usada para pixelar, y supongo que la que mejor queda en todos los casos.

Pero puedes experimentar con otras ideas. Por ejemplo, usar la moda, permitiendo que varios colores sean el mismo si la distancia entre ellos no supera un umbral determinado. O coger los 4 píxeles de las esquinas del cuadrado, y usarlos para hacer la media sólo con ellos. Imaginad mas locuras y usadlas, en este reto no hay una única forma de pixelar.

El objeto Uint8ClampedArray no es más que un array en el que todos sus elementos se fuerzan a ser enteros sin signo de 8 bits, que es precisamente el formato de cada componente RGBA que acepta el canvas. Como ya sabrás.

Si te fijas, con getImageData puedes extraer un sólo pixel, que te devolverá en un array de 4 posiciones. Y con putImageData, puedes volver a meterlo. Obviamente no es razonable extraer y meter muchos píxeles uno a uno. Pero más allá de eso...


El mío también hace la media:

http://jsfiddle.net/Ld4ht/2/

Pero es muy rápido porque recorro directamente los arrays a partir de su índice, y sin usar ninguna ayuda externa.

Y ahora no sé si poner otro ejercicio, esperar mas respuestas, o esperar mas tiempo. Me lo pensaré.

[Pantaláimon]

Bueno, después de mirar mi código y el tuyo me he quedado bastante mosca. Pues en mi caso, al igual que tú, sólo hago una pasada para leer y otra para escribir en el array. Por otro lado, no esperaba que la sobrecarga por intermediar con funciones supusiera un coste tan elevado de tiempo. Así que el problema debía ser justamente dentro de los ciclos de las funciones forEach y map que he implementado. He querido hacerlas con la misma lógica que sus gemelas en la clase Array. Es decir, que el callback aceptara los típicos argumentos elem, index y array donde elem en este caso se correspondería con el color rgba, index, con el offset de data, y array, con el mismo data.

Esto me ha llevado a realizar cosas tan debora recursos como estas en map:

Código Javascript:

var color  = new Uint8ClampedArray( 4 );
var offset = i*w+j;
// construir color
color = new Uint8ClampedArray( 4 );
for( var k = 0; k < 4; ++k )
    color[k] = this.data[4*offset+k]; 
//pasarlo al callback
var newcolor = callback( color, offset, this.data );
// modificar el pixel en la posicion offset a newcolor
for( var k = 0; k < 4; ++k )
    this.data[4*offset+k] = newcolor[k];
 

Por eso antes dudaba si esa era la mejor manera de manipular los Uint8ClampedArrays. Pues hubiera estado bien extraer de un plumazo los 4 bytes como un entero de 32 bits. getImageData no me ha convencido para ello. Al final he encontrado el concepto de ArrayBufferView que me ha permitido tener una vista del buffer data como si fuera un Uint32Array. Para mi sorpresa, las operaciones con estos elementos también han resultado ser costosas.

Así que al final he optado por llegar a un compromiso entre reutilización y rapidez. Para ello, en los callbacks de forEach y map sólo he pasado el offset y el data y la rapidez a mejorado mucho. Luego he cambiado el diseño de la clase Rectangle para reducir el número de operaciones dentro de los bucles y, así, ha quedado:
http://jsfiddle.net/jefebrondem/745Ds/2/

Y ahora no sé si poner otro ejercicio, esperar mas respuestas, o esperar mas tiempo. Me lo pensaré.

Ahora que lo pienso, para no cansarnos estaría bien dosificar y, por ejemplo, hacer uno por semana. El problema de ello es que el hilo baja muy rápido y posibles nuevos participantes no lo verían. Pero esto ya depende de los moderadores.

Un saludo!

[marlanga]

Aquí hay comparativas de distintos métodos. Es curioso, porque el usar cadenas de 32 bits obliga a tener en cuenta la codificación endian que tiene el procesador en el que se ejecuta el código.
http://jsperf.com/canvas-pixel-manipulation/88
Se ve cómo el acceso directo al array de 8 bits vapulea al resto en chrome.

En cuanto a los problemas, pues supongo que eso haremos. Uno o dos a la semana va bien, el próximo caerá el viernes por la tarde o el sábado.

[marlanga]

Podeis seguir haciendo retos anteriores, pero para que no se quede muerta la cosa, añado otro:

RETO NUEVO
Primera aproximación a las inteligencias artificiales. TRON

Video: http://www.youtube.com/watch?v=-3ODe9mqoDE
Código disponible:http://jsfiddle.net/7ZQcT/1/

Ésta es una burda imitación del juego de las motos de TRON. El juego consiste en varias motos que se mueven por un mapa, con el objetivo de sobrevivir el máximo de tiempo posible. Las motos van dejando una estela por donde pasan, y si otra moto se topa con una estela, o contra una pared, muere. Por supuesto, las motos no pueden detenerse, siempre avanzan a la misma velocidad, si no, no tendría gracia.

En este primer intento no hay enemigos: La moto correrá sola en el mapa. El reto consiste en hacer los máximos puntos posibles. Y cada punto se gana moviéndose a otra casilla sin morir.

Vuestro trabajo consiste en modificar el método TRON.prototype.ia=function(){ //codigo maravilloso }
Las reglas son:
-No podéis modificar ningún atributo ni método del objeto TRON. Excepto éste "ia" que estais programando.
-Podeis ver el valor de dos atributos de la clase TRON: this.jugador, que es un array con la coordenada (Y, X) del jugador, y this.mapa, que es un array bidimensional del escenario.
Una casilla a cero en this.mapa significa que es una casilla libre a la que os podeis mover. Una casilla a 1 significa que es una pared, y una casilla a 2 significa que es una estela que tu moto ya ha dejado, y que no puedes atravesar.
-Podeis crear vuestra propia clase y o funciones auxiliares FUERA DEL OBJETO TRON que os ayuden a realizar cálculos adicionales, si los necesitais.
-El método ia SIEMPRE debe devolver una dirección, representada en el objeto "DIRECCION".
-Para las pruebas, el jugador se colocará inicialmente en alguna coordenada aleatoria.
-El tamaño del mapa puede cambiar en anchura o en altura, pero de momento no meteré obstáculos dentro del mapa. Sólo tendran las paredes negras envolviendo a todo el mapa.

Código Javascript:

TRON.prototype.ia=function()
{   
    return DIRECCION.derecha;
};
 

Ahora mismo, siempre se devuelve DIRECCION.derecha. De vosotros depende que retorne mejores movimientos a partir de la posición del jugador y del estado del mapa.

Así que venga, a currar.


Música de ambientación: http://www.youtube.com/watch?v=zTDeEJyCmNA

Resumen de retos completados:

+Reto, buscar tercer elemento mas pequeño de un array
Envío de Lynxcraft - Correcto
Envío de Panino5001 - Casi correcto
Envío de pantalaimon - Correcto
Envío de aijona - Correcto
Envío de IsabelM - Correcto


+Reto codificación morse
Envío de IsabelM - Lo importante es participar
Envío de lynxcraft - correcto
Mi envío - Super-hyper-mega correctísimo. Sin trato de favor.
Envío de Pantalaimon - Correcto


+Reto de ajedrez jaque al rey
Envío de jonni09lo - Correcto
Envío de Pantalaimon - Correcto
Mi envío - Fascinantemente perfecto.

+Reto de pixelar imágenes
Envío de Panino5001 - Correcto
Mi envío - La referencia a seguir.
Envío de Pantalaimon - Correcto

[Pantaláimon]

¡Interesante!

De momento no me viene la idea feliz. Esto de que el motorista no tenga "memoria" del recorrido hecho y sólo pueda tomar la decision a partir de la posición y la situación del tablero actual me limita bastante. Seguiré pensando ;·)

[marlanga]

Dije que tienes permisos para consultar los valores de this.map y this.jugador, que son el mapa y la posición actual del jugador, pero podéis almacenar lo que quieras en vuestra propia estructura de datos. Lo que está prohibido es modificar los atributos originales de la clase TRON. Lo único que debe hacer el método IA es devolver un DIRECCION.arriba, DIRECCION.derecha, DIRECCION.abajo o DIRECCION.izquierda, y ese método será llamado constantemente para mover la moto por el mapa.

Todo lo demás está permitido. Puedes hacer copia del mapa, de la posición del jugador, de la hora actual en australia... lo que necesites. Para ello, crea una nueva estructura de datos EXTERNA, iniciala en el WINDOWS.ONLOAD y utilízala dentro del método IA de TRON. Pero no se puede modificar ningún atributo de la clase TRON.