setTimeout, svg

Changement de ciel.

Dans ce premier code, vous allez coder un ciel qui s'assombrit à la tombée de la nuit.

Le code à compléter

Un bleu "jour", un bleu "crépuscule" et un bleu "nuit" sont définis.

Une idée de mise en oeuvre : le rectangle bleu jour devient transparent pour laisser apparaître le bleu crépuscule. Puis le ciel crépusculaire laisse apparaître le ciel de nuit.

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title>tombée de la nuit </title>
	 
</head>
    
<body>
	
	
<svg width="100%" height="auto"  viewBox ="0 0 1000 500" id="cadre">
	
<defs> <!-- définition de couleurs -->
   
  
  <linearGradient id="bleuJour" x1="0%" y1="0%" x2="0%" y2="100%">
	<stop offset="5%" stop-color="#DFF2FF" />
	<stop offset="95%" stop-color="#6495ED" />
  </linearGradient>
  
  <linearGradient id="bleuCrepuscule" x1="0%" y1="0%" x2="0%" y2="100%">
	<stop offset="5%" stop-color="#6495ED" />
	<stop offset="95%" stop-color="#00008B" />
  </linearGradient>
    
  <linearGradient id="bleuNuit" x1="0%" y1="0%" x2="0%" y2="100%">
	<stop offset="5%" stop-color="##1B019B" />
	<stop offset="95%" stop-color="#000000" />
  </linearGradient>
</defs>



 
<rect id="cielnuit" x="0" y="0" height="500" width="1000" style="fill:url(#bleuNuit);"/>
<rect id="cielcrepuscule" x="0" y="0" height="500" width="1000" style="fill:url(#bleuCrepuscule);"/>
<rect id="cieljour" x="0" y="0" height="500" width="1000" style="fill:url(#bleuJour);"/>

 
</svg>	


	<script>
	 
	
	let cieljour = document.getElementById("cieljour"); 
	let cielcrepuscule = document.getElementById("cielcrepuscule");
	let cielnuit = document.getElementById("cielnuit");
	
	//opacité complète des ciels : ils ne laissent rien apparaître de ce qu'il y a sous eux  :
	cieljour.setAttribute("opacity", 1 );
	cielcrepuscule.setAttribute("opacity", 1 );
	cielnuit.setAttribute("opacity", 1 );
	 
	
</script> 

 
</body>
</html>

Une solution

Un code possible :

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title>tombée de la nuit </title>
	 
</head>
    
<body>

<svg width="100%" height="auto"  viewBox ="0 0 1000 500" id="cadre">
	
<defs> <!-- définition de couleurs -->
   
  
  <linearGradient id="bleuJour" x1="0%" y1="0%" x2="0%" y2="100%">
	<stop offset="5%" stop-color="#DFF2FF" />
	<stop offset="95%" stop-color="#6495ED" />
  </linearGradient>
  
  <linearGradient id="bleuCrepuscule" x1="0%" y1="0%" x2="0%" y2="100%">
	<stop offset="5%" stop-color="#6495ED" />
	<stop offset="95%" stop-color="#00008B" />
  </linearGradient>
    
  <linearGradient id="bleuNuit" x1="0%" y1="0%" x2="0%" y2="100%">
	<stop offset="5%" stop-color="##1B019B" />
	<stop offset="95%" stop-color="#000000" />
  </linearGradient>
