Effet pluie de couleur

Question

Max17

7 May 2019 à 19:09

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.
Modifié par Max17 (08 May 2019 - 17:45)

Max17

8 May 2019 à 21:45

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

Modifié par Max17 (08 May 2019 - 21:46)

Felipe

Administrateur

9 May 2019 à 18:49

Bonjour,

as-tu bien copié les codes dans une page HTML ?
Page HTML avec doctype HTML5, un élément html forcément, un head, un body etc
Incluant la CSS soit dans un élément style soit dans une feuille de style séparée et chargée via link
Incluant le JS soit dans un élément script soit dans un fichier *.js séparé et chargé via script+attribut src

Tout cela est "caché" par Codepen parce que c'est bien plus pratique mais faut refaire les bases quand on en extrait du code Smiley smile

Ensuite as-tu des erreurs dans la console JS, quelle est la taille de ton canvas vu dans les DevTools ? 0x0 c'est pas un bon début

Max17

9 May 2019 à 19:08

https://forum.alsacreations.com/topic-4-84996-1-Effet-pluie-de-couleur.html


<!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 ?????????? (Sup?su Inb?d??) 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>

Sujet clos

JavaScript, DOM et API Web HTML5

Effet pluie de couleur