Pluie de couleur [Résolu/Fermé]

Signaler
Messages postés
65
Date d'inscription
vendredi 23 novembre 2018
Statut
Membre
Dernière intervention
7 octobre 2019
-
Messages postés
65
Date d'inscription
vendredi 23 novembre 2018
Statut
Membre
Dernière intervention
7 octobre 2019
-
Bonjour,

J'ai trouvé ça qui me plaît : https://codepen.io/kyllaz/pen/qGdPvR

Le problème, c'est lorsque je copie les codes, un carré noir s'affiche en haut de ma page.

4 réponses

Messages postés
29194
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
11 août 2020
2 684
Ce code, copié bêtement du lien que tu nous avais déjà donné.... fonctionne parfaitement.

Si tu as un souci c'est certainement lié à d'autres éléments présents dans ton code (comme déjà indiqué dans une précédente réponse...... ) ou que tu as mal placé le code en question.

Il serait bien de nous coller en UN SEUL bloc TOUT ton code.
Et si tu as plusieurs fichiers.... d'indiquer pour chacun d'eux le nom Exact du fichier et son emplacement sur le disque dur;


Je te remet le code qui fonctionne :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>TEST</title>
    <style>
     canvas {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #111;
}
    </style>
 </head>
  <body>
    <canvas id=c></canvas>
    <script type="text/javascript">
    var gl = c.getContext( 'experimental-webgl', { preserveDrawingBuffer: true } )
    ,   w = c.width = window.innerWidth
    ,   h = c.height = window.innerHeight

    ,   opts = {
        dropWidth: .5,
        dropSpacing: 1,
        dropsParColumn: 3,
        dropBaseSpeed: .01,
        dropAddedSpeed: .005,
        dropAlpha: .6,
        dropRespawnChance: .1,
        acc: .1,
        tickSpeed: 1/360
    };

var webgl = {};
webgl.vertexShaderSource = `
attribute vec2 a_pos;
uniform vec2 u_res;
uniform vec2 u_params;
varying float hue;

void main(){
    gl_Position = vec4( vec2(1,-1) * ( ( ( a_pos + vec2(.5,0) ) / u_res ) * 2. - 1. ), 0, 1 );
    hue = u_params.y == 1. ? -1. : ( a_pos.x + a_pos.y * .1 ) / u_res.x + u_params.x;
}
`
webgl.fragmentShaderSource = `
precision mediump float;
varying float hue;

void main(){
    gl_FragColor = hue == -1. ? vec4( 0, 0, 0, .04 ) : vec4( clamp( abs( mod( hue * 6. + vec3( 0, 4, 2 ), 6. ) - 3. ) -1., 0., 1. ), ${opts.dropAlpha} );
}
`

webgl.vertexShader = gl.createShader( gl.VERTEX_SHADER );
gl.shaderSource( webgl.vertexShader, webgl.vertexShaderSource );
gl.compileShader( webgl.vertexShader );

webgl.fragmentShader = gl.createShader( gl.FRAGMENT_SHADER );
gl.shaderSource( webgl.fragmentShader, webgl.fragmentShaderSource );
gl.compileShader( webgl.fragmentShader );

webgl.shaderProgram = gl.createProgram();
gl.attachShader( webgl.shaderProgram, webgl.vertexShader );
gl.attachShader( webgl.shaderProgram, webgl.fragmentShader );

gl.linkProgram( webgl.shaderProgram );
gl.useProgram( webgl.shaderProgram );

webgl.posAttribLoc = gl.getAttribLocation( webgl.shaderProgram, 'a_pos' );
webgl.posBuffer = gl.createBuffer();

gl.enableVertexAttribArray( webgl.posAttribLoc );
gl.bindBuffer( gl.ARRAY_BUFFER, webgl.posBuffer );
gl.vertexAttribPointer( webgl.posAttribLoc, 2, gl.FLOAT, false, 0, 0 );

webgl.resUniformLoc = gl.getUniformLocation( webgl.shaderProgram, 'u_res' );
webgl.paramsUniformLoc = gl.getUniformLocation( webgl.shaderProgram, 'u_params' );

gl.viewport( 0, 0, w, h );
gl.uniform2f( webgl.resUniformLoc, w, h );

gl.blendFunc( gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA );
gl.enable( gl.BLEND );

gl.lineWidth( opts.dropWidth );

