Animer la toile pour ressembler au bruit de la télévision

Question

J'ai une fonction nommée generateNoise() qui crée un élément canvas et peint des valeurs RGBA aléatoires dessus; ce qui donne l'apparence de bruit.

---

Ma Question

Quel serait le meilleur moyen d'animer indéfiniment le bruit pour donner l'apparence de mouvement. Afin qu'il ait plus de vie?

---

JSFiddle

function generateNoise(opacite) {
    if(!!!document.createElement('canvas').getContext) {
        return false;
    }
    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d'),
        x,y,
        r,g,b,
        opacite = opacite || .2;

        canvas.width = 55;
        canvas.height = 55;

        for (x = 0; x < canvas.width; x++){
            for (y = 0; y < canvas.height; y++){
                r = Math.floor(Math.random() * 255);
                g = Math.floor(Math.random() * 255);
                b = Math.floor(Math.random() * 255);

                ctx.fillStyle = 'rgba(' + r + ',' + b + ',' + g + ',' + opacite + ')';
                ctx.fillRect(x,y,1,1);

            }
        }
        document.body.style.backgroundImage = "url(" + canvas.toDataURL("image/png") + ")";

}
generateNoise(.8);

Answer 1

Le mien ne ressemble pas exactement au vrai bruit TV, mais il est néanmoins similaire. Je parcours simplement tous les pixels sur le canevas et je modifie les composants de couleur RGB de chaque pixel à une coordonnée aléatoire pour lui donner une couleur aléatoire. La démo se trouve sur CodePen.

Le code est le suivant :

// Mise en place du canevas - taille, définition d'un arrière-plan et obtention des données de l'image (tous les pixels) du canevas.
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
canvas.width = 400;
canvas.height = 400;
canvasData = ctx.createImageData(canvas.width, canvas.height);

// Écouteurs d'événements qui définissent la taille du canevas sur celle de la fenêtre lorsque la page se charge, et chaque fois que l'utilisateur redimensionne la fenêtre
window.addEventListener("load", windowResize);
window.addEventListener("resize", windowResize);

function windowResize(){
  canvas.style.width = window.innerWidth + 'px';
  canvas.style.height = window.innerHeight + 'px';
}

// Une fonction qui manipule le tableau de données de couleur des pixels créé ci-dessus en utilisant createImageData()
function setPixel(x, y, r, g, b, a){
  var index = (x + y * canvasData.width) * 4;

  canvasData.data[index] = r;
  canvasData.data[index + 1] = g;
  canvasData.data[index + 2] = b;
  canvasData.data[index + 3] = a;
}

window.requestAnimationFrame(mainLoop);

function mainLoop(){
  // Parcours de toutes les données de couleur et changement de chaque pixel en une couleur aléatoire à une coordonnée aléatoire, en utilisant la fonction setPixel définie précédemment
  for(i = 0; i < canvasData.data.length / 4; i++){
    var red = Math.floor(Math.random()*256);
    var green = Math.floor(Math.random()*256);
    var blue = Math.floor(Math.random()*256);
    var randX = Math.floor(Math.random()*canvas.width); 
    var randY = Math.floor(Math.random()*canvas.height);

    setPixel(randX, randY, red, green, blue, 255);
  }

  // Place les données de l'image que nous avons créé et manipulé sur le canevas
  ctx.putImageData(canvasData, 0, 0);

  // Et puis on recommence...
  window.requestAnimationFrame(mainLoop);
}

Answer 2

Vous pouvez le faire comme ceci :

window.setInterval('generateNoise(.8)',50);

Le 2ème argument 50 est un délai en millisecondes. Augmenter 50 le ralentira et le diminuer l'accélérera.

cependant.. cela va sérieusement affecter les performances de la page web. Si c'était moi, je ferais le rendu côté serveur et afficherais quelques itérations d'images en tant que gif animé. Ce n'est pas exactement pareil que l'aléatoire infini, mais ce serait un énorme gain de performance et à mon avis, la plupart des gens ne le remarqueront même pas.