Un style graphique que j'adore, c'est vraiment le Pixel-Art ! Avec la mode du 8 bits, plus une image devient pixelisée et carrée, plus elle est cool. C'est pour cela que j'ai souhaité me faire un avatar en pixel-art sauf que j'avais oublié une chose : je suis une vraiment tanche en dessin ! Et bien entendu, n'ayant pas la patience de colorier pixel par pixel une image, j'étais un peu bloqué.
Toutefois, ces temps-ci, développant un peu en HTML5 (canvas, ça tue !!), j'ai découvert tout un ensemble de possibilités graphiques plutôt pratique.
Plus que tout, l'élément que j'utilise actuellement massivement pour mon projet perso (Stay tuned! J'en dirai davantage plus tard) m'a permit à lui tout seul de développer la fonction que je présente aujourd'hui : data
data est en fait une propriété de l'objet getImageData. getImageData a pour particularité de récupérer les informations d'une portion rectangulaire du canvas. La propriété data retourne un tableau unidimensionnel de taille largeur * longueur * 4. Pour un multiplicateur 4 ? Parce que, et c'est là tout l'intérêt, chaque pixel est divisé en quatre éléments :

• Rouge
• Vert
• Bleu
• Alpha

Ainsi, pixeliser une image consiste à prendre la couleur du pixel à une position (x,y) et dessiner à part de cet axe un carré dont l'arête a correspond à la pixelisation attendue puis recommencer l'opération aux positions (x+a,y) et (x,y+a). Simple, non ?
Pour ceux pour qui les cours de géometrie datent de Mathusalem, il suffit d'utiliser la fonction suivante :

function pixelate(canvas, square_size) {
	var ctx = canvas.getContext("2d");
	var img_data = ctx.getImageData(0, 0, canvas.width, canvas.height);
	var data = img_data.data;
	for (var y = 0; y < canvas.height; y += square_size) {
		for (var x = 0; x < canvas.width; x += square_size) {
			var pos = 4 * (y * canvas.width + x);
			var i0 = data[pos];
			var i1 = data[pos + 1];
			var i2 = data[pos + 2];
			ctx.fillStyle="rgb(" + i0 + "," + i1 + "," + i2 + ")";
			ctx.fillRect(x, y, square_size, square_size);			
		}
	}
}

La fonction prend deux arguments, le canvas où opérer la pixelisation, et la taille de la pixelisation attendue. Afin de montrer la fonction en action, je l'ai couplé à un timer setInterval qui double la taille de pixelisation toutes les 200 millisecondes. Pour voir le résultat, cliquez juste sur Pixeliser.