webgl.posData = [];
webgl.clear = function(){
    webgl.posData = [
        0, 0,
        w, 0,
        0, h,
        0, h,
        w, 0,
        w, h
    ];
    gl.uniform2f( webgl.paramsUniformLoc, 0, 1 );
    webgl.draw( gl.TRIANGLES );
    webgl.posData.length = 0;
}
webgl.draw = function( glType ){
    gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( webgl.posData ), gl.STATIC_DRAW );
    gl.drawArrays( glType, 0, webgl.posData.length / 2 );
}

function Drop( x ){
    this.x = x;
    this.reset();
    this.y = Math.random() * h;
}
Drop.prototype.reset = function(){
    this.y = 0;
    this.vy = opts.dropBaseSpeed + opts.dropAddedSpeed * Math.random();
}
Drop.prototype.step = function(){
    
    if( this.y > h ){
        if( Math.random() < opts.dropRespawnChance )
            return this.reset();
        else
            return 0;
    }
    
    var ny = this.y + ( this.vy += opts.acc );
    
    webgl.posData.push(
        this.x, this.y,
        this.x, ny
    );
    this.y = ny;
    
}
var drops = []
    ,   tick = 0;

createDrops();

function createDrops(){
    drops.length = 0;
    
    for( var i = 0; i < w; i += opts.dropSpacing ){
        for( var j = 0; j < opts.dropsParColumn; ++j )
            drops.push( new Drop( i ) );
    }
}
function anim(){
    window.requestAnimationFrame( anim );
    tick += opts.tickSpeed;
    
    webgl.clear();
    gl.uniform2f( webgl.paramsUniformLoc, tick, 0 );
    
    drops.map( function( drop ){ drop.step(); } );
    
    webgl.draw( gl.LINES );
}
anim();

window.addEventListener( 'resize', function(){
    
    w = c.width = window.innerWidth;
    h = c.height = window.innerHeight;
    gl.viewport( 0, 0, w, h );
    gl.uniform2f( webgl.resUniformLoc, w, h );
    
    createDrops();
})
    </script>
  </body>
</html>
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 57581 internautes nous ont dit merci ce mois-ci

Messages postés
29194
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
11 août 2020
2 684
pffffffffffffffff
Tu ne connais visiblement pas la structure TYPE d'une page HTML ....
C'est pourtant le strict minimum à connaitre.......
<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>Titre de la page</title>
  </head>
 <body>
     ICI du contenu HTML
  </body>
</html>


Un seul bloc HEAD (dedans tu peux avoir des balises meta, un bloc style, des imports de scripts js et css... )

