<canvas> Couleur aléatoire dans un rectangle

Version imprimable

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:

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

js ;

Code:

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 ?

24/01/2016, 16h48
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()).
26/01/2016, 02h31
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 ?
26/01/2016, 10h07
p3ga5e

Citation:

Envoyé par progdebutant

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 …
26/01/2016, 12h27
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.
26/01/2016, 12h57
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 :evilred:

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:

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 ?

26/01/2016, 23h22
progdebutant
Salut ;)

T'as essayé sans les espaces ? :

Code:

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

et

Code:

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:

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

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

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

Code:

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

Code:

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:

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 );

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

une version pixel shader dispo ici

Code:

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 );
}

27/01/2016, 23h22
aertys

bonsoir

j'ai essayé tout ce que Progdebutant m'a dit de faire mais rien ne marche.
28/01/2016, 18h09
NoSmoking

:oops: Je suis un peu confus car je pensais l'avoir signalé, height et non heigth.
06/02/2016, 18h53
aertys

merci beaucoup ça marche très bien maintenant.
06/02/2016, 21h59
Watilin

Citation:

Envoyé par p3ga5e

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…
08/02/2016, 11h27
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 :calim2: