svg et js

Une myriade de bulles

Écrire un script javascript qui crée au hasard des bulles dans une figure SVG.

Exemple d'image à obtenir

Exemple de code pour la coloration

Le code ci-dessous rappelle comment on peut obtenir une coloration "gradient".

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> dégradé </title>
		<style>
		svg{
			border: 1px dotted black ;
		}
		</style>
    </head>
<body>

		 

<svg width="200" height="200">
	<defs>
		  <linearGradient id="degradeOrange">
			<stop offset="5%" stop-color="#F60" />
			<stop offset="95%" stop-color="#FF6" />
		  </linearGradient>
	</defs>
<circle cx="100" cy="100" r="50" style="stroke:rgb(255,215,0); stroke-width:5; fill:url(#degradeOrange);" />
</svg>	

</body>
</html>

Aide : tirage au hasard

Pour tirer au hasard les coordonnées et le rayon des bulles, on pourra lire la page de cours sur random(), ainsi que la page d'exercices .

Exemple pour créer le code d'une bulle via JS

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

		 

        <svg width="700" height="500" id="cadre">
			
			<defs>
			  <linearGradient id="degradeOrange">
				<stop offset="5%" stop-color="#F60" />
				<stop offset="95%" stop-color="#FF6" />
			  </linearGradient>
			</defs>
			
			<g id="toile">
			</g>
		</svg>	


	<script>
	let codeFigure = `<circle cx="100" cy="200" r="50" style="stroke:none; fill: url(#degradeOrange);"/>`;
	document.querySelector("#toile").innerHTML = codeFigure;
	</script> 


    </body>
</html>

Code à compléter

On amorce le code à réaliser. A vous de compléter.

La balise g utilisée est une balise de groupement. Elle est utilisée ici uniquement pour faciliter l'accès à un élément de la page html dans lequel on inscrira le code à ajouter à l'aide de innnerHTML.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> une myriade de bulles </title>
		 
    </head>
    <body>

		 

        <svg width="700" height="500" id="cadre">
			
			<defs>
			  <linearGradient id="degradeOrange">
				<stop offset="5%" stop-color="#F60" />
				<stop offset="95%" stop-color="#FF6" />
			  </linearGradient>
			</defs>
			
			<g id="toile">
			</g>
		</svg>	


	<script>
	 // compléter ce code js
	 
	 // on définit une chaîne vide qui contiendra 
	 // le code des cercles svg
	 // cette chaîne sera définie à l'aide d'une boucle for :
	 var codeFigure = '';
	 
	 // le code terminera par :
	 document.querySelector("#toile").innerHTML = codeFigure;
	</script> 


    </body>
</html>

Une myriade de bulles

Un code possible :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> une myriade de bulles  </title>
		 
    </head>
    <body>

		 

        <svg width="700" height="500" id="cadre">
			
			<defs>
			  <linearGradient id="degradeOrange">
				<stop offset="5%" stop-color="#F60" />
				<stop offset="95%" stop-color="#FF6" />
			  </linearGradient>
			</defs>
		
			<g id="toile">
			</g>
		</svg>	


	<script>
	const cadre =  document.querySelector("#cadre");
	const largeur = cadre.getAttribute("width"); //récupération du width déclaré pour l'élément svg
	const hauteur = cadre.getAttribute("height");//récupération du height déclaré pour l'élément svg
	 
	//création du texte svg définissant les disques :
	let codeFigure = ``;
	for(let i = 0; i < 500; i++){
		codeFigure += `<circle cx="${Math.random() * largeur}" cy="${Math.random() * hauteur}" r="${15* Math.random()  + 5}" style="stroke:none; fill: url(#degradeOrange);" />`;
	}
	document.querySelector("#toile").innerHTML = codeFigure;
	</script> 


    </body>
</html>

Bulles bleues

Dans ce fichier, on a écrit une variante sur des bleus et un grand nombre de disques.

Testez d'autres choix.

Cercles de pourtour

On considère la figure suivante

L'idée est maintenant de reproduire la figure mais en confiant à JavaScript le travail répétitif.