un seul bloc BODY : Le contenu de la page. contient du code html (div, input, table...etc...). , des imports de css et de js (en général à la fin.. juste avant le </body>" )
Messages postés
29194
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
11 août 2020
2 684 >
Messages postés
29194
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
11 août 2020

par exemple
!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Site web HTML CSS</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="JEU.css"/>
    <style>
     canvas {
      position: absolute;
      top: 80;
      left: 0;
      background-color: #111;
    }
    </style>
  </head>
  <body>
  <nav>
      <ul>
          <li class="menu-html"><a href="html.html">Acceuil</a>
              <ul class="submenu">
        <li><a href="page1.html">JEU MAX</a></li>
      <li><a href="page2.html">LOGICIEL</a></li>
              </ul>
          </li>
          <li class="menu-css"><a href="html.html">A propos</a>
              <ul class="submenu">
                  <li><a href="page3.html">FAQ</a></li>
      <li><a href="page4.html">Space Invader</a></li>
              </ul>
          </li>
          <li class="menu-javascript"><a href="javascript.html">Contact</a>
              <ul class="submenu">
                  <li><a href="page5.html">M'envoyer un Message</a></li>
              </ul>
          </li>
      </ul>
  </nav>

  <h2> SPACE INVADER </h2>
  <p>Space Invaders ?????????? (Supesu Inbeda?) est un jeu vidéo développé par la société japonaise Taito, sorti en 1978 sur borne d'arcade. Il s'agit d'un shoot them up fixe. Tomohiro Nishikado conçoit et programme le jeu. Il s'inspire de plusieurs médias populaires de l'époque pour réaliser Space Invaders tels que Breakout ou La Guerre des mondes. Considéré comme le premier archétype du shoot them up, il est aussi l'un des titres les plus influents et célèbres de l'histoire du jeu vidéo.</p>
  <p>Le principe est de détruire des vagues d'aliens au moyen d'un canon laser en se déplaçant horizontalement sur l'écran. Il fait partie des classiques du jeu vidéo au même titre que Pac-Man et d'autres de ses contemporains. Il contribue à élargir l'industrie du jeu vidéo au niveau mondial. Space Invaders rencontre un énorme succès populaire. Après sa sortie au Japon, il aurait entraîné une pénurie de pièces de 100 yens. En 2007, Taito annonce que le jeu a rapporté 500 millions de dollars de recettes depuis sa parution.</p>
  <p>Ce jeu influence beaucoup de titres et connaît plusieurs suites. Il est adapté sur de nombreux supports (Atari 2600, Atari 5200, MSX, NES, etc.). En 1980, la sortie de la version pour l'Atari 2600 permet de quadrupler les ventes de la plate-forme. De ce fait, il devient le premier titre dit « killer application » pour les consoles de jeux vidéo. Space Invaders est référencé et parodié dans de nombreuses émissions de télévision et expositions culturelles. La représentation par des pixels des aliens dans le jeu devient une icône médiatique pour symboliser le monde des jeux vidéo.</p>

  <canvas id=c></canvas>
  <script type="text/javascript">
      var gl = c.getContext( 'experimental-webgl', { preserveDrawingBuffer: true } )
      ,   w = c.width = window.innerWidth
      ,   h = c.height = window.innerHeight

      ,   opts = {
          dropWidth: .5,
          dropSpacing: 1,
          dropsParColumn: 3,
          dropBaseSpeed: .01,
          dropAddedSpeed: .005,
          dropAlpha: .6,
          dropRespawnChance: .1,
          acc: .1,
          tickSpeed: 1/360
      };

  var webgl = {};
  webgl.vertexShaderSource = `
  attribute vec2 a_pos;
  uniform vec2 u_res;
  uniform vec2 u_params;
  varying float hue;

  void main(){
      gl_Position = vec4( vec2(1,-1) * ( ( ( a_pos + vec2(.5,0) ) / u_res ) * 2. - 1. ), 0, 1 );
      hue = u_params.y == 1. ? -1. : ( a_pos.x + a_pos.y * .1 ) / u_res.x + u_params.x;
  }
  `
  webgl.fragmentShaderSource = `
  precision mediump float;
  varying float hue;

  void main(){
      gl_FragColor = hue == -1. ? vec4( 0, 0, 0, .04 ) : vec4( clamp( abs( mod( hue * 6. + vec3( 0, 4, 2 ), 6. ) - 3. ) -1., 0., 1. ), ${opts.dropAlpha} );
  }
  `

  webgl.vertexShader = gl.createShader( gl.VERTEX_SHADER );
  gl.shaderSource( webgl.vertexShader, webgl.vertexShaderSource );
  gl.compileShader( webgl.vertexShader );

  webgl.fragmentShader = gl.createShader( gl.FRAGMENT_SHADER );
  gl.shaderSource( webgl.fragmentShader, webgl.fragmentShaderSource );
  gl.compileShader( webgl.fragmentShader );

  webgl.shaderProgram = gl.createProgram();
  gl.attachShader( webgl.shaderProgram, webgl.vertexShader );
  gl.attachShader( webgl.shaderProgram, webgl.fragmentShader );

  gl.linkProgram( webgl.shaderProgram );
  gl.useProgram( webgl.shaderProgram );

  webgl.posAttribLoc = gl.getAttribLocation( webgl.shaderProgram, 'a_pos' );
  webgl.posBuffer = gl.createBuffer();

  gl.enableVertexAttribArray( webgl.posAttribLoc );
  gl.bindBuffer( gl.ARRAY_BUFFER, webgl.posBuffer );
  gl.vertexAttribPointer( webgl.posAttribLoc, 2, gl.FLOAT, false, 0, 0 );

  webgl.resUniformLoc = gl.getUniformLocation( webgl.shaderProgram, 'u_res' );
  webgl.paramsUniformLoc = gl.getUniformLocation( webgl.shaderProgram, 'u_params' );

  gl.viewport( 0, 0, w, h );
  gl.uniform2f( webgl.resUniformLoc, w, h );

  gl.blendFunc( gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA );
  gl.enable( gl.BLEND );

  gl.lineWidth( opts.dropWidth );

  webgl.posData = [];
  webgl.clear = function(){
      webgl.posData = [
          0, 0,
          w, 0,
          0, h,
          0, h,
          w, 0,
          w, h
      ];
      gl.uniform2f( webgl.paramsUniformLoc, 0, 1 );
      webgl.draw( gl.TRIANGLES );
      webgl.posData.length = 0;
  }
  webgl.draw = function( glType ){
      gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( webgl.posData ), gl.STATIC_DRAW );
      gl.drawArrays( glType, 0, webgl.posData.length / 2 );
  }

  function Drop( x ){
      this.x = x;
      this.reset();
      this.y = Math.random() * h;
  }
  Drop.prototype.reset = function(){
      this.y = 0;
      this.vy = opts.dropBaseSpeed + opts.dropAddedSpeed * Math.random();
  }
  Drop.prototype.step = function(){
      
      if( this.y > h ){
          if( Math.random() < opts.dropRespawnChance )
              return this.reset();
          else
              return 0;
      }
      
      var ny = this.y + ( this.vy += opts.acc );
      
      webgl.posData.push(
          this.x, this.y,
          this.x, ny
      );
      this.y = ny;
      
  }
  var drops = []
      ,   tick = 0;

  createDrops();

  function createDrops(){
      drops.length = 0;
      
      for( var i = 0; i < w; i += opts.dropSpacing ){
          for( var j = 0; j < opts.dropsParColumn; ++j )
              drops.push( new Drop( i ) );
      }
  }
  function anim(){
      window.requestAnimationFrame( anim );
      tick += opts.tickSpeed;
      
      webgl.clear();
      gl.uniform2f( webgl.paramsUniformLoc, tick, 0 );
      
      drops.map( function( drop ){ drop.step(); } );
      
      webgl.draw( gl.LINES );
  }
  anim();

  window.addEventListener( 'resize', function(){
      
      w = c.width = window.innerWidth;
      h = c.height = window.innerHeight;
      gl.viewport( 0, 0, w, h );
      gl.uniform2f( webgl.resUniformLoc, w, h );
      
      createDrops();
  })
    </script>
  </body>