</defs>



 
<rect id="cielnuit" x="0" y="0" height="500" width="1000" style="fill:url(#bleuNuit);"/>
<rect id="cielcrepuscule" x="0" y="0" height="500" width="1000" style="fill:url(#bleuCrepuscule);"/>
<!-- cieljour est chargé en dernier et cache donc cielcrepuscule et cielnuit -->
<rect id="cieljour" x="0" y="0" height="500" width="1000" style="fill:url(#bleuJour);"/>

 
</svg>	


	<script>
	 
	var debutChuteNuit = new Date().getTime();
	
	let cieljour = document.getElementById("cieljour"); /* on récupère l'élément du document dont l'id est cieljour */
	let cielcrepuscule = document.getElementById("cielcrepuscule");
	let cielnuit = document.getElementById("cielnuit");
	
	//opacité complète des ciels : ils ne laissent rien apparaître de ce qu'il y a sous eux  :
	cieljour.setAttribute("opacity", 1 );
	cielcrepuscule.setAttribute("opacity", 1 );
	cielnuit.setAttribute("opacity", 1 );
	
	
	function assombrissement1() {
		var temps = new Date().getTime(); 
		if (    temps - debutChuteNuit < 15000 ) 
		{  
			 cieljour.setAttribute("opacity", (0.95 * parseFloat( cieljour.getAttribute("opacity") )) );
			 setTimeout(assombrissement1,500);
		}
		
		if ( temps - debutChuteNuit > 10000 ) {
			debutChuteNuit = temps;
			setTimeout(assombrissement2, 3000);
		}
	}
	 
	function assombrissement2() {
		
		var temps = new Date().getTime(); 
		if (  temps - debutChuteNuit < 15000  ) 
		{  
			 cielcrepuscule.setAttribute("opacity", (0.95 * parseFloat( cielcrepuscule.getAttribute("opacity") )) );
			 setTimeout(assombrissement2, 500);
		}
		
	}
	
	
	 

	// on lance la fonction deplacement toutes les 200 ms
	setTimeout(assombrissement1, 3000); 
	
	
</script> 

</body>
</html>

Coucher de soleil.

Dans ce second code, vous devez faire coucher le soleil en même temps que le ciel s'assombrit.

Vous penserez à faire changer de couleur votre soleil : il passera du jaune au rouge.

Une solution

Un code possible :

<!doctype html>
 
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> coucher de soleil </title>
    </head>
<body>
 

<svg width="100%" height="auto"  viewBox ="0 0 1000 500" id="cadre">
	
<defs> <!-- définition de couleurs -->
  <linearGradient id="degradeOrange">
	<stop offset="5%" stop-color="#F7FF3C" />
	<stop offset="95%" stop-color="#FFD700" />
  </linearGradient>
  
  <linearGradient id="degradeRouge">
	<stop offset="5%" stop-color="#FF6347" />
	<stop offset="95%" stop-color="#F7230C" />
  </linearGradient>
  
  <linearGradient id="degradeBleu" x1="0%" y1="0%" x2="0%" y2="100%">
	<stop offset="5%" stop-color="#DFF2FF" />
	<stop offset="95%" stop-color="#6495ED" />
  </linearGradient>
  
  <linearGradient id="degradeBleu2" x1="0%" y1="0%" x2="0%" y2="100%">
	<stop offset="5%" stop-color="#6495ED" />
	<stop offset="95%" stop-color="#00008B" />
  </linearGradient>
    
  <linearGradient id="degradeBleu3" x1="0%" y1="0%" x2="0%" y2="100%">
	<stop offset="5%" stop-color="##1B019B" />
	<stop offset="95%" stop-color="#000000" />
  </linearGradient>
</defs>



 
<rect id="cielnuit" x="0" y="0" height="500" width="1000" style="fill:url(#degradeBleu3);"/>
<rect id="cielcrepuscule" x="0" y="0" height="500" width="1000" style="fill:url(#degradeBleu2);"/>
<rect id="cieljour" x="0" y="0" height="500" width="1000" style="fill:url(#degradeBleu);"/>

<circle id="soleilrouge" cx="500"  cy="250"  r="100" style="stroke:none;fill:url(#degradeRouge);" />
<circle id="soleil" cx="500"  cy="250"  r="100" style="stroke:none;fill:url(#degradeOrange);" />
 

