Rectangles et JavaScript

Rectangle et rotation

Reproduire la figure ci-dessous à l'aide de JavaScript.

Une solution avec js

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> carrés imbriqués </title>
    </head>
    <body>

<div id="zoneFig">  </div>


<script>
var cote = 50; //côté du carré
var sommetx = 100; // abscisse du centre de rotation, abscisse du sommet haut gauche du premier rectangle
var sommety = 100; // ordonnée du centre de rotation, ordonnée du sommet haut gauche du premier rectangle
var angle = 20; // angle de rotation
	
	

let zoneFig = document.getElementById("zoneFig");
// on crée un élément dans l'élément div d'identifiant zoneFig :
let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", 200 +'px');
svg.setAttribute("height", 200 +'px');
zoneFig.appendChild(svg);

let rectangle;

// boucle de création des carrés  :
for(let k = 0; k <= 360; k += angle){
	rectangle = document.createElementNS("http://www.w3.org/2000/svg", "rect");
	rectangle.setAttribute("x", sommetx);
	rectangle.setAttribute("y", sommety);
	rectangle.setAttribute("width", cote);
	rectangle.setAttribute("height", cote);
	rectangle.setAttribute('transform', "rotate(" + k + "," + sommetx + "," + sommety + ")");
	rectangle.setAttribute("style", "stroke-width:3; stroke:rgb(150,150,150);fill:none;");
	svg.appendChild(rectangle);
}
</script>
		 
  
		 


    </body>
</html>

avec snap

Exemple pour la syntaxe de la rotation.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Carré tournis </title>
		<style>
		svg{
			border: 1px dotted red ;
		}
		</style>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg.js"> </script>   
    </head>
    <body>

		 

       <svg width="200px" height="200px"  id="carretournis">
       </svg>	
		
		
		<script>
		var tournis = Snap("#carretournis");
		
		var angle = 20;
		for(var i=0; i<=360; i+=angle)
		{
			tournis.rect(100,100,50,50)
			.attr("stroke-width",3).attr("stroke","rgb(150,150,150)")
			.attr("fill", "none")
			.transform("r"+ i + ", 100, 100");
		}
		</script>

		 


    </body>
</html>

Un mur de briques

Reproduire la figure ci-dessous à l'aide de javascript.

On utilisera linearGradient pour le dégradé.

une solution js

Un code possible

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> mur de briques </title>
    </head>
    <body>


<svg width="700px" height="500px" id="mur">

	<defs>
		<linearGradient id="couleurbrique">
		<stop offset="0%" style="stop-color: #ff7f50;" />
		<stop offset="100%" style="stop-color: #b22222;" />
		</linearGradient>
	</defs>

</svg>


<script>
	
var largeur = 40; //largeur d'une brique
var hauteur = 20; //hauteur d'une brique
var nbBriques = 20; //nombre de briques par rangée

let mur = document.getElementById("mur");

let brique;

function rangeeImpair(k){
	for(let j = 0; j < nbBriques; j++){
		brique = document.createElementNS("http://www.w3.org/2000/svg", "rect");
		brique.setAttribute("x", 0);
		brique.setAttribute("y", 0);
		brique.setAttribute("width", largeur);
		brique.setAttribute("height", hauteur);
		brique.setAttribute('transform', "translate(" + (j*largeur) + "," + (k*hauteur) + ")");
		brique.setAttribute("style", "stroke-width:3; stroke:rgb(100,200,200);fill:url(#couleurbrique);");
		mur.appendChild(brique);
	}
}


function rangeePair(k){
	for(let j = 0; j < nbBriques; j++){
		brique = document.createElementNS("http://www.w3.org/2000/svg", "rect");
		brique.setAttribute("x", 0);
		brique.setAttribute("y", 0);
		brique.setAttribute("width", largeur);
		brique.setAttribute("height", hauteur);
		brique.setAttribute('transform', "translate(" + (j*largeur - largeur/2) + "," + (k*hauteur) + ")");
		brique.setAttribute("style", "stroke-width:3; stroke:rgb(100,200,200);fill:url(#couleurbrique);");
		mur.appendChild(brique);
	}
}



 
for(let k = 0; k < 15; k++) rangeeImpair(2*k);
for(let k = 0; k < 15; k++) rangeePair(2*k+1);
</script>		 
 
    </body>
</html>

une solution snap

