Sujet Précédent Sujet Suivant

Pluie de couleur

Résolu/Fermé
MaxBMX17 Messages postés 68 Date d'inscription vendredi 23 novembre 2018 Statut Membre Dernière intervention 20 octobre 2021 - 7 mai 2019 à 19:08
MaxBMX17 Messages postés 68 Date d'inscription vendredi 23 novembre 2018 Statut Membre Dernière intervention 20 octobre 2021 - 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.

4 réponses

Réponse 1 / 4
jordane45 Messages postés 38137 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
Modifié le 8 mai 2019 à 17:47
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
MaxBMX17 Messages postés 68 Date d'inscription vendredi 23 novembre 2018 Statut Membre Dernière intervention 20 octobre 2021 1
Modifié le 8 mai 2019 à 17:41
J'ai rajouté le code mais toujours un carré noir...
Mon fichier HTML : "page1.html" / CSS : "JEU.css" / JAVASCRIPT : "test.js"
0
jordane45 Messages postés 38137 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649 > MaxBMX17 Messages postés 68 Date d'inscription vendredi 23 novembre 2018 Statut Membre Dernière intervention 20 octobre 2021
8 mai 2019 à 17:45
J'ai rajouté le code

Heu.... ajouté quel code ???
celui que je viens de te poster ??
Ce code là.. c'est le code COMPLET d'une page html.
Tu le prends et tu l'enregistres sous le nom test.html (par exemple) .. puis tu l'ouvres dans ton navigateur.... et ..oh miracle.. ça fonctionne (enfin.. normalement :-) )

Et sinon j'en reviens à ma précédente question....
Me donner le Nom des fichiers c'est bien.....
Me donner leur contenu COMPLET c'est mieux....


Il serait bien également de me préciser sous quel navigateur tu fais tes tests .... Edge ? Chrome ? Firefox ? Opera ? autre ???
0
MaxBMX17 Messages postés 68 Date d'inscription vendredi 23 novembre 2018 Statut Membre Dernière intervention 20 octobre 2021 1
8 mai 2019 à 18:16
Lorsque je mets tout le code sur la page1.html, tous mes textes, menu déroulant,...disparaissent; et il n'y a que l'animation
0
jordane45 Messages postés 38137 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649 > MaxBMX17 Messages postés 68 Date d'inscription vendredi 23 novembre 2018 Statut Membre Dernière intervention 20 octobre 2021
8 mai 2019 à 19:38
Peux tu faire l'effort de lire ce que j'écrit et de repondre à mes questions ??!!
0
MaxBMX17 Messages postés 68 Date d'inscription vendredi 23 novembre 2018 Statut Membre Dernière intervention 20 octobre 2021 1
8 mai 2019 à 21:34
page1.html : 

<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>Site web HTML CSS</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" href="JEU.css"/>
    </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>
    </body>
</html>


<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>
0
Réponse 2 / 4
jordane45 Messages postés 38137 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
7 mai 2019 à 19:33
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 ?

0
Réponse 3 / 4
MaxBMX17 Messages postés 68 Date d'inscription vendredi 23 novembre 2018 Statut Membre Dernière intervention 20 octobre 2021 1
7 mai 2019 à 19:51
Sur ma page, il y a du HTML / CSS.
Sur d'autres navigateurs, le problème reste le même.
0
jordane45 Messages postés 38137 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
7 mai 2019 à 22:09
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....
0
Réponse 4 / 4
MaxBMX17 Messages postés 68 Date d'inscription vendredi 23 novembre 2018 Statut Membre Dernière intervention 20 octobre 2021 1
8 mai 2019 à 17:16
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();
})
0

Discussions similaires

Transparence en tete et bas de page
Sabrina -
sabrina -

8 réponses
sertissage des cables rj45
lekludo -
brupala -

7 réponses
comment brancher cette multitude de fils
beaugilo -
baladur13 -

10 réponses
couleur personnage
Gasper -
Izzi -

9 réponses
Couleur transparente
ando26 -
Turtlee -

25 réponses