</svg>	


	<script>
 
	let cieljour = document.getElementById("cieljour"); /* on récupère l'élément du document dont l'id est cieljour */
	let cielcrepuscule = document.getElementById("cielcrepuscule");
	let cielnuit = document.getElementById("cielnuit");
	
	//opacité complète des ciels : ils ne laissent rien apparaître de ce qu'il y a sous eux  :
	cieljour.setAttribute("opacity", 1 );
	cielcrepuscule.setAttribute("opacity", 1 );
	cielnuit.setAttribute("opacity", 1 );
	
	
	let soleil = document.getElementById("soleil");  
	// soleil jaune cache au départ   soleilrouge :
	soleil.setAttribute("opacity", 1 );
	
	let soleilrouge = document.getElementById("soleilrouge");
	
	let positiony; /* pour enregistrer la position (en ordonnée) du soleil */
	 
	
	
	function  deplacement() {
		// récupération de la position actuelle du soleil :
		positiony = parseInt(soleil.getAttribute("cy")); 
		
		// soleil de moins en moins opaque pour laisser voir le soleil rouge :
		soleil.setAttribute("opacity", 0.98 * parseFloat( soleil.getAttribute("opacity") ) ); 
		// cieljour gagne en transparence pour laisser voir cielcrepuscule plus foncé : 
		cieljour.setAttribute("opacity", 0.95 * parseFloat( cieljour.getAttribute("opacity") ) );
		 
		// descente des soleils :
		soleil.setAttribute("cy", positiony+2);     
		soleilrouge.setAttribute("cy", positiony+2); 
		
		// A partir d'une position assez basse du soleil, cielcrepuscule devient à son tour transparent
		// pour laisser voir cielnuit qui est  plus foncé :
		if( positiony > 450) cielcrepuscule.setAttribute("opacity", (0.95 * parseFloat( cielcrepuscule.getAttribute("opacity") )) );
		
		
		// on arrête les appels à la fonction   :
		if(positiony > 600)  clearInterval(coucher);  
    }

	// on lance la fonction deplacement toutes les 200 ms
	let coucher = setInterval(deplacement, 200);
	
	
</script> 


    </body>
</html>

Ciel étoilé.

Vous devez maintenant faire apparaître des étoiles dans le ciel lorsque le ciel est devenu assez sombre.

Une solution

Un code possible :

<!doctype html>
 
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> coucher de soleil </title>
    </head>
<body>
 

<svg width="100%" height="auto"  viewBox ="0 0 1000 500" id="cadre">
	
<defs> <!-- définition de couleurs -->
  <linearGradient id="degradeOrange">
	<stop offset="5%" stop-color="#F7FF3C" />
	<stop offset="95%" stop-color="#FFD700" />
  </linearGradient>
  
  <linearGradient id="degradeRouge">
	<stop offset="5%" stop-color="#FF6347" />
	<stop offset="95%" stop-color="#F7230C" />
  </linearGradient>
  
  <linearGradient id="degradeBleu" x1="0%" y1="0%" x2="0%" y2="100%">
	<stop offset="5%" stop-color="#DFF2FF" />
	<stop offset="95%" stop-color="#6495ED" />
  </linearGradient>
  
  <linearGradient id="degradeBleu2" x1="0%" y1="0%" x2="0%" y2="100%">
	<stop offset="5%" stop-color="#6495ED" />
	<stop offset="95%" stop-color="#00008B" />
  </linearGradient>
    
  <linearGradient id="degradeBleu3" x1="0%" y1="0%" x2="0%" y2="100%">
	<stop offset="5%" stop-color="##1B019B" />
	<stop offset="95%" stop-color="#000000" />
  </linearGradient>
</defs>



 
<rect id="cielnuit" x="0" y="0" height="500" width="1000" style="fill:url(#degradeBleu3);"/>
<rect id="cielcrepuscule" x="0" y="0" height="500" width="1000" style="fill:url(#degradeBleu2);"/>
<!-- cieljour est chargé en dernier et cache donc cielcrepuscule et cielnuit -->
<rect id="cieljour" x="0" y="0" height="500" width="1000" style="fill:url(#degradeBleu);"/>

<circle id="soleilrouge" cx="500"  cy="250"  r="100" style="stroke:none;fill:url(#degradeRouge);" />
<circle id="soleil" cx="500"  cy="250"  r="100" style="stroke:none;fill:url(#degradeOrange);" />
 
