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