Un disque coupé
Écrire un code svg permettant d'obtenir une figure de la forme suivante :
Un code possible
Les points A et B de la corde ont ici pour coordonnées A(0;10) et B(0,40).
Le rayon du disque est 20.
Le centre du disque coupé
Dans le code proposé en corrigé à l'exercice précédent, quelles sont les coordonnées du centre du disque ?
Résolution
Les points A et B de la corde ont pour coordonnées A(0;10) et B(0,40).
Le rayon du disque est 20.
Le centre C du disque se trouve nécessairement sur la médiatrice de [AB] (puisqu'il est équidistant de A et B). La médiatrice de [AB] a pour équation \( y = \frac{1}{2}(10+40) \). On a donc \( y_C = 25 \).
On a CA = rayon, soit CA = 20 ou encore \( \sqrt{ (x_A-x_C)^2 + (y_A - y_C)^2} = 20\). Ce qui donne \( x_C^2 + (10 - 25)^2 = 20^2\), soit \( x_C^2 = 400 - 225 \). \[ x_C = \sqrt{175} \]
\( \sqrt{175} \approx 13.2287565553\)
Disques coupés et rotations
Écrire un code svg permettant d'obtenir une figure telle que la suivante :
Aide
Chaque disque subit une rotation autour de son centre. Les coordonnées du centre ont été déterminées à l'exercice précédent.
Un code possible
répétition
On peut insister dans la façon de coder sur le fait que l'angle est toujours le même d'un disque au suivant :
Disques coupés et rotations, bis
Écrire un code svg permettant d'obtenir une figure telle que la suivante :
un code possible
On poursuit ce qui a été commencé à l'exercice précédent.
Comme la corde est à gauche du disque coupé au départ et à droite à la fin de ligne, elle a tourné de 180 degrés. Il y a 13 disques, donc 12 rotations et \( \frac{180}{12} = 15\). Les rotations doivent être de 15 degrés.
Disques coupés et rotations, ter
Écrire un code svg permettant d'obtenir une figure telle que la suivante :
Aide
La ligne 2 commence avec le disque 2 de la ligne 1. On peut donc grouper les 12 derniers disques de la ligne 1 et faire référence à ce groupe. Il suffira de compléter par un disque.
un code possible
Disques coupés et rotations (4)
Écrire un code svg permettant d'obtenir une figure telle que la suivante :
Aide
On peut définir chaque ligne par rapport à la première ligne.
Le code est nécessairement très long et répétitif : c'est l'usage d'un langage de programmation (notamment javascript) qui permettra d'éviter de faire ces répétitions "à la main". Nous verrons cela plus tard.
un code possible
Disques coupés et rotations (5)
Écrire à nouveau un code svg permettant d'obtenir la figure :
Pour réduire le code, nous allons cette fois utiliser la bande suivante :
Essayez de trouver une idée efficace permettant de l'utiliser. Si vous ne trouvez pas, voyez l'aide ci-dessous.
décaler vers la gauche
Une idée possible est de règler la viewBox sur la longueur nécessaire
pour faire apparaître seulement 13 disques consécutifs.
Vous pouvez constater en effet que les séries de 13 disques consécutifs de la bande proposée ci-dessus couvrent toutes les lignes du carré à représenter.
Il suffit donc de faire des copies de cette ligne en la glissant vers la gauche d'une ligne à l'autre :
tout ce qui ne tient pas dans la viewBox disparaîtra et on aura exactement la ligne voulue.
Ci-dessous le code pour les premières lignes. A vous de compléter.
un code possible
Disques coupés et rotations (6)
Écrire à nouveau un code svg permettant d'obtenir la figure :
Cette fois, on demande d'utiliser la notion de clipping (qui est expliquée ci-dessous) ainsi que
l'image suivante :
le clipping
Avec un clipping, on définit une forme qui laissera apparaître tout ce qu'il y a derrière elle et cachera tout le reste.
Dans l'exemple ci-dessous, le clipPath est un cercle. On le "pose" sur une figure : seul ce qu'il y a derrière le cercle apparaîtra.
Le clipping est donc exactement l'idée déjà utilisée dans l'exercice précédent, mais nous voyons ici
que l'idée peut être utilisée, grâce au clipPath de façon plus générale.
un code possible
On cherche d'une ligne à l'autre à déplacer le clip.
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é" :
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.
Le quart haut gauche a déjà été codé (on prendra le code de l'exercice 7), le reste s'en déduit facilement.
Écrire un code svg pour reproduire cette image.
Aide
Il est possible d'imbriquer les balises svg.
On peut donc insérer le code de l'exercice 7 à l'intérieur d'une autre balise svg.
A vous de jouer sur les dimensions et d'observer que l'on obtient chaque quart manquant par une rotation du quart déjà codé autour de son centre.