op art

Un disque coupé

Écrire un code svg permettant d'obtenir une figure de la forme suivante :
disque coupé

Un code possible

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Mange disque </title>
        
		 
    </head>
    <body>
  
<svg width="100" height="100"   transform="translate(10,0)">
	<path d="M 0 10 A 20 20 0 1 1 0 40 Z" style="stroke:orange;fill:yellow;stroke-width:3px;" />
</svg>	
 
    </body>
</html>

un code avec js

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Mange disque </title>
        
		 
    </head>
    <body>

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


<script>
// segment [AB] de la figure (corde du cercle) :
var Ax = 10, Ay = 10, Bx = 10, By = 40;
//rayon du cercle :
var rayon = 20; 


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

// on crée un élément svg dans l'élément div d'identifiant zoneFig :
let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", 100 +'px');
svg.setAttribute("height", 100 +'px');
svg.setAttribute("viewBox", "0 0 80 80");
zoneFig.appendChild(svg);
 
// création du disque tronqué : 
let disquetronque = document.createElementNS("http://www.w3.org/2000/svg", "path");
disquetronque.setAttribute("d", 'M' + Ax + ' ' + Ay + 'A' + rayon + ' ' + rayon + ' 0 1 1 ' +  Bx  + ' ' + By + ' ' +'Z');
disquetronque.setAttribute("style", "stroke:orange;fill:yellow;stroke-width:3px;");
disquetronque.setAttribute("id", "disquecoupe");
svg.appendChild(disquetronque);
</script>
 
    </body>
</html>

Disques coupés et rotations

Écrire un code svg permettant d'obtenir une figure telle que la suivante :
disques coupés en rotation

Un code possible

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Mange disque </title>
        
		 
    </head>
    <body>
 


<svg width="400" height="100"   transform="translate(10,0)">
	<path id="disquecoupe" d="M 0 10 A 20 20 0 1 1 0 40 Z" style="stroke:orange;fill:yellow;stroke-width:3px;" />
	<use xlink:href="#disquecoupe" transform="translate(50,0) rotate(45, 13.2287565553, 25)" />
	<use xlink:href="#disquecoupe" transform="translate(100,0) rotate(90, 13.2287565553, 25)" />
	<use xlink:href="#disquecoupe" transform="translate(150,0) rotate(135, 13.2287565553, 25)" />
</svg>	
 
    </body>
</html>

Un code avec js

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Mange disque </title>
        
		 
    </head>
    <body>
 

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

<script>
// segment [AB] de la figure (corde du cercle) :
var Ax = 10, Ay = 10, Bx = 10, By = 40;
//rayon du cercle : 
var rayon = 20; 
// coordonnées du centre du disque 
// point à une distance 20 de A et se trouvant sur la médiatrice de [AB] : 
var centrey = 1/2 * (Ay +By);
var centrex = Ax + Math.sqrt(rayon*rayon - (centrey-Ay)*(centrey-Ay)); 

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

// on crée un élément svg 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", 100 +'px');
svg.setAttribute("viewBox", "0 0 200 100");
zoneFig.appendChild(svg);


function disque(k, angle){
	let disquetronque = document.createElementNS("http://www.w3.org/2000/svg", "path");
	disquetronque.setAttribute("d", 'M' + Ax + ' ' + Ay + 'A' + rayon + ' ' + rayon + ' 0 1 1 ' +  Bx  + ' ' + By + ' ' +'Z');
	disquetronque.setAttribute("style", "stroke:orange;fill:yellow;stroke-width:3px;");
	disquetronque.setAttribute('transform', "translate(" + (k*2.5*rayon) + "," + "0) rotate(" + (k*angle) + "," + centrex + "," + centrey +")" );
	svg.appendChild(disquetronque);
}


for(let i = 0; i < 4; i++) disque(i, 45);
</script>
 
 
    </body>
</html>

Disques coupés et rotations, bis

Écrire un code svg permettant d'obtenir une figure telle que la suivante :
disques coupés en rotation

Mais cette fois, le nombre de disques et l'angle utilisé doivent être des paramètres modifiables par l'utilisateur.