</html>
Messages postés
65
Date d'inscription
vendredi 23 novembre 2018
Statut
Membre
Dernière intervention
7 octobre 2019

Merci beaucoup, ça marche, sauf que l'animation est en dessous du texte.
Je voudrais qu'elle soit en fond.
Messages postés
29194
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
11 août 2020
2 684 >
Messages postés
65
Date d'inscription
vendredi 23 novembre 2018
Statut
Membre
Dernière intervention
7 octobre 2019

Ca c'est un autre souci.
Je t'invite à mettre cette discussion en RESOLUE puis à ouvrir une nouvelle question relative à ce nouveau souci dans le forum CSS
Messages postés
65
Date d'inscription
vendredi 23 novembre 2018
Statut
Membre
Dernière intervention
7 octobre 2019

Messages postés
29194
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
11 août 2020
2 684
Bonjour,
As tu d'autres choses dans ta page que ce bout de code ?
As tu vidé le cache de ton navigateur ?
As tu essayé avec un autre navigateur ?
As tu des erreurs dans la console de ton navigateur ?

Messages postés
65
Date d'inscription
vendredi 23 novembre 2018
Statut
Membre
Dernière intervention
7 octobre 2019

Sur ma page, il y a du HTML / CSS.
Sur d'autres navigateurs, le problème reste le même.
Messages postés
29194
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
11 août 2020
2 684
Sur ma page, il y a du HTML / CSS.

Oui.. mais encore ...??

Ne penses tu pas que si je t'ai posé cette question... c'est peut-être (sûrement...) car cela peut être la cause du souci et par conséquent que nous le montrer pourrait nous aider à te répondre ???

PS: Merci également de ne pas ouvrir la même question 50 fois sur le forum....
Messages postés
65
Date d'inscription
vendredi 23 novembre 2018
Statut
Membre
Dernière intervention
7 octobre 2019

Voici le code/animation : https://codepen.io/kyllaz/pen/qGdPvR

<canvas id=c></canvas>


canvas {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #111;
}


var gl = c.getContext( 'experimental-webgl', { preserveDrawingBuffer: true } )
    ,   w = c.width = window.innerWidth
    ,   h = c.height = window.innerHeight

    ,   opts = {
        dropWidth: .5,
        dropSpacing: 1,
        dropsParColumn: 3,
        dropBaseSpeed: .01,
        dropAddedSpeed: .005,
        dropAlpha: .6,
        dropRespawnChance: .1,
        acc: .1,
        tickSpeed: 1/360
    };

