Segments et javascript

La grille d'Hermann

Proposez un code de la figure ci-dessus dans lequel les répétitions seront traitées à l'aide de javascript.

Une solution en créant le texte du code svg avec js

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title> Hermann </title>       
    </head>
    
    
    <body>
 
		<div id="zoneFigure">
		
		</div>

 
        <script>
        let codeSvg = ``;
        codeSvg += `<svg width="800" height="300">`;
        codeSvg += `<g style="stroke-dasharray:30,5; stroke-width:30; stroke:black;">`;
		
		
		// boucle de création des lignes :
		for(let i = 0; i < 10; i+=1)
		{
			codeSvg += `<line x1="0" y1="${15+35*i}" x2="800" y2="${15+35*i}" />`;
			
		}
		
		codeSvg += `</g>`;
		codeSvg += `</svg>`;
		document.querySelector("#zoneFigure").innerHTML = codeSvg;
        </script>

  
    </body>
</html>

Une solution en créant les éléments du DOM avec js

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title> Hermann </title>       
    </head>
    
    
    <body>
		
		
<svg width="800" height="400" id="cadre">
	
	<g style="stroke-dasharray:30,5; stroke-width:30; stroke:black;" id="dessin">
		
	</g>
	
</svg> 


<script>

let dessin =  document.querySelector("#dessin");

// boucle de création des lignes :
for(let i = 0; i < 10; i+=1)
{
	let ligne = document.createElementNS("http://www.w3.org/2000/svg", "line");
	ligne.setAttribute('x1', 0);
	ligne.setAttribute('y1', 15+35*i);
	ligne.setAttribute('x2', 800);
	ligne.setAttribute('y2', 15+35*i);
	dessin.appendChild(ligne);
}

 
</script>
  
    </body>
</html>

Un immeuble aux lignes ondulantes ?

Utilisez javascript pour reproduire l'image suivante.

Une solution en créant le texte du code svg avec js

Un exemple de code. Vous pouvez bien sûr le modifier pour paramétrer l'ensemble.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Lignes droites ondulantes </title>
    </head>
    <body>

		 

        <div id="zoneFig">
        
        </div>
         
		 
		
		
		<script>
		 
		// ouverture élément svg
		let codeSvg = `<svg width="800px" height="2000px"   viewBox="0 0 1200 3000">`;
		
		 
		//groupe des 4 premières lignes noires (et lignes vertes associées) :
		codeSvg += `<g id="motif">`;
		// on crée les deux premières lignes (une noire et une verte) :
		codeSvg += `<g id="lignes1et2">`;
		//première ligne noire :
		codeSvg += `<line x1="0" y1="27" x2="800" y2="27" style="stroke-dasharray:54,54; stroke-width:54; stroke:black;" />`;
		// première ligne verte :
		codeSvg += `<line x1="-34" y1="56" x2="800" y2="56" style="stroke:rgb(0,100,0);stroke-width:3;"/>`;
		//fermeture du groupe constitué des lignes 1 et 2 :
		codeSvg += `</g>`;
		//création des 3 lignes noires suivantes :
		codeSvg += `<use xlink:href="#lignes1et2" transform="translate(17,57)" />`;
		codeSvg += `<use xlink:href="#lignes1et2" transform="translate(34,114)" />`;
		codeSvg += `<use xlink:href="#lignes1et2" transform="translate(17,171)" />`;
		//fermeture du groupe constitué des 4 premières lignes noires (et lignes vertes associées) :
		codeSvg += `</g>`;
		 
		 
		/* on ajoute ensuite des copies du motif  : */
		
		let ty = 228; // pour la translation vers le bas du motif  
		
		 
		for(let i = 1; i<8; i++)
		{
			codeSvg += `<use xlink:href="#motif" transform="translate(0, ${i*ty})" />`;
			 
		}
		 
		//fermeture élément svg :
		codeSvg += `</svg>`;
		
		//copie du code svg dans l'élément div d'identifiant zoneFig :
		document.querySelector("#zoneFig").innerHTML = codeSvg;
		</script>

		  
    </body>