Un code possible

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Mange disque </title>
        
		 
    </head>
<body>
		
<label for="nbdisques">Entrez le nombre de disques : </label>
<input type="number" value="4" step="1" min="1" id="nbdisques">
<br>
<label for="angle">Entrez l'angle de rotation : </label>
<input type="number" value="15" step="1" min="1" id="angle">
 

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

<script>
var nbdisquesinput = document.getElementById("nbdisques");
var angleinput = document.getElementById("angle"); 


// segment [AB] de la figure (corde du cercle) :
var Ax = 10, Ay = 10, Bx = 10, By = 40;
//rayon du cercle : 
var rayon = 20; 
// coordonnées du centre du disque 
// point à une distance rayon de A et se trouvant sur la médiatrice de [AB] : 
var centrey = 1/2 * (Ay +By);
var centrex = Ax + Math.sqrt(rayon*rayon - (centrey-Ay)*(centrey-Ay)); 

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

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


function ligne(angle, nb){
	
	// on commence par détruire les anciens disques  :
	let disques = document.getElementsByTagNameNS("http://www.w3.org/2000/svg", "path");
	while(disques[0]){
    disques[0].parentNode.removeChild(disques[0]);
	}
	// on crée maintenant les nouveaux disques :
	for(let k = 0; k < nb; k++)
	{
	let disquetronque = document.createElementNS("http://www.w3.org/2000/svg", "path");
	disquetronque.setAttribute("d", 'M' + Ax + ' ' + Ay + 'A' + rayon + ' ' + rayon + ' 0 1 1 ' +  Bx  + ' ' + By + ' ' +'Z');
	disquetronque.setAttribute("style", "stroke:orange;fill:yellow;stroke-width:3px;");
	disquetronque.setAttribute('transform', "translate(" + (k*2.5*rayon) + "," + "0) rotate(" + (k*angle) + "," + centrex + "," + centrey +")" );
	svg.appendChild(disquetronque);
	}
}

 

 
</script>		
 

 
 
</body>
</html>

Instabilité

L'objectif de cet exercice est de tenter de reproduire une oeuvre de Julio Le Parc.

Commencer par lire ce court article présentant Julio Le Parc.

Vous pourrez ensuite visiter un peu ce site sur lequel des reproductions de certaines de ses oeuvres sont présentées.

L'oeuvre à reproduire ici date de 1959 et est nommée "Instabilité" :
Julio Le Parc Instabilité 1959

Le travail à réaliser

Ci dessous une image créée en svg dont la fabrication s'inspire du tableau "Instabilité". La mise en couleurs a surtout pour objectif de vous aider à décomposer l'ensemble pour mieux le coder. Commencer par coder le quart haut gauche, le reste s'en déduira facilement.
A la Julio

Écrire un code svg pour reproduire cette image.

Utilisez javascript pour les répétitions.

script pour le quart haut gauche

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> A la Julio </title>
        
		 
    </head>
    <body>
 


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

<script>
 
// segment [AB] de la figure (corde du cercle) :
var Ax = 10, Ay = 10, Bx = 10, By = 40;
//rayon du cercle : 
var rayon = 20; 
// coordonnées du centre du disque 
// point à une distance rayon de A et se trouvant sur la médiatrice de [AB] : 
var centrey = 1/2 * (Ay +By);
var centrex = Ax + Math.sqrt(rayon*rayon - (centrey-Ay)*(centrey-Ay)); 

// nombre  de disques par ligne :
var nbDisquesLigne = 13;
// angle de rotation entre deux disques :
var angle = 180/(nbDisquesLigne-1);

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

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