<g id="lesEtoiles"></g>
</svg>	


	<script>
	var largeur = 1000; 
	var hauteur = 500; // dimensions cadre, cf viewBox
	var nombreEtoiles = 20;
	
	function etoile(r, x, y, numero, couleur) {
		/* on définit une étoile par deux triangles.
		Triangle 1 : sommet A sur cercle trigo associé à pi/6, B associé à 5pi/6, J'(0,-1).
		Second triangle : J(0,1) et sommets associés à -pi/6 et -5pi/6.
		On agrandit ensuite à un cercle de rayon r ( multiplication par r)
		puis on translate du vecteur (x;y).
		Le paramètre numero servira à identifier l'étoile dans le DOM. */
		let chaine = '';
		let a =  r * Math.sqrt(3)/2 ;
		let b =  r * 1/2 ;
		  
		chaine += '<g fill= "' + couleur + '"   stroke="' + couleur +'" stroke-width="3.0" stroke-linejoin="round" ';
		chaine += 'id="etoile' + numero +'"> ';
		chaine += '<path d="M ';
		chaine +=  (a+x) + ' ' + (b+y) + ' L ';
		chaine += (-a+x) + ' ' + (b+y) + ' L ';
		chaine += (0+x) + ' ' + (-r+y) + '  Z" /> ';		 
		chaine += '<path d="M ';
		chaine +=  (-a+x) + ' ' + (-b+y) + ' L ';
		chaine += (a+x) + ' ' + (-b+y) + ' L ' + (0+x) + ' ' + (r+y) + ' Z" /> ';
		chaine += '</g>';
		return chaine;
	}
	
	function etoiles(nb){
		// fonction de création du code des étoiles dans le DOM :
		let lesEtoiles = document.getElementById("lesEtoiles");
		let chaine = '';
		let r;// rayon   étoile
		let x;// abscisse étoile
		let y;// ordonnée étoile
		
		for(let i = 0; i< nb; i++) {
			r = Math.random() * 6 + 3;
			x = Math.floor(Math.random() * (largeur  - 30)) + 30;
			y = Math.floor(Math.random() * (hauteur  - 30)) + 30;
			chaine += etoile(1.3 * r, x, y, i + nb,"#FFFFE0" );
			chaine += etoile(r, x, y, i, "#FFFF00");
		}
		 
		lesEtoiles.innerHTML = chaine;
	}
	
	//lancement de la  création des étoiles :
	etoiles(nombreEtoiles);
	// étoiles au départ transparentes :
	for(let i=0; i < 2*nombreEtoiles; i++) {
		document.getElementById("etoile"+i).setAttribute("opacity", 0.01 );
	}	
	 
	
	let cieljour = document.getElementById("cieljour"); /* on récupère l'élément du document dont l'id est cieljour */
	let cielcrepuscule = document.getElementById("cielcrepuscule");
	let cielnuit = document.getElementById("cielnuit");
	
	//opacité complète des ciels : ils ne laissent rien apparaître de ce qu'il y a sous eux  :
	cieljour.setAttribute("opacity", 1 );
	cielcrepuscule.setAttribute("opacity", 1 );
	cielnuit.setAttribute("opacity", 1 );
	
	
	let soleil = document.getElementById("soleil");  
	// soleil jaune cache au départ   soleilrouge :
	soleil.setAttribute("opacity", 1 );
	
	let soleilrouge = document.getElementById("soleilrouge");
	
	let positiony; /* pour enregistrer la position (en ordonnée) du soleil */
	 
	
	
	function  deplacement() {
		// récupération de la position actuelle du soleil :
		positiony = parseInt(soleil.getAttribute("cy")); 
		
		// soleil de moins en moins opaque pour laisser voir le soleil rouge :
		soleil.setAttribute("opacity", 0.98 * parseFloat( soleil.getAttribute("opacity") ) ); 
		// cieljour gagne en transparence pour laisser voir cielcrepuscule plus foncé : 
		cieljour.setAttribute("opacity", 0.95 * parseFloat( cieljour.getAttribute("opacity") ) );
		 
		// descente des soleils :
		soleil.setAttribute("cy", positiony+2);     
		soleilrouge.setAttribute("cy", positiony+2); 
		
		// A partir d'une position assez basse du soleil, cielcrepuscule devient à son tour transparent
		// pour laisser voir cielnuit qui est  plus foncé :
		if( positiony > 450) cielcrepuscule.setAttribute("opacity", (0.95 * parseFloat( cielcrepuscule.getAttribute("opacity") )) );
		
		//lorsque le soleil est assez bas, les étoiles commencent à apparaître :
		if(positiony > 480) {
			for(let i=0; i < 2*nombreEtoiles; i++) {
				let uneetoile = document.getElementById("etoile"+i);
				uneetoile.setAttribute("opacity", 1.1 * parseFloat( uneetoile.getAttribute("opacity") ) );
			}			
		} 
		// on arrête les appels à la fonction   :
		if(positiony > 600)  clearInterval(coucher);  
    }

	// on lance la fonction deplacement toutes les 200 ms
	let coucher = setInterval(deplacement, 200);
	
	
</script> 


    </body>
</html>