Discussion :

[aertys]

bonjour,

j'ai tenté de créer une application js qui devait, à base de canvas html5, colorier chaque pixel de la page d'une couleur aléatoire.

voici mes codes :

html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<script type="text/javascript" src="js/dessin_aleatoire.js"></script>

js ;

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
(function () {
    window.addEventListener ('load', function () {
 
          function color_rand () {
               return (Math.random () * 255);
          }
 
        var canvas = document.createElement ('canvas');
            canvas.style.width = '100%';
            canvas.style.heigth = '100%';
        var myhtml = document.getElementsByTagName("html")[0],
            mybody = document.getElementsByTagName("body")[0];                     
 
        mybody.appendChild(canvas);
 
        if (!canvas) {
            alert("Impossible de récupérer le canvas");
            return;
        }
 
        var context = canvas.getContext('2d');
 
        if (!context) {
            alert("Impossible de récupérer le context du canvas");
            return;
        }
 
          for (var i = 0 ; i < window.innerWidth ; i++) {
               for (var j = 0 ; j < window.innerHeigth ; j++) {
                    context.fillStyle = "rgb (" + color_rand () + "," + color_rand () + "," + color_rand () + ")";
                    context.fillRect ( i, j, 1, 1 );
               }
          }
 
     });
 
})();

le problème est que quand on le lance il ne m'affiche rien, j'ai donc ouvert la console qui m'a donné une petite erreur insignifiante de syntaxe que j'ai déjà résolue mais maintenant il n'y a meme plus rien dans la console.

une idée ?

[NoSmoking]

Bonjour,
il y à au moins 2 choses à dire

• la notation pour une valeur en rgb est rgb( suivi de 3 valeurs séparées par une virgule et terminée par une parenthése fermante ).
• Les valeurs doivent être des entiers [0-255] ou des pourcentages avec le caractère %

Tout écart à cette règle n'est pas interprété.

Pour résumer

• dans la ligne "rgb (" + color_rand () + "," + color_rand () + "," + color_rand () + ")", supprime l'espace entre rgb et la parenthèse ouvrante (.
• return (Math.random () * 255) doit être remplacé par return parseInt(Math.random () * 255) ou encore Math.round(255*Math.random()).

[progdebutant]

Salut

Tu colores un pixel en créant un rectangle (plein) d'un pixel ?
Il n'y a pas une commande plus spécialisée pour dessiner un pixel en HTML5 ?

[p3ga5e]

Il n'y a pas une commande plus spécialisée pour dessiner un pixel en HTML5 ?

Si et cela s »appelle un PixelShader !
Une sorte de microprogramme écrit en GLSL parallélisant le calcul de chaque pixel d’une surface, et s’exécutant sur les unités de calculs de la carte graphique.

Bien que cet techno date d’une 20 année, elle est malheureusement toujours ignoré par les développeurs qui préfèrent les bonnes vielles boucle itératives …

[progdebutant]

Je me suis renseigné un peu sur pixel shader, ça a l'air complexe, un truc de 3D non ?

J'ai trouvé cette librairie pour javaScript : webgl-utils.js

Qui fait ça et plein d'autres choses comme des maths par exemple.

[p3ga5e]

Ce n’est pas plus complexe en GLSL qu’en JavaScript , sauf pour la fonction random qui n’existe pas en GLSL , bien qu’ils existent des techniques basés sur le bruit
L’avantage du PixelShader est qu’il reste performant, peut import la volumétrie Pixel
Et moi j’en ai marre de tomber sur des sites qui font ramer mon navigateur

[aertys]

bonsoir

j'ai effectué ce que nosmoking m'a dit, mais je dois avoir encore une erreur quelque part car il ne fait toujours rien. Re-voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
(function () {
    window.addEventListener ('load', function () {
 
          function color_rand () {
               return Math.round (Math.random () * 255);
          }
 
        var canvas = document.createElement ('canvas');
            canvas.style.width = '100%';
            canvas.style.heigth = '100%';
        var myhtml = document.getElementsByTagName("html")[0],
            mybody = document.getElementsByTagName("body")[0];                     
 
        mybody.appendChild(canvas);
 
        if (!canvas) {
            alert("Impossible de récupérer le canvas");
            return;
        }
 
        var context = canvas.getContext('2d');
 
        if (!context) {
            alert("Impossible de récupérer le context du canvas");
            return;
        }
 
          for (var i = 0 ; i < window.innerWidth ; i++) {
               for (var j = 0 ; j < window.innerHeigth ; j++) {
                    context.fillStyle = "rgb(" + color_rand () + "," + color_rand () + "," + color_rand () + ")";
                    context.fillRect ( i, j, 1, 1 );
               }
          }
 
     });
 
})();