// fonction de création d'une rangée
function ligne(angledepart, translationy){
// angle départ : angle du disque coupé de début de rangée
// translationy : on translate les lignes vers le bas au fur et à mesure de leur création
// translationy est   l'ordonnée du vecteur de translation
	for(let k = 0; k < nbDisquesLigne; k += 1)
	{
	let disquetronque = document.createElementNS("http://www.w3.org/2000/svg", "path");
	disquetronque.setAttribute("d", 'M' + Ax + ' ' + Ay + 'A' + rayon + ' ' + rayon + ' 0 1 1 ' +  Bx  + ' ' + By + ' ' +'Z');
	disquetronque.setAttribute("style", "stroke:red;fill:#aaa;stroke-width:3px;");
	disquetronque.setAttribute('transform', "translate(" + (k*2.5*rayon) + "," + translationy + ") rotate(" + (k*angle+angledepart) + "," + centrex + "," + centrey +")" );
	svg.appendChild(disquetronque);
	}
}


function quartHautGauche(){
	for(let k = 0; k < nbDisquesLigne; k += 1)
	{
		ligne(k*angle,k*2.5*rayon);
	}
}

quartHautGauche();
</script>


    </body>
</html>

Un code possible

Quelques valeurs caractéristiques sont passées en paramètres (angle de rotation d'un disque à l'autre, écart entre deux disques...). Vous pouvez retravailler ce code pour ajouter des paramètres : rayon des disques par exemple, on peut également imaginer une autre figure géométrique de base...

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> A la Julio </title>
        
		 
    </head>
    <body>
 


<svg width="700" height="700" id="figure" transform="scale(0.5) translate(10,0)">
</svg>	

<script>
var nbdisque = 13;
var angle = 15;
var dx = 50;
var dy = 50;
var chaine = '';

chaine += '<g id="hautgauche" style="stroke: red; fill: gray;">';
chaine += '<path id="figurebase" d="M 0 10 A 20 20 0 1 1 0 40 Z"  />'; 

for(let j = 0; j < nbdisque; j++) {
	for(let i = 0; i < nbdisque; i++ ) {
		chaine += '<use xlink:href="#figurebase" transform="translate(' + (i * dx) + ',' + (j * dy) + ') ';
		chaine += 'rotate(' + ((i+j) * angle) + ', 13.2287565553, 25)"/>  ';
	}
}
chaine += '</g>';


chaine += '<g id="hautdroit" style="stroke: black; fill: red;">';
for(let j = 0; j < nbdisque; j++) {
	for(let i = 0; i < nbdisque; i++ ) {
		chaine += '<use xlink:href="#figurebase" transform="translate(' + ( (i+nbdisque) * dx) + ',' + (j * dy) + ') ';
		chaine += 'rotate(' + ((-i+j) * angle + 3*90) + ', 13.2287565553, 25)"/>  ';
	}
}
chaine += '</g>';

chaine += '<g id="basgauche" style="stroke: red; fill: green;">';
for(let j = 0; j < nbdisque; j++) {
	for(let i = 0; i < nbdisque; i++ ) {
		chaine += '<use xlink:href="#figurebase" transform="translate(' + ( i * dx) + ',' + ( (j +nbdisque) * dy) + ') ';
		chaine += 'rotate(' + ((i-j) * angle + 90) + ', 13.2287565553, 25)"/>  ';
	}
}
chaine += '</g>';


chaine += '<g id="basdroit" style="stroke: green; fill: magenta;">';
for(let j = 0; j < nbdisque; j++) {
	for(let i = 0; i < nbdisque; i++ ) {
		chaine += '<use xlink:href="#figurebase" transform="translate(' + ( (i+nbdisque) * dx) + ',' + ( (j +nbdisque) * dy) + ') ';
		chaine += 'rotate(' + ((-i-j) * angle + 2*90) + ', 13.2287565553, 25)"/>  ';
	}
}
chaine += '</g>';



var figure = document.getElementById("figure");
figure.innerHTML = chaine;
</script>

    </body>
</html>

Instabilité, bis

Reproduire à nouveau le tableau "Instabilité" mais en utilisant maintenant la bibliothèque snapsvg.

Un code possible

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


 

<script>
var nbdisque = 13;
var angle = 15;
var dx = 50;
var dy = 50;

var instabilite = Snap(900,900);
instabilite.transform("S 0.5 t 10");

var figurebase = instabilite.path("M 0 10 A 20 20 0 1 1 0 40 Z").attr("stroke-width", "3px");
 
