Crée de la brume

pour Raphaël (Rosny-sous-bois)

Tu veux donner une ambiance caverneuse à ton niveau? Alors rien de tel qu'une bonne brume lugubre des marais.

Tout d'abord crée une nouvelle variable publique dans ton script sketch.js

let mist;

Puis, toujours dans le script view.js va dans la fonction initWindow() et rajoutes-y cette ligne

function initWindow(){
      
  let p = windowRatio(windowWidth,windowHeight);
      
  resizeCanvas(windowWidth, windowHeight);
  view = createGraphics(p.x, p.y ,WEBGL);
  
  light();
  
  mist = createGraphics(100, 100);

}

Ensuite, il nous faut créer une fonction qui génère la brume. Colle celle-ci quelque part dans le script game.js.

function mistDisplay() { const noiseScale = 0.02 ; const opacity = 120 ; const opacityBorder = 100 ; const detailX = 8 ; const detailY = 0.65 ; const speed = 0.0025 ; const color = [1,1,1]; let s = createVector( mist.width , mist.height ); for (let y = 0 ; y < s.y ; y ++ ) { let v = cos( ( y / s.y ) * TWO_PI ) * opacityBorder + opacity ; for (let x = 0 ; x < s.x ; x ++) { let t = ( x + millis() * speed ); let noiseVal = noise( t * noiseScale, y * noiseScale ); mist.noiseDetail( detailX , detailY ); mist.stroke( noiseVal * v * color[0],noiseVal * v * color[1],noiseVal * v * color[2]); mist.point( x , y ); } } blend(mist,0,0,s.x,s.y,0,0,width,height,SCREEN); }

Parfait. N'hésite pas à changer les valeurs au début de la fonction si tu veux modifier l'effet. Mais avant ça affichons-le à l'écran!

Dans le script game.js trouve la fonction game() et rajoutes-y cette ligne.

function game(){
  
  background(0);
  
  viewDisplay();

  mistDisplay();

  inventoryDisplay();

  if (animation()) playerControl();
  
}