Un code possible.

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

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

		
        <svg width="250" height="250">
         
			<title>Un tour de cercles avec rotate</title>
			
			<!-- le cercle orange -->
			<circle cx="125" cy="125" r="15" style="fill:orange;" />
          
           <g  id="tourDeCercles">
          </g>
		  
		</svg>	
			




        <script>
         
        let codeFig = ``;
        for(let i = 0; i < 8; i++)
        {
        	codeFig += `<circle cx="200" cy="125" r="25" style="fill:rgb(0,0,0);" transform="rotate(${45*i},125,125)" />`;
        }
        document.querySelector("#tourDeCercles").innerHTML = codeFig;
        </script>

 

    </body>
</html>

Avec paramètres

L'intérêt de programmer est aussi de pouvoir modifier plus rapidement un certain nombre de paramètres.

Au lieu d'écrire des valeurs numériques directement dans le code, on définit donc des variables. L'intérêt est de n'avoir pas à modifier une même valeur à plusieurs endroits : toutes les déclarations de variables sont au même endroit dans le code et lorsqu'une variable est utilisée plusieurs fois, on ne la modifie qu'au niveau des déclarations.

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

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

		
         <svg width="250" height="250">
         
			<title>Un tour de cercles avec rotate</title>
			
			<!-- le cercle orange -->
			<circle cx="125" cy="125" r="15" style="fill:orange;" />
          
           <g  id="tourDeCercles">
          </g>
		  
		</svg>	
			




        <script>
		const rayon = 25;
        const dx = 75;
        const centrex = 125;
        const angle = 45;
         
        let codeFig = ``;
        for(let i = 0; i < 360; i += angle)
        {
        	codeFig += `<circle cx="${centrex + dx}" cy="125" r="${rayon}" style="fill:rgb(0,0,0);" transform="rotate(${i},${centrex},125)" />`;
        }
        document.querySelector("#tourDeCercles").innerHTML = codeFig;
        </script>



 

 

    </body>
</html>

Les deux figures

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

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

		
         <svg width="600" height="250">
         
			<title>Un tour de cercles avec rotate</title>
			
			<!-- le cercle orange un -->
			<circle cx="125" cy="125" r="15" style="fill:orange;" />
          
          
            <!-- le cercle orange deux -->
			<circle cx="400" cy="125" r="15" style="fill:orange;" />
			
			
           <g  id="tourDeCercles1">
           </g>
           
           <g  id="tourDeCercles2">
           </g>
		  
		</svg>	
			




        <script>
			
		function tour(rayon, dx, centrex, angle)
		{
			let codeFig = ``;
			for(let i = 0; i < 360; i += angle)
			{
				codeFig += `<circle cx="${centrex + dx}" cy="125" r="${rayon}" style="fill:rgb(0,0,0);" transform="rotate(${i},${centrex},125)" />`;
			}
			return codeFig;
	    }
	    
	     
	    
	    document.querySelector("#tourDeCercles1").innerHTML = tour(25, 75, 125, 45);
	    document.querySelector("#tourDeCercles2").innerHTML = tour(5, 20, 400, 45);
        </script>



 

 

    </body>
</html>

Cercles de pourtour, bis

Reprendre la figure de l'exercice précédent. Ajouter des éléments de type input pour permettre à l'utilisateur de modifier les paramètres (rayon des disques noirs, distance entre le centre du disque orange et des disques noirs, nombre de disques noirs, rayon du disque orange).

