successful
Informations sur le tutoriel
Auteur : remvst
Licence : Copie non autorisée
Catégorie : Javascript
Créé le : 14/01/2013 à 19h21
Mis à jour le : 15/01/2013 à 23h02
Vu : 518 fois
Avancement : 90 %
0 fans
pdfConvertir en PDF
Cours : Derniers tutoriels
Créer un script...
Les fonctions et les...
Les catégories dans...
HTML5 et CSS3 : Les...
HTML5 et CSS3 : les...
Les sélecteurs jQuery
News : Dernières news
Recharger son...
Des fréquences de la...
Bluetouff lance un...
Une nouvelle taxe pour...
La NASA, l'ISS et Linux
Voir la Terre de 1984...
Dernier sondage
(voir)

(6 votes)
Oui
sondage sondage sondage 16.67 %
Non
sondage sondage sondage 83.33 %
Derniers inscrits
Wiki vardenafil
Sizegenetics
Sizegenetics Coupon
Buy cialis doctor online
Dapoxetine dosage
Soutenir le Geek Café
la boutique du geek cafe
index
Les cours
Site Web
Javascript
Créer du bruit en HTML5

Créer du bruit en HTML5

Au cours de ce tutoriel, nous allons voir comment bruiter une image sur une page web via HTML5 et Javascript, à travers trois méthodes différentes.

Qu'est-ce que le bruit ?

Avant de commencer, expliquons ce qu'on désigne par "bruit".

Si vous n'avez aucune notion de traitement du signal, lorsqu'on vous parle de bruit, vous pensez sûrement à des sons indésirables, quelque-chose, donc dont on se passerait bien.

Cette définition est toujours valable en traitement du signal. Le bruit, c'est une perturbation ajoutée sur le signal d'origine.

Voici un exemple de courbe bruitée :

image image


On a donc une courbe sinusoïdale parfaite à la base, à laquelle on ajoute un bruit, une composante aléatoire inutile mais qui existe bel et bien. Qu'on le veuille ou non, il faut faire avec. Selon le niveau de bruit appliqué, on peut reconnaître (ou non) l'allure du signal d'origine.

C'est tout pour les notions théoriques, qui vous serviront peut-être un jour.

Quoiqu'il en soit, si on transpose cela sur l'image, le bruit, ce sont les parasites sur votre vieille télévision qui capte mal.

Un exemple en image :

image image

C'est cet effet que nous allons essayer de reproduire.

Mise en place du code

Pour bien commencer, prenons notre page HTML avec simplement le canvas pour afficher l'image, et une référence au script qui s'occupera du bruit.

Code : html4strict
  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4.  
  5. 	</head>
  6.  
  7. 	<body>
  8. 		<canvas id="canvas-bruit" width="200" height="200"></canvas>
  9.  
  10. 		<script src="bruit.js"></script>
  11. 	</body>
  12. </html>


Pensez à changer le chemin vers le script Javascript en fonction de votre environnement.

Le canvas fera 200 pixels de large sur 200 de haut. J'ai volontairement choisi un petit canvas, car de trop grandes dimensions pourraient faire planter votre navigateur, selon la méthode utilisée.

Pour ce qui est du Javascript, commencez par prévoir l'utilisation de l'API requestAnimationFrame. Cette API permet de demander au navigateur de prévoir de nouvelles images de l'animation. Elle fonctionne comme setTimeout(), sauf que vous ne pouvez pas lui spécifier le délai. On lui passe donc en paramètre uniquement la fonction à appeler.

Rassurez-vous, pour utiliser cette API, il vous suffit de copier ce bout de code, qui permet de s'adapter peu importe le navigateur :