Un code possible

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> mur de briques </title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg.js"> </script>  
    </head>
    <body>

		 


        <svg width="800px" height="200px"  id="mur">
        <defs>
        	<linearGradient id="couleurbrique">
        	<stop offset="0%" style="stop-color: #ff7f50;" />
        	<stop offset="100%" style="stop-color: #b22222;" />
        	</linearGradient>
        </defs>
        </svg>
        
        
        <script>
        var mur = Snap("#mur");
        
        
        var longueurBrique = 40;
        var nbBriquesParLigne = 6;
        var epaisseurBrique = 20;
        var nbLignes = 8;
        
        // les lignes avec briques complètes :
        for(var j = 0; j < (nbLignes /2)*(epaisseurBrique*2); j+= (epaisseurBrique*2) )
        {
        	for(var i=0; i<nbBriquesParLigne*longueurBrique; i+=longueurBrique)
				{
					mur.rect(0,0,longueurBrique, epaisseurBrique)
					.attr('fill', 'url(#couleurbrique)')
					.attr('stroke','rgb(100,200,200)')
					.transform('t' + i + ',' + j ) 
				}
        }
        
        
        // les rangées commençant par une demi-brique
        for(var j = epaisseurBrique; j < epaisseurBrique+(nbLignes /2)*(epaisseurBrique*2); j+=(epaisseurBrique*2))
        {
        	//une demi brique :
        	mur.rect(0,0, longueurBrique/2, epaisseurBrique)
					.attr('fill', 'url(#couleurbrique)')
					.attr('stroke','rgb(100,200,200)')
					.transform('t0,' + j);
					
					
			// puis 5 briques :
        	for(var i=(longueurBrique/2) ; i < (longueurBrique/2)+(nbBriquesParLigne-1)*longueurBrique; i+=longueurBrique)
				{
					mur.rect(0,0,longueurBrique, epaisseurBrique)
					.attr('fill', 'url(#couleurbrique)')
					.attr('stroke','rgb(100,200,200)')
					.transform('t' + i + ',' + j);
				}
			
			// et on finit par une demi brique :
					mur.rect(0,0,longueurBrique/2, epaisseurBrique)
					.attr('fill', 'url(#couleurbrique)')
					.attr('stroke','rgb(100,200,200)')
					.transform('t' + (longueurBrique/2+(nbBriquesParLigne-1)*longueurBrique) + ',' + j);
				
				
        }
        
        </script>
        
        
        

    </body>
</html>

Tournis de carrés

Reproduire l'image à l'aide de javascript l'image suivante :

Une solution avec js

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> carrés imbriqués </title>
    </head>
    <body>

<div id="zoneFig"></div>
 


<script>
	
var cote = 400; // côté du carré de départ


let zoneFig = document.getElementById("zoneFig");

// on crée un élément dans l'élément div d'identifiant zoneFig :
let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", (1.5*cote) +'px');
svg.setAttribute("height", (1.5*cote) +'px');
zoneFig.appendChild(svg);

 

var sommetx = cote*0.25; // abscisse du sommet haut gauche du premier carré
var sommety = cote*0.25; // ordonnée du sommet haut gauche du premier carré

var centrex = sommetx + cote/2;// abscisse du centre du carré
var centrey = sommety + cote/2;// ordonnée du centre du carré

let carre;

for(let k = 0; k < 11; k++){
	carre = document.createElementNS("http://www.w3.org/2000/svg", "rect");
	carre.setAttribute("x", sommetx);
	carre.setAttribute("y", sommety);
	carre.setAttribute("width", cote);
	carre.setAttribute("height", cote);
	if( k%2 === 1 ){
		carre.setAttribute('transform', "rotate(" +  45  + "," + centrex + "," + centrey + ")");
	}
	carre.setAttribute("style", "stroke-width:3; stroke:magenta;fill:none;");
	svg.appendChild(carre);
	
	//côté du carré suivant : 
	cote = cote * Math.sqrt(2)/2;
	// sommet du carré   suivant  :
	sommetx = Math.sqrt(2)/2 * (sommetx -centrex) + centrex;
	sommety = Math.sqrt(2)/2 * (sommety -centrey) + centrey;
}
 
</script>		 
     
		
		 


    </body>
</html>

Une solution avec snap

Dans ce code, on a choisi de ne pas utiliser la balise permettant de définir un rectangle mais d'utiliser la balise plus générale permettant de définir un polygone On peut ainsi ainsi coder la figure en changeant à chaque tour de boucle les sommets en les milieux des côtés.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> carrés imbriqués </title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg.js"> </script>  
    </head>
    <body>

		 
     <svg width="1000px" height="1000px" id="carresimbriques"></svg>	
	
	
	<script>
	var abyme = Snap("#carresimbriques");
	
	// longueur du côté du premier carré :
	var longueurCoteInitial = 950;
	
	// sommets A, B, C, D du polygone :
	var Ax = 0, Ay = 0;
	var Bx = longueurCoteInitial, By = 0;
	var Cx = longueurCoteInitial, Cy = longueurCoteInitial;
	var Dx = 0, Dy = longueurCoteInitial;
	
	// nombre total de carrés à dessiner :
	var nbCarres = 15;
	
	for(var k = 1; k <= nbCarres; k++)
	{
		abyme.polygon(Ax,Ay,Bx,By,Cx,Cy,Dx,Dy)
		.attr('fill', 'none')
		.attr('stroke', 'black');
		
		//calcul des milieux :
		var Ix = (Ax+Bx)/2, Iy = (Ay+By)/2;
		var Jx = (Cx+Bx)/2, Jy = (Cy+By)/2;
		var Kx = (Cx+Dx)/2, Ky = (Cy+Dy)/2;
		var Lx = (Ax+Dx)/2, Ly = (Ay+Dy)/2;
		// les milieux deviennent 
		// les sommets du prochain tour de boucle :
		Ax = Ix; Ay = Iy; Bx = Jx; By = Jy;
		Cx = Kx; Cy = Ky; Dx = Lx; Dy = Ly;
		
		
	}
	
	
	</script>
		
		 


    </body>
</html>