for(let j = 0; j < nbdisque; j++) {
	for(let i = 0; i < nbdisque; i++ ) {
		figurebase.clone().attr("stroke","red").attr("fill","blue")
		.transform(  "t" + (i * dx) + "," + (j *dy) + " r " + ((i+j) * angle)  );
	}
}

for(let j = 0; j < nbdisque; j++) {
	for(let i = 0; i < nbdisque; i++ ) {
		figurebase.clone().attr("stroke","green").attr("fill","orange")
		.transform("t" + ((i+nbdisque) * dx  ) + "," + (j *dy) + "r" + ((-i+j) * angle + 3*90)  );
	}
}


for(let j = 0; j < nbdisque; j++) {
	for(let i = 0; i < nbdisque; i++ ) {
		figurebase.clone().attr("stroke","orange").attr("fill","green")
		.transform("t" + (i * dx) + "," + ((j+nbdisque) *dy) + "r" + ((i-j) * angle + 90)  );
	}
}


for(let j = 0; j < nbdisque; j++) {
	for(let i = 0; i < nbdisque; i++ ) {
		figurebase.clone().attr("stroke","blue").attr("fill","red")
		.transform("t" + ((i+nbdisque) * dx) + "," + ((j+nbdisque) *dy) + "r" + ((-i-j) * angle + 2*90)  );
	}
}

 
</script>

    </body>
</html>

En regroupant par quart

On crée dans ce code le quart haut gauche de la figure en un groupe.

Il n'y a alors plus qu'à faire subir translations et rotations sur l'ensemble du groupe plutôt que de récréer les disques dans chaque groupe.

On a également paramétré le rayon des disques.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> A la Julio </title>
     
	<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg.js"> </script> 
    </head>
    <body>
 <p>Relancer en ajoutant un espace dans la zone de code.</p>
<script>
var nbdisque = 7;
var angle = 180/(nbdisque-1);
var rayon = 8;
var dx = 2.5 * rayon;
var dy = 2.5 * rayon;
var theta = 3 * Math.PI/4;

var Ax = Math.cos(theta) * rayon + dx;
var Ay = Math.sin(theta) * rayon + dy ;
var Bx = Math.cos(theta)  * rayon + dx;
var By = -Math.sin(theta) * rayon + dy ;

var instabilite = Snap(900,900);

var figurebase = instabilite.path('M ' + Bx + ' ' + By + ' A ' +  rayon + ' ' + rayon + ' 0 1 1 ' +  Ax + ' ' + Ay + 'Z');

var quarthautgauche = instabilite.group();//création d'un groupe
 
 
// on ajoute un à un les éléments du groupe 
// ces éléments sont les disques du quart haut gauche de la figure
for(let j = 0; j < nbdisque; j++) {
	for(let i = 0; i < nbdisque; i++ ) {
		var r = Math.floor(Math.random() * 256);// tirage d'une composante rouge au hasard
		var v = Math.floor(Math.random() * 256);// tirage d'une composante vert au hasard
		var b = Math.floor(Math.random() * 256);// tirage d'une composante bleu au hasard
		quarthautgauche.add( 
			figurebase.clone()
			.attr("fill",'rgb(' + r + ',' + v + ',' + b + ')')
			.transform(  "t" + (i * dx) + "," + (j *dy) + " r " + ((i+j) * angle)  )
		);
	}
}

// bloc quart haut droit
quarthautgauche.clone().transform( 't' + (nbdisque * dx) + ',' + 0 + 'r 90' );

// bloc quart bas gauche  
quarthautgauche.clone().transform( 't' + 0 + ',' + (nbdisque * dy) + 'r -90'  );

// bloc quart bas droit
quarthautgauche.clone().transform( 't' + (nbdisque * dx) + ',' + (nbdisque * dy) + 'r 180' );
</script>
</body>
</html>

Instabilité, ter

Reproduire à nouveau le tableau "Instabilité" en utilisant la bibliothèque snapsvg.

Cette fois, on demande que les disques soient animés en tournant autour de leurs centres.