Agir sur les paramètres

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

    <head>
        <meta charset="utf-8">
        <title> Cercles </title>
         
		<style>
		svg{border: 1px solid orange;}
		</style>
    </head>
    
    
    <body>
 
		<form>
			<label for="rayonOrange">Rayon du disque orange : </label>
			<input type="number" id="rayonOrange" value="15" step="5">
			<br>
			
			<label for="rayonGris">Rayon des disques noirs : </label>
			<input type="number" id="rayonGris" value="25" step="5">
			<br>
			
			<label for="decalage">Distance entre disque orange et disques gris : </label>
			<input type="number" id="decalage" value="75" step="5">
			
			<br>
			<label for="nbdisques">Nombre de disques gris : </label>
			<input type="number" id="nbdisques" value="7" step="1">
		</form>


		<svg id="toile" width="600" height="300">
		
		</svg>
       
        <script>
			
		// récupération des éléments de type input :
		const inputrayonorange = document.querySelector("#rayonOrange"); 
		const inputrayongris = document.querySelector("#rayonGris"); 
		const inputdecalage = document.querySelector("#decalage"); 
		const inputnbdisques = document.querySelector("#nbdisques"); 
        
        const toile = document.querySelector("#toile");
        const largeur = toile.getAttribute("width"); //récupération du width déclaré pour l'élément svg
		const hauteur = toile.getAttribute("height");//récupération du height déclaré pour l'élément svg
		  
		
		// le cercle orange
		let rayonOrange = parseInt(inputrayonorange.value);//rayon du disque orange		
		let Xcentreorange = largeur/2; // abscisse du centre du disque orange
		let Ycentreorange = hauteur/2; // ordonnée du centre du disque orange
		 
		// les cercles noirs:
		let rayon = parseInt(inputrayongris.value);//rayon d'un disque gris
		let dx = parseInt(inputdecalage.value);
		let centrex = Xcentreorange + dx;// abscisse du centre du premier disque gris placé
		
		let nbDisques = parseInt(inputnbdisques.value);// nombre de disques gris
		let angle = parseInt(360/nbDisques);
		
		 
		
		 
	 
		function creerCodeFigure()
		{
			let codeFig = `<circle cx="${Xcentreorange}" cy="${Ycentreorange}" r="${rayonOrange}" style="fill:orange;" />`;
			for(let i = 0; i < 360-angle; i+= angle) {
				codeFig += `<circle cx="${centrex}" cy="${Ycentreorange}" r="${rayon}" style="fill:rgb(0,0,0);" transform="rotate(${i},${Xcentreorange},${Ycentreorange})" />`;
			};
			return codeFig;
		}
		
		
		function modifierParametres(){
			rayonOrange = parseInt(inputrayonorange.value);
			rayon = parseInt(inputrayongris.value);
			dx = parseInt(inputdecalage.value);
			centrex = Xcentreorange + dx;
			nbDisques = parseInt(inputnbdisques.value);
			angle = parseInt(360/nbDisques);
			toile.innerHTML = creerCodeFigure();	
		}	
			
		
		 
		 
		inputrayonorange.addEventListener('change', modifierParametres);
		inputrayongris.addEventListener('change', modifierParametres);
		inputdecalage.addEventListener('change', modifierParametres);
		inputnbdisques.addEventListener('change', modifierParametres);
		
		
		toile.innerHTML = creerCodeFigure();
					
	  
        </script>
		
 

    </body>
</html>

Grille de disques

Écrire un code de fonction JS reproduisant la figure ci-dessous.

Le nombre de lignes, le rayon des disques seront des paramètres de la fonction.

Un code possible.

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

    <head>
        <meta charset="utf-8">
        <title> Cercles </title>
        <style>
        svg{border: 1px dotted rgb(200,200,200);}
        </style>
		 
    </head>
    
    
    <body>

		<svg id="toile" width="600" height="600">
		
		</svg>

        <script>
		// on récupère l'élément svg:	
		const toile = document.querySelector("#toile");
         
		
		function grille(rayon, nbLignes, nbDisques, couleur)
		{
			// rayon: rayon d'un disque
			// nbLignes: nombre de lignes
			// nbDisques: nombre de disques par ligne
			// couleur: couleur des disques
			
			// on commence par ajuster les dimensions de l'élément svg:
			toile.setAttribute("width", nbDisques * (3*rayon));
			toile.setAttribute("height", nbDisques * (3*rayon));
			
			// définition d'une variable pour écart entre disques:
			let ecart = rayon/2;
			
			// code de la figure:
			let codeFig = ``;
			for(let i = 1; i <= nbLignes; i++) 
			{
				for(let j = 1; j <= nbDisques; j++) 
					{
						codeFig += `<circle cx="${j*(2*rayon+ecart)}" cy="${i*(2*rayon+ecart)}" r="${rayon}" style="fill:${couleur};" />`;
					}
			}
			return codeFig; 
		}
		
		 
       
          
		toile.innerHTML = grille(rayon=10, nbLignes=5, nbDisques=7, couleur="rgb(200,0, 0)"); 
		
        </script>

 

    </body>
</html>