var webgl = {};
webgl.vertexShaderSource = `
attribute vec2 a_pos;
uniform vec2 u_res;
uniform vec2 u_params;
varying float hue;

void main(){
    gl_Position = vec4( vec2(1,-1) * ( ( ( a_pos + vec2(.5,0) ) / u_res ) * 2. - 1. ), 0, 1 );
    hue = u_params.y == 1. ? -1. : ( a_pos.x + a_pos.y * .1 ) / u_res.x + u_params.x;
}
`
webgl.fragmentShaderSource = `
precision mediump float;
varying float hue;

void main(){
    gl_FragColor = hue == -1. ? vec4( 0, 0, 0, .04 ) : vec4( clamp( abs( mod( hue * 6. + vec3( 0, 4, 2 ), 6. ) - 3. ) -1., 0., 1. ), ${opts.dropAlpha} );
}
`

webgl.vertexShader = gl.createShader( gl.VERTEX_SHADER );
gl.shaderSource( webgl.vertexShader, webgl.vertexShaderSource );
gl.compileShader( webgl.vertexShader );

webgl.fragmentShader = gl.createShader( gl.FRAGMENT_SHADER );
gl.shaderSource( webgl.fragmentShader, webgl.fragmentShaderSource );
gl.compileShader( webgl.fragmentShader );

webgl.shaderProgram = gl.createProgram();
gl.attachShader( webgl.shaderProgram, webgl.vertexShader );
gl.attachShader( webgl.shaderProgram, webgl.fragmentShader );

gl.linkProgram( webgl.shaderProgram );
gl.useProgram( webgl.shaderProgram );

webgl.posAttribLoc = gl.getAttribLocation( webgl.shaderProgram, 'a_pos' );
webgl.posBuffer = gl.createBuffer();

gl.enableVertexAttribArray( webgl.posAttribLoc );
gl.bindBuffer( gl.ARRAY_BUFFER, webgl.posBuffer );
gl.vertexAttribPointer( webgl.posAttribLoc, 2, gl.FLOAT, false, 0, 0 );

webgl.resUniformLoc = gl.getUniformLocation( webgl.shaderProgram, 'u_res' );
webgl.paramsUniformLoc = gl.getUniformLocation( webgl.shaderProgram, 'u_params' );

gl.viewport( 0, 0, w, h );
gl.uniform2f( webgl.resUniformLoc, w, h );

gl.blendFunc( gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA );
gl.enable( gl.BLEND );

gl.lineWidth( opts.dropWidth );

webgl.posData = [];
webgl.clear = function(){
    webgl.posData = [
        0, 0,
        w, 0,
        0, h,
        0, h,
        w, 0,
        w, h
    ];
    gl.uniform2f( webgl.paramsUniformLoc, 0, 1 );
    webgl.draw( gl.TRIANGLES );
    webgl.posData.length = 0;
}
webgl.draw = function( glType ){
    gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( webgl.posData ), gl.STATIC_DRAW );
    gl.drawArrays( glType, 0, webgl.posData.length / 2 );
}

function Drop( x ){
    this.x = x;
    this.reset();
    this.y = Math.random() * h;
}
Drop.prototype.reset = function(){
    this.y = 0;
    this.vy = opts.dropBaseSpeed + opts.dropAddedSpeed * Math.random();
}
Drop.prototype.step = function(){
    
    if( this.y > h ){
        if( Math.random() < opts.dropRespawnChance )
            return this.reset();
        else
            return 0;
    }
    
    var ny = this.y + ( this.vy += opts.acc );
    
    webgl.posData.push(
        this.x, this.y,
        this.x, ny
    );
    this.y = ny;
    
}
var drops = []
    ,   tick = 0;

createDrops();

function createDrops(){
    drops.length = 0;
    
    for( var i = 0; i < w; i += opts.dropSpacing ){
        for( var j = 0; j < opts.dropsParColumn; ++j )
            drops.push( new Drop( i ) );
    }
}
function anim(){
    window.requestAnimationFrame( anim );
    tick += opts.tickSpeed;
    
    webgl.clear();
    gl.uniform2f( webgl.paramsUniformLoc, tick, 0 );
    
    drops.map( function( drop ){ drop.step(); } );
    
    webgl.draw( gl.LINES );
}
anim();

window.addEventListener( 'resize', function(){
    
    w = c.width = window.innerWidth;
    h = c.height = window.innerHeight;
    gl.viewport( 0, 0, w, h );
    gl.uniform2f( webgl.resUniformLoc, w, h );
    
    createDrops();
})