Ver Mensaje Individual
  #50 (permalink)  
Antiguo 17/12/2013, 15:30
Avatar de marlanga
marlanga
 
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 13 años, 3 meses
Puntos: 206
Respuesta: Propuesta para desafíos javascript 2014

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.

Última edición por marlanga; 17/12/2013 a las 16:03