Code : javascript
  1. // API requestAnimationFrame
  2. var requestAnimFrame = window.requestAnimFrame = (function(){
  3. 	return  window.requestAnimationFrame       || 
  4. 			window.webkitRequestAnimationFrame || 
  5. 			window.mozRequestAnimationFrame    || 
  6. 			window.oRequestAnimationFrame      || 
  7. 			window.msRequestAnimationFrame     || 
  8. 			function(callback){
  9. 				window.setTimeout(callback,1000/60);
  10. 			};
  11. })();
  12. var cancelAnimFrame = window.cancelAnimFrame = (function(){
  13. 	return  window.cancelAnimationFrame       || 
  14. 			window.webkitCancelAnimationFrame || 
  15. 			window.mozCancelAnimationFrame    || 
  16. 			window.oCancelAnimationFrame      || 
  17. 			window.msCancelAnimationFrame     || 
  18. 			function(){
  19. 				window.clearTimeout.apply(window,arguments);
  20. 			}
  21. })();


Ensuite, voici le code Javascript de base que l'on utilisera :

Code : javascript
  1. // Variables globales
  2. var can,ctx;
  3.  
  4. // On attend le chargement de la page
  5. document.addEventListener('DOMContentLoaded',function(){
  6. 	// Une fois la page chargée, on va charger l'image qu'on va bruiter
  7. 	var img = new Image();
  8. 	img.onload = function(){
  9. 		// On récupère le canvas et son contexte. On pourrait aussi 
  10. 		// vérifier si canvas est supporté par le navigateur, mais ce 
  11. 		// n'est pas l'objet ici.
  12. 		can = document.getElementById('canvas-bruit');
  13. 		ctx = can.getContext('2d');
  14.  
  15. 		// Mise en route de l'animation
  16. 		(function(){
  17. 			// A chaque image de l'animation, on réaffiche notre photo
  18. 			ctx.drawImage(img,0,0);
  19.  
  20. 			// A laquelle on ajoute du bruit
  21. 			bruit();
  22.  
  23. 			// Et enfin, on demande au navigateur de prévoir la prochaine
  24. 			// image de l'animation.
  25. 			requestAnimFrame(arguments.callee);
  26. 		})();
  27. 	};
  28. 	img.onerror = function(){
  29. 		console.log('Unable to load ' + this.src);
  30. 	};
  31. 	img.src = 'background.png';
  32. });

Il consiste simplement à charger une image, puis met en route l'animation qui consiste à afficher l'image puis la bruiter.

Je ne détaille pas ce bout de code (il est normalement suffisamment commenté), sachez juste que ce qui nous intéresse, c'est la fonction bruit(), que nous allons écrire par la suite.

Pensez tout de même à changer le chemin de l'image de fond à utiliser.

Méthode par dessin

La première méthode est la plus simple : elle consiste à dessiner de petits rectangles partout sur l'image, avec une opacité plus ou moins élevée. On parcoure donc simplement l'image, et pour chaque pixel on dessine un rectangle par-dessus, qui sera plus ou moins visible.

En voici le code:

Code : javascript
  1. function bruit(){
  2. 	ctx.fillStyle = 'white';
  3. 	for(var x = 0 ; x < can.width ; x++){
  4. 		for(var y = 0 ; y < can.height ; y++){
  5. 			ctx.globalAlpha = Math.random() * 0.2;
  6. 			ctx.fillRect(x,y,1,1);
  7. 		}
  8. 	}
  9. 	ctx.globalAlpha = 1;
  10. }


Une fois toute l'image parcourue, on obtient un résultat plutôt correct. Cependant cette méthode a plusieurs inconvénients :

Tout d'abord il ne s'agit pas d'un vrai bruit. On a simplement dessiné des rectangles blancs par-dessus l'image.

Mais surtout, son principal inconvénient est qu'elle est extrêmement lente ! Imaginez, ici nous avons un canvas de 200 par 200, ce qui fait que pour chaque frame de votre animation, on doit dessiner 40000 petits rectangles ! Dans le cas d'une simple image avec un bruit fixe, cela peut être une bonne méthode, facile à mettre en place, mais pour une animation, c'est à proscrire. Vous risquez même de faire planter votre navigateur.

L'avantage est tout de même qu'on peut facilement définir une taille de pixel pour le bruit, ce qui est relativement inutile.

Méthode par modification de l'image

Cette deuxième méthode consiste à mettre en place un "vrai" bruit. Cette fois-ci, nous n'allons pas dessiner par-dessus l'image, nous allons directement modifier ses pixels.