</html>

Une solution en créant les éléments du DOM avec js

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title>ondulations rectilignes </title>
         
    </head>
    
    
    <body>
  

<svg id="cadre" width="800" height="500"   viewBox="0 0 1600 1000">

</svg>
 
 
 


<script>
const epaisseurLigneNoire = 54;
const epaisseurLigneVerte = 3;
const LongueurLigne = 1600;

const cadre =  document.getElementById("cadre");

function duoNoirVert(x,y){
	// crée une ligne noire suivie d'une verte.
	let ligne = document.createElementNS("http://www.w3.org/2000/svg", "line");
	ligne.setAttribute('x1', 0);
	ligne.setAttribute('y1', epaisseurLigneNoire/2);
	ligne.setAttribute('x2',LongueurLigne);
	ligne.setAttribute('y2', epaisseurLigneNoire/2);
	ligne.setAttribute('transform', "translate(" + x + "," + y + ")");
	ligne.setAttribute('style', "stroke-dasharray: " + epaisseurLigneNoire + "," + epaisseurLigneNoire);
	ligne.style.stroke = 'black';
	ligne.style.strokeWidth = epaisseurLigneNoire;
	cadre.appendChild(ligne);


	ligne = document.createElementNS("http://www.w3.org/2000/svg", "line");
	ligne.setAttribute('x1', 0);
	ligne.setAttribute('y1', epaisseurLigneNoire + epaisseurLigneVerte/2);
	ligne.setAttribute('x2', LongueurLigne);
	ligne.setAttribute('y2', epaisseurLigneNoire + epaisseurLigneVerte/2);
	ligne.setAttribute('transform', "translate(" + x + "," + y + ")");
	ligne.style.stroke = 'rgb(0,200,0)';
	ligne.style.strokeWidth = epaisseurLigneVerte;
	cadre.appendChild(ligne);
}



function zagzig(j){
	// crée le groupe de 4 lignes noires (et les 4 vertes associées)
	// avec les décalages.
	duoNoirVert(0, 4*j*(epaisseurLigneNoire + epaisseurLigneVerte)  );
	duoNoirVert(epaisseurLigneNoire/3, (4*j+1)*(epaisseurLigneNoire + epaisseurLigneVerte) );
	duoNoirVert(2*epaisseurLigneNoire/3,  (4*j+2)*(epaisseurLigneNoire + epaisseurLigneVerte) );
	duoNoirVert(epaisseurLigneNoire/3, (4*j+3)*(epaisseurLigneNoire + epaisseurLigneVerte));
}


for(let j = 0; j < 5; j++){
	// répétition du groupe de 4 lignes noires
	zagzig(j);
}

</script>   

  
    </body>
</html>

La courbe du dragon

Construction de chaînes de caractères

On pose :

A₀ = "h"
B₀ = "g"
C₀ = "b"
D₀ = "d".

On construit ensuite les chaînes suivantes :

A₁ = A₀B₀, c'est à dire A₁ = "hg"
B₁ = C₀B₀, c'est à dire B₁ = "bg"
C₁ = C₀D₀, c'est à dire C₁ = "bd"
D₁ = A₀D₀, c'est à dire D₁ = "hd"

Et on recommence :

A₂ = A₁B₁, c'est à dire A₂ = "hgbg"
B₂ = C₁B₁, c'est à dire B₂ = "bdbg"
C₂ = C₁D₁, c'est à dire C₂ = "bdhd"
D₂ = A₁D₁, c'est à dire D₂ = "hghd"

Et ainsi de suite pour tout entier naturel non nul n :

A_n = A_n-1B_n-1
B_n = C_n-1B_n-1
C_n = C_n-1D_n-1
D_n = A_n-1D_n-1

Définir une fonction js prenant en entrée un entier naturel n et donnant en sortie A_n.