avez-vous une autre idée ?

[progdebutant]

Salut

T'as essayé sans les espaces ? :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

return Math.round(Math.random() * 255);

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

context.fillStyle = "rgb(" + color_rand() + "," + color_rand() + "," + color_rand() + ")";

Vérifie là où tu as une commande suivie d'une parenthèse et tu enlèves l'espace.

Et puis moi j'aurais bien séparé deux trucs :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
var couleur="rgb(" + color_rand() + "," + color_rand() + "," + color_rand() + ")";
context.fillStyle=couleur;

On sait jamais...

[danielhagnoul]

J'ai posté une réponse à cette discussion ce matin.

Soit elle a disparu, soit elle est postée au mauvais endroit, soit j'ai fait une fausse manœuvre.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<canvas id="canvasID" width="500" height="500"></canvas>

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function drawCanvas( id, width, height ){
  var ctx = document.querySelector( '#' + id ).getContext( "2d" );
 
  ctx.fillStyle = "#000000";
  ctx.fillRect( 0, 0, width-1, height-1 );
 
  var
    img = ctx.getImageData( 0, 0, width, height ),
    pix = img.data,
    z = -1;
 
  // retourne X tel que : min <= X <= max
  function intRandom( min, max ){
      return Math.floor( Math.random() * ( max - min + 1 ) + min );
  }
 
  for( var y = 0; y < height; y++ ){
    for( var x = 0; x < width; x++ ){
      pix[z += 1] = intRandom( 0, 255 );
      pix[z += 1] = intRandom( 0, 255 );
      pix[z += 1] = intRandom( 0, 255 );
      z += 1;
    }
  }
 
  ctx.putImageData(img, 0, 0);
}
 
drawCanvas( "canvasID", 500, 500 );

Pour modifier l'image plusieurs fois, il faut écrire :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var
  width = 800,
  height = 500,
  ctx = document.querySelector( '#canvasID' ).getContext( "2d" );
 
ctx.fillStyle = "#000000";
ctx.fillRect( 0, 0, width-1, height-1 );
 
var img = ctx.getImageData( 0, 0, width, height );
 
function drawCanvas(){
  var
    pix = img.data,
    z = -1;
 
  // retourne X tel que : min <= X <= max
  function intRandom( min, max ){
      return Math.floor( Math.random() * ( max - min + 1 ) + min );
  }
 
  for( var y = 0; y < height; y++ ){
    for( var x = 0; x < width; x++ ){
      pix[z += 1] = intRandom( 0, 255 );
      pix[z += 1] = intRandom( 0, 255 );
      pix[z += 1] = intRandom( 0, 255 );
      z += 1;
    }
  }
}
 
setInterval( function(){
  drawCanvas();
  ctx.putImageData(img, 0, 0);
}, 5000 );

[p3ga5e]

Mais vous allez arrêter d’itérer sur les pixels .....

une version pixel shader dispo ici

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
uniform float time;
float snoise(in vec2 co)
{
	return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
}
 
void main(void) 
{
	float red = snoise(vec2(gl_FragCoord.x*cos(time),gl_FragCoord.y*sin(time))); 
	float green = snoise(vec2(gl_FragCoord.y*cos(time),gl_FragCoord.x*sin(time)));
	float blue = snoise(reflect(normalize(vec2(atan(green,red),time), gl_FragCoord.xy));
	gl_FragColor = vec4(red, green, blue, 1.0 );
}

[aertys]

bonsoir

j'ai essayé tout ce que Progdebutant m'a dit de faire mais rien ne marche.

[NoSmoking]

Je suis un peu confus car je pensais l'avoir signalé, height et non heigth.

[aertys]

merci beaucoup ça marche très bien maintenant.

[Watilin]

une version pixel shader dispo ici

Cette page est-elle censée fonctionner toute seule ? Parce que chez moi, je ne vois qu'un canvas blanc, et il n'y a rien dans la console…

[p3ga5e]

Oui
Cela fonctionne sans plugin toute fois ton navigateur doit disposer de l’accélération hardware et donc de WebGL

Je me demande combien de personne sont dans ton cas, car il est certain que ton matérielle est compatible avec la parallélisassions, les 1er jeux d’instruction SIMD SSE et 3DNow date de la fin des années 1990 …. Comme quoi le hardware a toujours 20 ans d’avance sur les développeurs