Pour cela, nous avons besoin de la fonction getImageData(), qui permet de récupérer les données de l'image, c'est-à-dire ses 4 canaux :

  • un canal rouge
  • un canal vert
  • un canal bleu
  • un canal alpha, que nous n'allons pas modifier
En fait, nous allons récupérer un tableau immense dans lequel ces trois canaux seront placés les uns à la suite des autres. Cela signifie qu'à l'indice 0, nous aurons le canal rouge du premier pixel, à l'indice 1 son canal bleu...
Par conséquent, dans le cas présent, notre canvas fait 200 pixels par 200 pixels, ce qui fait un total de 400000 pixels. Avec quatre canaux par pixel, le tableau obtenu contiendra donc 1600000 cases. C'est vous dire à quel point il est immense !

Cependant, ici, nous n'avons pas besoin d'accéder à un pixel particulier. Il suffit donc de parcourir tout le tableau quatre à quatre, et de bruiter chacun des canaux rouge, vert et bleu. Ceux-ci contiennent des valeurs entre 0 et 255, il faut donc prendre garde à ne pas dépasser 255, et à ne pas donner des valeurs négatives.

La fonction getImageData() prend 4 paramètres, qui représentent le rectangle duquel vous souhaitez extraire les données. Vous pouvez donc tout à faire n'extraire qu'une partie de votre image.

Cela devrait être plus clair avec le code à l'appui :

Code : javascript
  1. function bruit(){
  2. 	// On récupère de façon brute les données de l'image (pixels)
  3. 	var imageData = ctx.getImageData(0,0,can.width,can.height);
  4.  
  5. 	// Et ensuite, on va parcourir chaque pixel et le bruiter
  6. 	for(var i = 0 ; i < imageData.data.length ; i += 4){
  7. 		// Pour faire simple, on va bruiter tous les canaux de la même 
  8. 		// façon, mais vous pouvez toujours ajouter un bruit différent
  9. 		// pour chaque canal.
  10. 		var bruit = ~~(Math.random() * 64 - 32);
  11.  
  12. 		// On applique ensuite ce bruit, sans oublier de borner les 
  13. 		// valeurs entre 0 et 255.
  14. 		imageData.data[i] = Math.min(255,Math.max(0,imageData.data[i] + bruit)); // bruitage du rouge
  15. 		imageData.data[i+1] = Math.min(255,Math.max(0,imageData.data[i+1] + bruit)); // bruitage du vert
  16. 		imageData.data[i+2] = Math.min(255,Math.max(0,imageData.data[i+2] + bruit)); // bruitage du bleu
  17. 	}
  18. 	ctx.putImageData(imageData,0,0);
  19. }


Le résultat obtenu est meilleur qu'avec la première méthode. On a cette fois-ci un vrai bruit. De plus, c'est nettement plus rapide. Cependant nous pouvons faire quelque-chose de plus rapide encore.

Sachez simplement qu'en utilisant getImageData(), vous avez accès aux pixels de votre canvas, et donc vous pouvez y effectuer tous types de traitements et de filtres. Vous pouvez par exemple passer votre image en noir et blanc, la flouter... Bref, vous pouvez faire ce que vous voulez, mais en sachant que pour une animation, c'est bien trop lent : on doit toujours parcourir tous les pixels. Cela dit, vous pouvez toujours vous amuser avec.

Méthode par motif

Cette troisième et dernière méthode est la plus rapide. Le résultat est semblable à celui de la première méthode.

Rappelez-vous de la première méthode : le problème de vitesse était dû au fait qu'on devait parcourir chaque pixel et dessiner par-dessus, le tout via Javascript, qui n'est pas aussi rapide qu'un langage compilé.

Imaginez maintenant qu'on crée un masque de bruit dès le début, et que l'on n'ait plus qu'à le dessiner par-dessus notre image de base. La plupart des traitements ne dépendent alors plus de Javascript, mais du navigateur.

C'est là l'astuce de cette méthode : on crée un motif de bruit, qu'on va redessiner partout sur l'image, et on va le décaler à chaque fois un peu plus pour donner une vraie impression de bruit qui ne soit pas statique.