Interprétation graphique

Pour un entier naturel n donné, on interprète la chaîne A_n graphiquement comme suit :

On part du point (0,0) (point actuel). L'orientation des axes est celle en vigueur avec le svg.

Si le caractère suivant de la chaîne est "h", on trace un segment en faisant un pas vers le haut (c'est à dire en reliant le point actuel à son image par la translation de vecteur de coordonnées (0,-1)).
Si le caractère suivant de la chaîne est "b", on trace un segment en faisant un pas vers le bas (c'est à dire en reliant le point actuel à son image par la translation de vecteur de coordonnées (0,1)).
Si le caractère suivant de la chaîne est "g", on trace un segment en faisant un pas vers la gauche (c'est à dire en reliant le point actuel à son image par la translation de vecteur de coordonnées (-1,0)).
Si le caractère suivant de la chaîne est "d", on trace un segment en faisant un pas vers la droite (c'est à dire en reliant le point actuel à son image par la translation de vecteur de coordonnées (1,0)).
Dans tous les cas, le point extrémité du segment tracé devient le nouveau point actuel et on recommence la démarche avec la lettre suivante.

Exemple : pour la chaîne "bdbg", on trace le segment [(0,0), (0,1)] puis le segment [ (0,1), (1,1)], suivi du segment [(1,1), (1,2) du segment [(1,2), (0,2)].

Écrire une fonction qui détermine les valeurs xmin, xmax, ymin, ymax, valeurs extrêmes des coordonnées des points obtenus lors de l'interprétation graphique de la chaîne A_n.
Construire une figure svg (construite à l'aide de javascript) représentant la chaîne A_n.

Chaîne

Production de chaînes de caractères

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> production </title>
        <style>
        body{
			min-height: 300px;
		}
        </style>
    </head>
    <body>
    
    	<p> Entrez la valeur de n dans le champ suivant :
			<input type="number" name="nombreEtapes" id="nombreEtapes" value="0">
	 	</p>
	 	
	 	<p> Cliquez ensuite sur le bouton pour déclencher le calcul de la chaîne A<sub>n</sub> 
			<button id="declencheur">Cliquez !</button>
	 	</p>
	 	
	 	
	 	<p> La chaîne A<sub>n</sub> est la suivante : </p>
		<p id="resultat"></p>
		   
		   
		   
		   
		   
		<script>
		
		 function produitChaine(n)
		 {
		 
		 	let A = "h", B = "g", C = "b", D = "d";		 	
		 	for(let i = 1; i <= n; i += 1)
		 	{
		 		 [A, B, C, D] = [A+B, C+B, C+D, A+D]
		 	}
		 	return A;
		 }
		 
		 function affichage()
		 {
		 	let n = document.querySelector("#nombreEtapes").value;
		 	document.querySelector("#resultat").innerHTML = produitChaine(n);		 
		 }
		 
		document.querySelector("#declencheur").addEventListener('click',affichage);
		</script>

		  
    </body>
</html>

Graphique (en créant le texte du code via js)

Ne testez pas au-delà de n = 13 ou 14, les calculs sont longs. A partir de n = 12, on a déjà une bonne idée de ce qu'est la courbe du dragon. Vous pourrez chercher sur le web des renseignements complémentaires sur cette "dragon curve".

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> dragon </title>
		  
		<style>
		body{
			height: 500px;
		}
		svg{
			border: 1px dashed orange;
		}
		</style>
    </head>
    <body>

		<p> Entrez la valeur de n dans le champ suivant :
    	<input type="number" name="nombreEtapes" id="nombreEtapes" value="0">
	 	</p>
	 	
	 	<p> Cliquez ensuite sur le bouton pour déclencher le calcul de la chaîne A<sub>n</sub> 
	 	<button onclick="affichage()">Cliquez !</button>
	 	</p>
	 	
	 	
	 	<p> La chaîne A<sub>n</sub> est la suivante : </p>
		<p id="resultat"></p>
		   
		   
		<div id="zoneFigure">
		</div>

        	
		
		
		<script>
		
		let cote; // largeur et hauteur de l'élément svg
						// qui contiendra la figure		
		
		let chaineDragon; // string, contiendra la chaîne An
		let tAbscisses; // array, contiendra les abscisses des points successifs
		let tOrdonnees; // array, contiendra les ordonnées des points successifs
		let xmin, xmax, ymin, ymax; // number, coordonnées extrêmes de la figure finie
		
		let codeSvg; //contiendra le code de la figure svg
		 
		 
		function initialise(){
		 	cote = 200;
		 	chaineDragon = "";
		 	tAbscisses = [];
		 	tOrdonnees = []; 
		 	xmin = 0; xmax = 0; ymin = 0; ymax = 0;
		 	codeSvg = ``;
		 }
		
		
		 function produitChaine(n)
		 {
		 // fonction de fabrication de la chaine An
		 
		 	let A = "h", B = "g", C = "b", D = "d";
		 	for(let i = 1; i <= n; i += 1)
		 	{
		 		 [A, B, C, D] = [A+B, C+B, C+D, A+D]
		 	}
		 	chaineDragon = A;
		 }
		 
		
		 
		 
		 function listePoints(){
		 // remplit les tableaux tAbscisses, tOrdonnees
		 // et détermine xmin, xmax, ymin, ymax
		 	 
		 	// coordonnées du point courant :
			let xactuel = 0;
			let yactuel = 0;
			tAbscisses.push(xactuel);
			tOrdonnees.push(yactuel);
			
			let caractere;
			let xsuivant, ysuivant;
			
		 	//boucle de parcours de la chaine
				for(let i = 0; i < chaineDragon.length; i++)
				{
					// caractère numéro i de la chaîne chaineDragon :
					caractere = chaineDragon[i];
					
					// coordonnées du point suivant :
					xsuivant = xactuel;
					ysuivant = yactuel;
					
					if(caractere === "h")
					{
						ysuivant -= 1; 
					}
					else if(caractere === "b")
					{
						ysuivant += 1; 
					}
					else if(caractere === "g")
					{
						xsuivant -= 1; 
					}
					else if(caractere === "d")
					{
						xsuivant += 1; 
					}
					
					tAbscisses.push(xsuivant);
					tOrdonnees.push(ysuivant);
					
					xmin = Math.min( xmin, xsuivant);
					xmax = Math.max( xmax, xsuivant);
					ymin = Math.min( ymin, ysuivant);
					ymax = Math.max( ymax, ysuivant);
					
					// le point suivant devient le point actuel
					// pour le prochain tour de boucle :
					xactuel = xsuivant;
					yactuel = ysuivant;
		 
		 		}// fin de la boucle
		 } // fin de la fonction listePoints()
		 
		 
		 function redimensionne(){
		 // ramène les abscisses et ordonnées à des valeurs adaptées à la
		 // fenêtre svg
		 
		 // ramène [ xmin, xmax] à [0, cote]
		 // et [ymin, ymax] à [0, cote]
		 
		 	// on diminue un peu les min 
		 	// et augmente un peu les max
		 	// pour avoir un peu de gras dans le pourtour du cadre
		 	const xeps = 0.1 * (xmax - xmin);//on prend arbitrairement 10% de la largeur
		 	xmax += xeps;
		 	xmin -= xeps;
		 	const yeps = 0.1 * (ymax - ymin);
		 	ymax += yeps;
		 	ymin -= yeps;
		 	
		 	for(let i = 0; i < tAbscisses.length; i++)
		 	{
		 		tAbscisses[i] = cote/(xmax-xmin) * ( tAbscisses[i] -xmin);
		 		tOrdonnees[i] = cote/(ymax-ymin) * ( tOrdonnees[i] -ymin);
		 	}
		 
		 }
		 
		 
		 
		 
		 
		 function chaineSvg(){
		 //produit le code svg de la figure
		 
		 	//ouverture de l'élément svg :
		 	codeSvg += `<svg width="${cote}px" height="${cote}px" >`;
		 	// ouverture d'un groupe pour ne pas répéter le code de
		 	// certains attributs du tracé : 
		 	codeSvg += `<g style="stroke:black; fill:none;">`;
		 	
		 	
		 	//boucle de création des segments :
		 	for(let i = 0; i <= tAbscisses.length-2; i += 1)
		 	{
		 		codeSvg += `<line x1="${tAbscisses[i]}"    y1="${tOrdonnees[i]}" x2="${tAbscisses[i+1]}" y2="${tOrdonnees[i+1]}" />`;		 		
		 	}
		 	
		 	//fermeture groupe :
        	codeSvg += `</g>`;
        	//fermeture élément svg :
        	codeSvg += `</svg>`;
		 
		 }
		 
		 
		  
		 
		 function affichage(){
		 	initialise();
		 	const n = document.getElementById("nombreEtapes").value;
		 	produitChaine(n);
		 	document.getElementById("resultat").innerHTML = chaineDragon;
		 	
		 	listePoints();
		 	redimensionne();
		 	chaineSvg();
		 	document.getElementById("zoneFigure").innerHTML = codeSvg;
		 	  
		 }
		 
		</script>

		  
    </body>
</html>

Graphique (en créant les éléments dans le DOM via js)

Remarque: les éléments html créés ne disparaissent pas (dans le code écrit ci-dessous) lorsqu'on relance la fonction, il y a donc une superposition de dessins d'appels distincts. Il faudrait ajouter des instructions de destruction d'éléments html si l'on veut remédier à ce problème.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> dragon </title>
		  
		<style>
		body{
			height: 500px;
		}
		svg{
			border: 1px dashed orange;
		}
		</style>
    </head>
<body>

<p> Entrez la valeur de n dans le champ suivant :
<input type="number" name="nombreEtapes" id="nombreEtapes" value="0">
</p>

<p> Cliquez ensuite sur le bouton pour déclencher le calcul de la chaîne A<sub>n</sub> 
<button onclick="affichage()">Cliquez !</button>
</p>


<p> La chaîne A<sub>n</sub> est la suivante : </p>
<p id="resultat"></p>
		   
   
<svg id="zoneFigure">
</svg>

	


<script>

 let cote; // largeur et hauteur de l'élément svg
				// qui contiendra la figure		

 let chaineDragon; // string, contiendra la chaîne An
 let tAbscisses; // array, contiendra les abscisses des points successifs
 let tOrdonnees; // array, contiendra les ordonnées des points successifs
 let xmin, xmax, ymin, ymax; // number, coordonnées extrêmes de la figure finie

 let codeSvg; //string, contiendra le code de la figure svg
 
 
 function initialise(){
	cote = 200;
	chaineDragon = "";
	tAbscisses = [];
	tOrdonnees = []; 
	xmin = 0; xmax = 0; ymin = 0; ymax = 0;
	codeSvg = ``;
 }


function produitChaine(n)
	{
	// fonction de fabrication de la chaine An

		let A = "h", B = "g", C = "b", D = "d";
		for(let i = 1; i <= n; i += 1)
		{
			 [A, B, C, D] = [A+B, C+B, C+D, A+D]
		}
		chaineDragon = A;
	}
 

 
 
function listePoints()
{
	// remplit les tableaux tAbscisses, tOrdonnees
	// et détermine xmin, xmax, ymin, ymax
	 
	// coordonnées du point courant :
	let xactuel = 0;
	let yactuel = 0;
	tAbscisses.push(xactuel);
	tOrdonnees.push(yactuel);

	let caractere;
	let xsuivant, ysuivant;

	//boucle de parcours de la chaine
	for(let i = 0; i < chaineDragon.length; i++)
	{
		// caractère numéro i de la chaîne chaineDragon :
		caractere = chaineDragon[i];
		
		// coordonnées du point suivant :
		xsuivant = xactuel;
		ysuivant = yactuel;
		
		if(caractere === "h")
		{
			ysuivant -= 1; 
		}
		else if(caractere === "b")
		{
			ysuivant += 1; 
		}
		else if(caractere === "g")
		{
			xsuivant -= 1; 
		}
		else if(caractere === "d")
		{
			xsuivant += 1; 
		}
		
		tAbscisses.push(xsuivant);
		tOrdonnees.push(ysuivant);
		
		xmin = Math.min( xmin, xsuivant);
		xmax = Math.max( xmax, xsuivant);
		ymin = Math.min( ymin, ysuivant);
		ymax = Math.max( ymax, ysuivant);
		
		// le point suivant devient le point actuel
		// pour le prochain tour de boucle :
		xactuel = xsuivant;
		yactuel = ysuivant;

	}// fin de la boucle
} // fin de la fonction listePoints()
 
 
 
 
 
function redimensionne()
{
	// ramène les abscisses et ordonnées à des valeurs adaptées à la
	// fenêtre svg

	// ramène [ xmin, xmax] à [0, cote]
	// et [ymin, ymax] à [0, cote]

	// on diminue un peu les min 
	// et augmente un peu les max
	// pour avoir un peu de gras dans le pourtour du cadre
	const xeps = 0.1 * (xmax - xmin);//on prend arbitrairement 10% de la largeur
	xmax += xeps;
	xmin -= xeps;
	const yeps = 0.1 * (ymax - ymin);
	ymax += yeps;
	ymin -= yeps;

	for(let i = 0; i < tAbscisses.length; i++)
	{
		tAbscisses[i] = cote/(xmax-xmin) * ( tAbscisses[i] -xmin);
		tOrdonnees[i] = cote/(ymax-ymin) * ( tOrdonnees[i] -ymin);
	}

}
 
 
 
function dessineDragon(){
 //produit le code svg de la figure
 
	let zoneFigure = document.getElementById('zoneFigure');
	 
	zoneFigure.setAttribute("width", cote + 'px');
	zoneFigure.setAttribute("height", cote + 'px');
	
	let ligne; 
  
	//boucle de création des segments :
	for(let i = 0; i <= tAbscisses.length-2; i += 1)
	{
		ligne = document.createElementNS("http://www.w3.org/2000/svg", "line");
		ligne.setAttribute("x1", tAbscisses[i]);
		ligne.setAttribute("y1", tOrdonnees[i]);
		ligne.setAttribute("x2", tAbscisses[i+1]);
		ligne.setAttribute("y2", tOrdonnees[i+1]);
		ligne.style.stroke = 'black';
		zoneFigure.appendChild(ligne);
	}
}
 
 
  
 
function affichage(){
	initialise();
	const n = document.getElementById("nombreEtapes").value;
	produitChaine(n);
	document.getElementById("resultat").innerHTML = chaineDragon;

	listePoints();
	redimensionne();
	dessineDragon();
}
 
</script>		 
		  
</body>
</html>

Perspective

Recréez l'image ci-dessous. On utilisera javascript pour les tâches répétitives.

Solution en créant le texte du code svg avec js

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title>perspective </title>
         
    </head>
    
    
    <body>

		 
        <div id="zoneFigure"></div>
        
<script>

 
// ouverture élément svg :
let codeSvg = `<svg width="500px" height="500px">`;
// montant gauche : 
codeSvg += `<line x1="10" y1="500" x2="230" y2="0" style="stroke-width:5; stroke:black;" />`;
//montant droit : 
codeSvg += `<line x1="490" y1="500" x2="270" y2="0" style="stroke-width:5; stroke:black;" />`;
// segment rouge 1 : 
codeSvg +=  `<line x1="43" y1="425" x2="457" y2="425" style="stroke-width:5; stroke:red;"/>`;
// segment rouge 2 :
codeSvg += `<line x1="43" y1="75" x2="457" y2="75" style="stroke-width:5; stroke:red;"/>`;

 
 

//  création des barreaux
// on utilise les équations de droite des montants pour déterminer x1 et x2
// montant gauche :  y = -500/220 ( x - 230 ) d'où x = -220/500 *y + 230
// montant droit : y = 500/220 ( x-270 ) d'où x = 220/500 *y + 270.

for(let y = 50; y < 500; y+=50)
{
	codeSvg += `<line x1="${-220/500*y+230}" y1="${y}" x2="${220/500*y +270}" y2="${y}" style="stroke-width:3; stroke:black;" />`;
}

// fermeture code svg :
codeSvg += `</svg>`;

document.getElementById("zoneFigure").innerHTML = codeSvg;
</script>

  
    </body>
</html>

Solution en créant les éléments du DOM avec js

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title>perspective </title>
         
    </head>
    
    
    <body>

<svg width="500" height="500" id="cadre"></svg> 
     
    
<script>
const cadre =  document.getElementById("cadre");

// création du montant gauche :
const montantGauche  = document.createElementNS("http://www.w3.org/2000/svg", "line");
montantGauche.setAttribute('x1', 10);
montantGauche.setAttribute('y1', 500);
montantGauche.setAttribute('x2',230);
montantGauche.setAttribute('y2', 0);
montantGauche.setAttribute('style', "stroke-width:5; stroke:black;");
// on ajoute montant gauche à l'élément svg :
cadre.appendChild(montantGauche);


// création du montant droit : :
const montantDroit = document.createElementNS("http://www.w3.org/2000/svg", "line");
montantDroit.setAttribute('x1', 490);
montantDroit.setAttribute('y1', 500);
montantDroit.setAttribute('x2',270);
montantDroit.setAttribute('y2', 0);
montantDroit.setAttribute('style', "stroke-width:5; stroke:black;");
// on ajoute montantDroit à l'élément svg :
cadre.appendChild(montantDroit);
 
 
 
// création du segment rouge bas  : :
const barreRougeBasse = document.createElementNS("http://www.w3.org/2000/svg", "line");
barreRougeBasse.setAttribute('x1', 43);
barreRougeBasse.setAttribute('y1', 425);
barreRougeBasse.setAttribute('x2',457);
barreRougeBasse.setAttribute('y2', 425);
barreRougeBasse.setAttribute('style', "stroke-width:5; stroke:red;");
// on ajoute barreRougeBasse à l'élément svg :
cadre.appendChild(barreRougeBasse);



// création du segment rouge haut  : :
const barreRougeHaute = document.createElementNS("http://www.w3.org/2000/svg", "line");
barreRougeHaute.setAttribute('x1', 43);
barreRougeHaute.setAttribute('y1', 75);
barreRougeHaute.setAttribute('x2',457);
barreRougeHaute.setAttribute('y2', 75);
barreRougeHaute.setAttribute('style', "stroke-width:5; stroke:red;");
// on ajoute barreRougeHaute à l'élément svg :
cadre.appendChild(barreRougeHaute);
 
  
 

//  création des barreaux
// on utilise les équations de droite des montants pour déterminer x1 et x2
// montant gauche :  y = -500/220 ( x - 230 ) d'où x = -220/500 *y + 230
// montant droit : y = 500/220 ( x-270 ) d'où x = 220/500 *y + 270.

for(let y = 50; y < 500; y+=50)
{
	const barreau = document.createElementNS("http://www.w3.org/2000/svg", "line");
	barreau.setAttribute('x1', -220/500*y+230);
	barreau.setAttribute('y1', y);
	barreau.setAttribute('x2',220/500*y +270);
	barreau.setAttribute('y2', y);
	barreau.setAttribute('style', "stroke-width:3; stroke:black;");
	cadre.appendChild(barreau);
}
 
</script>

  
    </body>
</html>