Menu

Pluie de couleur [Résolu]

Messages postés
59
Date d'inscription
vendredi 23 novembre 2018
Statut
Membre
Dernière intervention
19 mai 2019
- - Dernière réponse : MaxBMX17
Messages postés
59
Date d'inscription
vendredi 23 novembre 2018
Statut
Membre
Dernière intervention
19 mai 2019
- 11 mai 2019 à 14:48
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.
Afficher la suite 

Votre réponse

4 réponses

Meilleure réponse
Messages postés
25568
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 mai 2019
1977
1
Merci
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>

Dire « Merci » 1

Heureux de vous avoir aidé ! Vous nous appréciez ? Donnez votre avis sur nous ! Evaluez CommentCaMarche

CCM 39092 internautes nous ont dit merci ce mois-ci

jordane45
Messages postés
25568
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 mai 2019
1977 -
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>" )
jordane45
Messages postés
25568
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 mai 2019
1977 > jordane45
Messages postés
25568
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 mai 2019
-
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>
MaxBMX17
Messages postés
59
Date d'inscription
vendredi 23 novembre 2018
Statut
Membre
Dernière intervention
19 mai 2019
-
Merci beaucoup, ça marche, sauf que l'animation est en dessous du texte.
Je voudrais qu'elle soit en fond.
jordane45
Messages postés
25568
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 mai 2019
1977 > MaxBMX17
Messages postés
59
Date d'inscription
vendredi 23 novembre 2018
Statut
Membre
Dernière intervention
19 mai 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
MaxBMX17
Messages postés
59
Date d'inscription
vendredi 23 novembre 2018
Statut
Membre
Dernière intervention
19 mai 2019
-
Commenter la réponse de jordane45
Messages postés
25568
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 mai 2019
1977
0
Merci
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 ?

Commenter la réponse de jordane45
Messages postés
59
Date d'inscription
vendredi 23 novembre 2018
Statut
Membre
Dernière intervention
19 mai 2019
0
Merci
Sur ma page, il y a du HTML / CSS.
Sur d'autres navigateurs, le problème reste le même.
jordane45
Messages postés
25568
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 mai 2019
1977 -
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....
Commenter la réponse de MaxBMX17
Messages postés
59
Date d'inscription
vendredi 23 novembre 2018
Statut
Membre
Dernière intervention
19 mai 2019
0
Merci
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();
})
Commenter la réponse de MaxBMX17