Pour cela, commençons par créer ce motif. Il suffit simplement de créer un canvas temporaire (qui ne sera pas visible à l'écran), auquel on applique la première méthode (bruitage par le dessin), pour enfin créer un motif.

En voici le code :

Code : javascript
  1. var motifBruit = (function(){
  2. 	// Création d'un canvas temporaire (qui ne sera pas affiché à l'écran)
  3. 	var canvasTmp = document.createElement('canvas');
  4. 	var ctxTmp = canvasTmp.getContext('2d');
  5.  
  6. 	// On définit la taille du motif. Attention, le motif va être 
  7. 	// répété, donc plus il est petit, plus ce sera visible.
  8. 	canvasTmp.width = 200;
  9. 	canvasTmp.height = 200;
  10.  
  11. 	// Ensuite, on applique la première méthode à ce canvas
  12. 	for(var x = 0 ; x < canvasTmp.width ; x++){
  13. 		for(var y = 0 ; y < canvasTmp.height ; y++){
  14. 			ctxTmp.globalAlpha = Math.random() * 0.2;
  15. 			ctxTmp.fillRect(x,y,1,1);
  16. 		}
  17. 	}
  18.  
  19. 	// Enfin, on crée le fameux motif
  20. 	var motif = ctxTmp.createPattern(canvasTmp,'repeat');
  21.  
  22. 	// Et on le stocke dans motifBruit
  23. 	return motif;
  24. })();


Maintenant que nous avons notre motif (dans la variable motifBruit), voyons comment faire pour le
décaler à chaque frame de l'animation.

Les motifs démarrent toujours selon l'origine (0,0) du contexte. Vous ne pouvez pas (encore) définir le point de départ du motif. Il faut donc déplacer l'origine du contexte. Rien de plus simple : la fonction translate() est là pour ça ! Il faut juste ne pas oublier de dessiner ensuite au bon endroit, puisque l'origine de notre repère a été décalée.

Voici donc le code final :

Code : javascript
  1. function bruit(){
  2. 	// L'idée, ici, c'est de décaler l'origine du motif à chaque image.
  3. 	// Pour cela, on va translater l'origine du contexte.
  4. 	var decalageX = Math.floor(Math.random() * 200);
  5. 	var decalageY = Math.floor(Math.random() * 200);
  6.  
  7. 	ctx.save();
  8.  
  9. 	// Translation du contexte
  10. 	ctx.translate(decalageX,decalageY);
  11.  
  12. 	// Maintenant que le contexte n'a plus la même origine, on peut 
  13. 	// dessiner un rectangle avec le motif voulu.
  14. 	// Attention : l'origine du contexte a été déplacée, il faut donc
  15. 	// en prendre compte lorsqu'on dessine le rectangle.
  16. 	ctx.fillStyle = motifBruit;
  17. 	ctx.fillRect(-decalageX,-decalageY,can.width,can.height);
  18.  
  19. 	ctx.restore();
  20. }


Cette méthode est la plus rapide des trois. On peut atteindre un nombre d'images par seconde élevé, contrairement aux autres. Elle ne donne pas un aussi bon résultat que la seconde, mais un résultat très correct tout de même.

Notez également qu'on aurait pu créer à l'avance une image contenant le masque de bruit, pour ensuite l'afficher au-dessus de notre image de fond. Cependant, pourquoi charger une image alors qu'on peut la créer rapidement via le code, et pour au final peu de valeur ajoutée ?

Au cours de ce tutoriel, nous avons donc pu voir trois méthodes pour créer ce fameux bruit. Chacune a ses avantages et inconvénients, mais pour des animations ou des jeux, préférez la troisième.

Publicité
Je vous recommande aussi la lecture des tutoriels suivants
HTML5 et CSS3 : Les vidéos responsives
HTML5 et CSS3 : les nouvelles balises
Les sélecteurs jQuery
Introduction à la balise <canvas>
Ajouter une icone Apple Touch, un favicon et une tuile Windows 8 pour son site
Système de validation en jquery
Les medias queries
Commentaires
Ajouter un commentaire rapide (Plus d'options)






Page : 1
Pseudo Commentaires
Il n'y a aucun message
Pseudo Commentaires
Page : 1