Indication

On cherchera à stocker dans un tableau (array) chaque disque créé.

En nommant t l'élément de type array contenant tous les disques créés, on pourra alors terminer par une boucle telle que la suivante :

 
<script>
var t = []; // tableau pour stocker les disques

// code de création des disques, à stocker dans t au fur et à mesure de leur création

// boucle pour animer chaque disque : 
var nombreTours = 10;
var temps = 20 * 1000; // temps en ms
for( let c=0; c<t.length; c++) {
  t[c].animate({ transform: t[c].transform() + 'r ' + (nombreTours*360)}, temps )
}
</script>

Un code possible

<!DOCTYPE html>
<html lang="fr">
    <head>
		<meta charset="utf-8">
		<title> A la Julio </title>
     
		<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg.js"> </script> 
    </head>
<body>
 
 
<p>Relancer en ajoutant un espace dans la zone de code.</p>
 
<script>
	
function couleurHasard(){
	var r, v, b;
	r = Math.floor(Math.random() * 256);
	v = Math.floor(Math.random() * 256);
	b = Math.floor(Math.random() * 256);
	return 'rgb(' + r + ', ' + v + ', ' + b + ')';  
}


var nbdisque = 5;// nombre de disques du quart haut gauche
var angle = 180/(nbdisque-1);// angle de rotation d'un disque au suivant dans le quart haut gauche
var rayon = 8;
var dx = 2.5 * rayon;
var dy = 2.5 * rayon;
var theta = 3 * Math.PI/4;

var Ax = Math.cos(theta) * rayon + dx;
var Ay = Math.sin(theta) * rayon + dy ;
var Bx = Math.cos(theta)  * rayon + dx;
var By = -Math.sin(theta) * rayon + dy ;


var largeur = 2 * nbdisque * (2*rayon + dx);
var hauteur = 2 * nbdisque * (2*rayon + dy);

var instabilite = Snap(largeur,hauteur);

var figurebase = instabilite.path('M ' + Bx + ' ' + By + ' A ' +  rayon + ' ' + rayon + ' 0 1 1 ' +  Ax + ' ' + Ay + 'Z');
figurebase.attr('fill','none');
 
t = []; // tableau pour stocker et ainsi nommer chaque disque

 
// création du quart haut gauche
for(let j = 0; j < nbdisque; j++) {
	for(let i = 0; i < nbdisque; i++ ) {
		t.push( 
			figurebase.clone()
			.attr('fill',couleurHasard())
			.transform(  "t" + (i * dx) + "," + (j *dy) + " r " + ((i+j) * angle)  ) 
		);
	}
}

// création du quart haut droit
for(let j = 0; j < nbdisque; j++) {
	for(let i = 0; i < nbdisque; i++ ) {
		t.push( 
			figurebase.clone()
			.attr("fill",couleurHasard())
			.transform("t" + ((i+nbdisque) * dx  ) + "," + (j *dy) + "r" + ((-i+j) * angle + 3*90)  )
		);
	}
}

//création du quart bas gauche
for(let j = 0; j < nbdisque; j++) {
	for(let i = 0; i < nbdisque; i++ ) {
		t.push( 
			figurebase.clone()
			.attr("fill",couleurHasard())
			.transform("t" + (i * dx) + "," + ((j+nbdisque) *dy) + "r" + ((i-j) * angle + 90)  )
		);
	}
}


// création du quart bas droit
for(let j = 0; j < nbdisque; j++) {
	for(let i = 0; i < nbdisque; i++ ) {
		t.push( 
			figurebase.clone()
			.attr("fill",couleurHasard())
			.transform("t" + ((i+nbdisque) * dx) + "," + ((j+nbdisque) *dy) + "r" + ((-i-j) * angle + 2*90)  )
		);
	}
}

// boucle pour animer chaque disque : 
var nombreTours = 10;
var temps = 20 * 1000; // temps en ms
for( let c=0; c<t.length; c++) {
  t[c].animate({ transform: t[c].transform() + 'r ' + (nombreTours*360)}, temps )
}
</script>
</body>
</html>