commit aae419359503f8e2472b97f4d6e020a7e242b408 Author: medina5 Date: Thu Oct 30 13:08:21 2025 +0100 Récupération du cours SVG diff --git a/README.md b/README.md new file mode 100755 index 0000000..eb52ced --- /dev/null +++ b/README.md @@ -0,0 +1,249 @@ +--- +layout: layouts/page.njk +title: SVG +date: Last Modified +--- + +> ***Objectif :*** Concevoir des éléments graphiques redimensionnables sans perte de qualité. Interagir avec les propriétés graphiques. Animer les éléments. +{.objectif} + +## Image matricielle / vectorielle + +L'**image matricielle** ou bitmap est le type d'image la plus utilisée. Elle est constituée d'une grille (matrice) de millions de points de couleur. Chaque point, élément de l'image est appelé pixel (picture element). Il est défini par sa propre couleur indépendamment des autres pixels qui l'entoure. L'image matricielle est utilisée de préférence en photographie car elle rend parfaitement les millers de nuance de couleur. + +Avantages : +- réalisme des images (couleurs, ombres, nuances, dégradés, flous) +- fidelité par rapport à la scène originale +- palette de couleur très étendue +- format par défaut des appareils photos et scanners + +Inconvénients : +- Perte de qualité lors du redimensionnement +- Approximation au pixel près des éléments géométriques +- Poids du fichier constitué de millions d'éléménts (pixels). + +L'**image vectorielle**, quand à elle, est utilisé dans les dessins ou les illustrations. L'image est constituée de courbes, de lignes et de formes géométriques. Le rendu de l'illustration est calculé à chaque affichage par le navigateur. + +Avantages : +- Redimensionnement infini +- Précision des éléments géométriques +- Poids du fichier réduit même pour de grandes surface d'affichage (pour une illustration simple) +- Modification des éléments de l'illustration par programmation (changement de couleur, animation) +- Sous sélection de parties de l'illustration + +Inconvénients : +- Difficulté décrire des scènes complexes, réelles +- Poids du fichier croissant avant le détail de l'image +- Calcul de rendu à chaque affichage + +

image matricielle jpg
photo réaliste
11 ko

+ +

+ +### Mise à l'échelle + +

+ +

+ +## Programmation procédurale / descriptive + +La **programmation procédurale** est une séquence d'appels à des fonctions permettant d'obtenir le résultat attendu. + +L'interface de programmation Canvas (API) ajouté à l'HTML5 permet de dessiner via un programme JavaScript. Le développeur définit précisément, dans le code du programme, chacune des étapes à exécuter par le navigateur pour aboutir au résultat. + +> Programation **procédurale** ou impérative = **Comment** +{.definition} + +```javascript +var ctx = document.getElementById("dessin").getContext("2d"); + +ctx.fillStyle = '#0039a6'; +ctx.fillRect(0, 0, 50, 100); + +ctx.fillStyle = '#d72b1f'; +ctx.fillRect(0, 50, 150, 50); + +ctx.fillStyle = '#fff'; +ctx.beginPath(); +ctx.moveTo(36.8882, 21.1373); +ctx.lineTo(17.6527, 35.1127); +ctx.lineTo(25.0000, 12.5000); +ctx.lineTo(32.3473, 35.1127); +ctx.lineTo(13.1118, 21.1373); +ctx.fill(); +``` +

+ + +La **programmation descriptive** décrit à l'aide de mots clés (balises, attribut, propriétés) le résultat final souhaité. Plutôt que d’énoncer les différentes étapes à mettre en œuvre, un moteur d'interprétation se charge d'appeler automatiquement les fonctions nécessaires à la composition de l'image. +La programmation déclarative se concentre directement sur l’objectif à atteindre. + +> Programation **déclarative** ou descriptive = **Quoi** +{.definition} + +```svg + +``` + + + +## SVG : Scalable Vector Graphics + +Les fichiers svg Scalable Vector Graphics (en français « graphique vectoriel adaptable ») sont des fichiers texte formaté en xml. Ils sont valides et bien formés. Nous pouvons utiliser un éditeur de texte pour créer des illustrations. + + +1- Installer l'extension SVG de *jock* pour Visual Studio Code. + +2- Créer un document SVG (xml). Puis cliquer sur l'icône de prévisualition en haut à droite. + +```svg + + +``` + +3- Tracer un cercle de rayon 30 pixels dont le centre est situé à x = 150px et y = 75px. Remplir ce cercle avec la couleur orange + +```svg + +``` + +Notez que comme pour tout document **xml valide**, les balises doivent être fermées ou auto fermées par une barre finale `/>` + +4- Ajouter une ligne depuis dont les extrémités 1 et 2 sont situées aux coordonnées 150/45 et 150/20. Cette ligne a une épaisseur de 6 px, elle est de couleur orange et les extrémités sont arrondies. + +```svg + +``` + +5- Dupliquer cetee ligne et appliquer une transformation pour effecuer une rotation de 45° en prenant comme centre de rotation, le centre du cercle (150/75) + +```svg + +``` +6- Recommencez l'opération et ajouter des lignes tout les 45° autour du cercle + +7- Créer un groupe d'éléments `g` et placez y toutes les lignes + +```svg + +... + +``` + + +8- Ajouter une animation de transformation à l'intérieur du groupe. La transformation éffecue une rotation de 360° en 8 secondes de manière linéaire. La rotation a pour origine le centre du cercle (150/75). + +```css + +``` + + + + +Et voilà votre première animation SVG. +Maintenant regardons plus en détail les [éléments](formes) SVG diff --git a/animation/coeur.svg b/animation/coeur.svg new file mode 100755 index 0000000..0359782 --- /dev/null +++ b/animation/coeur.svg @@ -0,0 +1,76 @@ + + diff --git a/animation/index.md b/animation/index.md new file mode 100755 index 0000000..c30c6f6 --- /dev/null +++ b/animation/index.md @@ -0,0 +1,174 @@ +--- +layout: layouts/page.njk +title: Animation +date: Last Modified +--- + +Il exite plusieurs méthodes pour animer des éléments SVG. + +### Javascript +Il est possible d'agir avec du javascript sur les propriétés des éléments. Il est nécessaire d'utiliser des librairies tierces pour faciliter la programmation des animations (Comme JQuery par exemple). Cette méthode n'est pas la plus simple, ni la plus rapide à mettre en oeuvre. + +### CSS +Les animations en CSS ont l'avantage de pouvoir être utilisées sur n'importe quel élement d'une page html. C'est la méthode la plus utilisée car elle est versatile et elle est la seule à pouvoir être utilisée sur des éléments aussi bien html que SVG. + +### SMIL + +Le SMIL (Synchronized Multimedia Integration Language) est un langage de description au format xml Il définit des balises pour synchroniser, animer, mettre en page et établir des transitions sur des éléments multimédias tels que du texte, des images, de la vidéo, de l'audio. Le SMIL était le format d'échange des messages multimédias MMS (Multimedia Messaging Service) qui est un équivalent vidéo et image du service de message court (SMS : Short Message Service). + +Le langage SMIL n'est plus guère utilisé de manière autonome, il a été intégré au format SVG. + +Pourtant très simple il n'est pas aussi utilisée que les animations CSS, pourtant certaines animation ne peuvent s'effectuer qu'avec SMIL. + + +## Animation d'attribut + +la balise animate prend plusieurs paramètres pour effectuer l'opération + +`attributeName` : l'attribut pris en compte\ +`from` : valeur de départ\ +`to` : valeur d'arrivée\ +`values`: la liste des valeurs successives de la propriété à animer, si il ya plus de 2 valeurs et que les balises `from` et `to` sont insuffisantes + +### minutage +`begin` : début de l'animation\ +`end` : fin de l'animation\ +`dur` : durée de l'animation\ +`min` : durée minimale (dans le cas où la durée de l'animation est calculée à partir d'autres éléments)\ +`max` : durée maximale\ +`restart` : indique quand l'animation peut être rejouée : `always` (toujours), `whenNotActive` (quand la forme n'est pas en cours d'une autre animation) ou `never` (jamais)\ +`repeatCount` : Le nombre de fois que l'animation doit se répéter ou `indefinite` pour une animation infinie\ +`repeatDur` : la durée totale en comptant toutes les répétitions\ +`fill` : état final de l'animation : `freeze` garde l'animation dans son état finale ou `remove` retourne à l'état initial. + +### +`calcMode` : `discrete`, `linear`, `paced` ou `spline` défini comment sont calculés les points intermédiare de l'animation, l'accélération de celle-ci + + + +### interaction + + + + +```svg + + + +``` + +La balise animate est incluse dans la balise de la forme à animer. + + +## Animation de forme (Morphing) + +L'animation de forme n'est qu'une simple animation d'attribut. Seulement dans ce cas la propriété qui est animée est la propriété `d` d'une balise `path`. + +Il est important que tous les chemins de l'animation possède le même nombre de poins, sinon l'animation ne peut pas être calculée. + +Dessiner un chemin à l'aide de la balise path, dessiner un 2e chemin avec un nombre de point identique, puis un troisième, quatrième .... + +```svg + +``` + +```svg + +``` + + + +## Animation de déplacement + +L'animation de déplacement permet de déplacer une forme suivant un chemin + +```svg + +``` + +Dans le cas d'un chemin deja existant + +```svg + + + +``` + +## Animation de transformation + + + + + +https://la-cascade.io/guide-des-animations-svg/ + +https://css-tricks.com/guide-svg-animations-smil/ + +SMIL +: Synchronized Multimedia Integration Language + +MMS +: Multimedia Messaging Service diff --git a/animation/motion/bee - Copy.svg b/animation/motion/bee - Copy.svg new file mode 100755 index 0000000..4981ab2 --- /dev/null +++ b/animation/motion/bee - Copy.svg @@ -0,0 +1,39 @@ + diff --git a/animation/motion/bee.svg b/animation/motion/bee.svg new file mode 100755 index 0000000..1e61904 --- /dev/null +++ b/animation/motion/bee.svg @@ -0,0 +1,37 @@ + diff --git a/bibliotheque/index.md b/bibliotheque/index.md new file mode 100755 index 0000000..c1d4e07 --- /dev/null +++ b/bibliotheque/index.md @@ -0,0 +1,127 @@ +--- +layout: layouts/page.njk +title: Bibliothèque +date: Last Modified +--- + +## Réutilisation des éléments + +Chaque objet référencé avec un identifiant `id` peut être dupliquer et réutiliser n'importe où dans le document à l'aide de la balise ``. + + + +```svg + +``` + +Cete méthode n'est pas une bonne pratique car le code est difficilement lisibile et maintenable. + +## Bibliothèque d'éléments + +À la place, nous pouvons stoker les éléments réutilisables dans une bibliothèque avec la balise ``. Les éléments ne sont alors plus affichés directement. + +Lorsque l'on utilise le SVG en mode inline incorporé directement dans la page HTML, les éléments de la bibliothèque peuvent être utilisés dans le canvas ou dans un autre élément SVG de la même page. + +```svg + + +... + + +``` + + + + + +La bibliothèque permet des stocker des formes mais aussi des dégradés, des motifs, des masques, des marqueurs etc. + +### Symboles + +L'élément `symbol` permet de définir une nouvelle zone de dessin indépendante et qui sera utilisée comme modèle (template). + + + + + +```svg + +``` + +## gradientUnits + +`userSpaceOnUse` le dégradé s'étend sur toute la surface de l'illustration. La couleur à l'intérieur des objets dépend de leur position + + + +`objectBoundingBox` le dégradé s'etend dans les limites de l'objet + + + +## Motifs + +Pour le remplissage en plus de la couleur il est possible d'utliser un motif qui servira à remplir la forme + + + +```svg + + + + +``` \ No newline at end of file diff --git a/découpe/index.md b/découpe/index.md new file mode 100755 index 0000000..eb885e3 --- /dev/null +++ b/découpe/index.md @@ -0,0 +1,111 @@ +--- +layout: layouts/page.njk +title: Découpe et masquage +--- + +## Découpage + +Le découpage (clipping) agit comme un pochoir. les éléments sont découpés par les bords de la forme. + +L'élement clipPath est défini à l'intérieur d'une zone de définition. Il contient le tracé personalisé de ce qui va servir à découper. + +```svg + + + + + +``` +Pour découper une illustration il faut faire référence à la définition du clipPath + +```svg + +``` + +## Découpages simples + +Lorsque le découpage est une forme simple il est possible d'utiliser des raccourcis. + +### Rectangle intérieur + +`inset` défini les marges enhaut à droite, en bas et à gauche d'un rectangle. Les marges sont exprimés en px ou en pourcentage. + +```svg + +``` + + + + +### Cercle + +```svg + +``` + + + +### Ellipse + +```svg + +``` + + + +### Polygone + +```svg + +``` + + + +### Chemin + +```svg + +``` + + + +[https://bennettfeely.com/clippy/](https://bennettfeely.com/clippy/) + +## Masquage + +Le masquage permet des effets plus fins. Les élements apparaissent progressivement en transparence suivant l'intensité de noir ou blanc de la forme. + +L'intérêt du masquage est d'utiliser des dégradés. + +```svg + + + + + + + + + +``` + +Comme le découpage il faut faire référnce à la définition du masque + +```svg + +``` diff --git a/découpe/panda.webp b/découpe/panda.webp new file mode 100755 index 0000000..fe1d762 Binary files /dev/null and b/découpe/panda.webp differ diff --git a/examen/chemical.svg b/examen/chemical.svg new file mode 100755 index 0000000..9de783a --- /dev/null +++ b/examen/chemical.svg @@ -0,0 +1,19 @@ + + diff --git a/examen/co2.svg b/examen/co2.svg new file mode 100755 index 0000000..e15b777 --- /dev/null +++ b/examen/co2.svg @@ -0,0 +1,4 @@ + + diff --git a/examen/dust.svg b/examen/dust.svg new file mode 100755 index 0000000..f1fe366 --- /dev/null +++ b/examen/dust.svg @@ -0,0 +1,86 @@ + + diff --git a/examen/humidity.svg b/examen/humidity.svg new file mode 100755 index 0000000..a29d89f --- /dev/null +++ b/examen/humidity.svg @@ -0,0 +1,6 @@ + + diff --git a/examen/index.md b/examen/index.md new file mode 100755 index 0000000..88c31cd --- /dev/null +++ b/examen/index.md @@ -0,0 +1,48 @@ +--- +layout: layouts/page.njk +title: Évaluation 1 +--- + +> Concevoir une interface pour une centrale de mesure d'ambiance. +{.objectif} + +![](panneau.png) + +### Ressources + +- polluants chimiques +- co2 +- poussière et allergènes uv +- taux d'humidité +- niveau sonore +- temperature +- exposition uv + +### Énoncé + +1. Le panneau de contrôle est un **rectangle** de 300px de large est de 600px de haut. Les coins du panneau sont arrondis suivant un rayon de 10px. + +2. Le remplissage du panneau est effectué par un **dégradé** qui commence à 10% en couleur hsl 25 / 100% / 50% ; à 50% la couleur est hsl 0 / 95% / 45% ; à 90% la couleur hsl est 0 / 100% / 35% + +La direction du dégradé est en diagonal du coin en haut à droite au coin en bas à gauche + +3. Un **titre** centré au milieu du panneau écrit en majuscule à 30px du haut. La police est de l'Arial de taille 20px. Le texte est écit en blanc. Un filtre ombre portée est ajoutée au texte. Les paramètres de l'ombre portée sont un déplacement en x et en y de 1px, l'opacité est de 30% et la déviation standard de 1px. + +4. Une **ligne arrondie** en bas du panneau part de x 0 / y 470 et rejoint l'autre côté en x 300 / y 470 le point d'inflexion de la courbe quadratique est situé au milieu du panneau et 50px plus haut que les côtés. L'épaisseur du contour est de 3px, la couleur est blanche. + +5. Ajouter **2 icones** (humidité et co2) dans une bibliothèque de définition + +6. Ajouter un **cercle** centré en dans le panneau et situé à 180px du haut. Le cercle a un rayon de 90px et une épaisseur de 20px. La couleur de remplissage est blanc aavec une opacité de 50% + +Un deuxieme **cercle partiel** recouvre le premier cercle sont opacité est de 100%. L' origine est situé à -135°, la longeur de l'arc est de 150° + +Pour vous aider voici un tutoriel qui offre une solution approchante [https://css-tricks.com/building-progress-ring-quickly/](https://css-tricks.com/building-progress-ring-quickly/) + +7. Ajouter un **texte** dans le cerle de taille 60px + +8. Ajouter **deux petits cercle** en bas de page de rayon 30px, l'épaisseur du contour est de 7px l'opacité de 50% ajouter un **symbole** de la bibliotèque à l'intérieur des cercles. La taille du symbole est de 30px / 30px. Les cercles sont situés à 75px du bas du panneau + +9. Ajouter un **graphique** en barre pour chaque jour de la semaien (7 barres). Les barres sont aligné à 390 px du haut du panneau. Les barres ont une largeur de 15px elles sont espacées de 24 px et la première commence à 25.5px du bord gauche. Les hauteurs sont variables comprise en 35px et 60px; + +10. Ajouter dans chaque barre **l'initiale du jour** de la semaine (L M M J V S D) centré au milieu de la barre. La taille du texte est de 8px. + diff --git a/examen/panneau.png b/examen/panneau.png new file mode 100755 index 0000000..ce79eb0 Binary files /dev/null and b/examen/panneau.png differ diff --git a/examen/reponse.svg b/examen/reponse.svg new file mode 100755 index 0000000..87318cd --- /dev/null +++ b/examen/reponse.svg @@ -0,0 +1,84 @@ + + diff --git a/examen/sound.svg b/examen/sound.svg new file mode 100755 index 0000000..941b155 --- /dev/null +++ b/examen/sound.svg @@ -0,0 +1,4 @@ + + diff --git a/examen/temperature.svg b/examen/temperature.svg new file mode 100755 index 0000000..82b6f03 --- /dev/null +++ b/examen/temperature.svg @@ -0,0 +1,5 @@ + + diff --git a/examen/uv.svg b/examen/uv.svg new file mode 100755 index 0000000..6e81c57 --- /dev/null +++ b/examen/uv.svg @@ -0,0 +1,6 @@ + + diff --git a/examen2/avion.svg b/examen2/avion.svg new file mode 100755 index 0000000..85060fb --- /dev/null +++ b/examen2/avion.svg @@ -0,0 +1,41 @@ + + diff --git a/examen2/index.md b/examen2/index.md new file mode 100755 index 0000000..dc6d93a --- /dev/null +++ b/examen2/index.md @@ -0,0 +1,30 @@ +--- +layout: layouts/page.njk +title: Évaluation 2 +--- + +Un opérateur régional d'aviation vous demande de concevoir un système de réservation pour ses appareils. + +Vous avez à votre disposition : +- L'illustration de l'avion vide +- L'illustration d'un siège + +## Travail à faire + +1. Incorporer l'illustration de l'avion dans une page html. +2. Ajouter le siège comme un symbole réutilisable de l'illustration. +3. Modifier le symbole pour qu'il puisse être colorier avec 3 couleurs, une pour le contour, une pour l'assise (rect) et une pour le dossier (path) + +4. Créer 3 classes css pour représenter les 3 états des sièges : libre, +réservé et occupé. Utiliser un générateur de nuances comme [material.io](https://material.io/resources/color/) + +5. Ajouter une zone située à (200px, 280px) qui correspond à la cabine. + +6. Ajouter dans la page html un champ de saisie qui permet de choisir un nombre de rangées entre 2 et 10. Ajouter un bouton "appliquer" pour ajouter, avec un script, le nombre sélectionné de rangées de sièges. +Les rangées sont espacées de 40px verticalement, les sièges ont le statut libre. Les sièges d'une rangées sont placés horizontalement à 0, 28, 87 et 115. + +7. Lorsque l'on clique sur un siège celui ci passe de l'état libre à réservé puis à occupé. Vérifier que les couleurs changent bien en fonction de son état. + +Références : +- https://www.seatguru.com/airlines/Air_Canada/Air_Canada_Dash_81.php +- https://www.chronoaviation.com/flotte/dash-8-100 \ No newline at end of file diff --git a/examen2/plane.html b/examen2/plane.html new file mode 100755 index 0000000..fd8fdc1 --- /dev/null +++ b/examen2/plane.html @@ -0,0 +1,101 @@ + + + + + + + Document + + + + +

+ +

+ + + diff --git a/examen2/reponse.md b/examen2/reponse.md new file mode 100755 index 0000000..6bd9516 --- /dev/null +++ b/examen2/reponse.md @@ -0,0 +1,70 @@ +--- +layout: layouts/page.njk +title: Évaluation 2 +--- + +Le symbole, utilisation de **currentColor** pour gérer la deuxième couleur de remplissage. + +```svg + + + + +``` + +Les classes + +```css +.occupe { fill:#ba6b6c; color: #ef9a9a; stroke:#ececec } +.reserve { fill:#5d99c6; color: #90caf9; stroke:#ececec } +.libre { fill:#75a478; color: #a5d6a7; stroke:#ececec } +``` + +```svg + + +``` + +Le champ de saisie et le bouton + +```html + + +``` + +Effacer les éléments de la cabine avec un nouveau remplissage + +```javascript +let cabine = document.getElementById("cabine"); + while (cabine.lastChild) + cabine.removeChild(cabine.lastChild); +``` + +Ajouter les sièges en rangées et en colonnes + +```javascript +const colonnes = [0, 28, 87, 115]; +let rangees = document.getElementById("rangees").value; + +for (let i = 0 ; i < rangees; i++) +{ + for (let col = 0 ; col < colonnes.length; col++) + { + let siege = document.createElementNS("http://www.w3.org/2000/svg", "use"); + siege.setAttribute("href", "#siege"); + siege.setAttribute("y", i * 40); + siege.setAttribute("x", colonnes[col]); + siege.setAttribute("class", "libre"); + siege.addEventListener("click", (evt) => { + let siege = evt.currentTarget; + if (siege.classList.contains("libre")) + siege.setAttribute("class", "reserve"); + else if (siege.classList.contains("reserve")) + siege.setAttribute("class", "occupe"); + }) + cabine.appendChild(siege); + } + } +} +``` \ No newline at end of file diff --git a/examen2/siege.svg b/examen2/siege.svg new file mode 100755 index 0000000..84659cc --- /dev/null +++ b/examen2/siege.svg @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/examen2/solution.html b/examen2/solution.html new file mode 100755 index 0000000..e69de29 diff --git a/examen2/svgo.config.js b/examen2/svgo.config.js new file mode 100755 index 0000000..1f64dca --- /dev/null +++ b/examen2/svgo.config.js @@ -0,0 +1,12 @@ +module.exports = { + multipass: true, // boolean. false by default + collapseGroups: true, // collapse useless groups + cleanupIDs: true, // remove unused and minify used IDs + convertTransform: true, // collapse multiple transforms into one, convert matrices to the short aliases, and much more + convertStyleToAttrs: true, // convert styles into attributes + convertColors: false, + js2svg: { + indent: 2, // string with spaces or number of spaces. 4 by default + pretty: true, // boolean, false by default + }, + }; \ No newline at end of file diff --git a/examen3/avion.svg b/examen3/avion.svg new file mode 100755 index 0000000..4b5d3ba --- /dev/null +++ b/examen3/avion.svg @@ -0,0 +1,6 @@ + + \ No newline at end of file diff --git a/examen3/europe-2.svg b/examen3/europe-2.svg new file mode 100755 index 0000000..ed89009 --- /dev/null +++ b/examen3/europe-2.svg @@ -0,0 +1,131 @@ + + diff --git a/examen3/europe.svg b/examen3/europe.svg new file mode 100755 index 0000000..239444d --- /dev/null +++ b/examen3/europe.svg @@ -0,0 +1,140 @@ + + diff --git a/examen3/examen3.png b/examen3/examen3.png new file mode 100755 index 0000000..eca5fac Binary files /dev/null and b/examen3/examen3.png differ diff --git a/examen3/index.md b/examen3/index.md new file mode 100755 index 0000000..af15d7c --- /dev/null +++ b/examen3/index.md @@ -0,0 +1,24 @@ +--- +layout: layouts/page.njk +title: SVG - Évaluation 3 +--- + +On vous demande de simuler la trajectoire d'un avion sur une carte. + +Concevoir une page html et insérer la carte de l'Europe. + +L'opérateur ne veut pas voir toute la carte mais afficher uniquement une zone de 445px/380px à partir du point 155px/215px + +Ajouter un symbole avion dans le fichier SVG. + +Placer le symbole de l'avion à l'origine de l'illustration. Sa taille dans l'illustration est de 10px/10px. Faire une rotation et une translation pour aligner le nez de l'avion avec l'axe des x (abscises). + +Ajouter un chemin sur la carte, le chemin aura une épaisseur de 2px et sera en pointillé de 5px. + +Attacher un événement sur le clic des cercles. Lors du clic sur le premier cercle définir le départ du chemin. Lors des clics suivants ajouter un segment de droite au chemin. + +Ajouter une animation de parcours sur le symbole de l'avion. Prendre comme référence de chemin la trajectoire dessinée précédemment. Effectuer une rotation automatique du symbole le long de la trajectoire. Ne pas redémarrer l'animation tant qu'elle est en cours. + +Calculer la distance entre 2 clics successifs sur les cercles. Calculer la distance euclidienne entre ces points. Calculer la durée de l'animation pour que la vitesse soit constante et de 20 px/seconde. + +![](examen3.png) diff --git a/examen3/reponse3.html b/examen3/reponse3.html new file mode 100755 index 0000000..a8f9252 --- /dev/null +++ b/examen3/reponse3.html @@ -0,0 +1,203 @@ + + + + + + SVG - Évaluation 3 - Solution + + + + + + \ No newline at end of file diff --git a/examen3/solution3.md b/examen3/solution3.md new file mode 100755 index 0000000..3c07809 --- /dev/null +++ b/examen3/solution3.md @@ -0,0 +1,118 @@ +--- +layout: layouts/page.njk +title: Solution de l'évaluation SVG n° 3 +--- + +Ajouter le svg de la carte de l'Europe dans la page. Ajouter une propriété `viewbox` pour [recadrer](../../zone/) la carte. + +```svg + + + + + Document + + + + + + + + \ No newline at end of file diff --git a/exercices/atelier/demo.svg b/exercices/atelier/demo.svg new file mode 100755 index 0000000..d576b8d --- /dev/null +++ b/exercices/atelier/demo.svg @@ -0,0 +1,366 @@ + \ No newline at end of file diff --git a/exercices/atelier/demo/machine-1-o.svg b/exercices/atelier/demo/machine-1-o.svg new file mode 100755 index 0000000..0b2eb77 --- /dev/null +++ b/exercices/atelier/demo/machine-1-o.svg @@ -0,0 +1,156 @@ + diff --git a/exercices/atelier/demo/machine-1.svg b/exercices/atelier/demo/machine-1.svg new file mode 100755 index 0000000..0b4c242 --- /dev/null +++ b/exercices/atelier/demo/machine-1.svg @@ -0,0 +1,1111 @@ + + + diff --git a/exercices/atelier/demo/machine-2-o.svg b/exercices/atelier/demo/machine-2-o.svg new file mode 100755 index 0000000..3d13378 --- /dev/null +++ b/exercices/atelier/demo/machine-2-o.svg @@ -0,0 +1,51 @@ + diff --git a/exercices/atelier/demo/machine-2.svg b/exercices/atelier/demo/machine-2.svg new file mode 100755 index 0000000..c40b762 --- /dev/null +++ b/exercices/atelier/demo/machine-2.svg @@ -0,0 +1,333 @@ + + + + diff --git a/exercices/atelier/demo/machine-3-o.svg b/exercices/atelier/demo/machine-3-o.svg new file mode 100755 index 0000000..48f18d6 --- /dev/null +++ b/exercices/atelier/demo/machine-3-o.svg @@ -0,0 +1,42 @@ + diff --git a/exercices/atelier/demo/machine-3.svg b/exercices/atelier/demo/machine-3.svg new file mode 100755 index 0000000..5766e63 --- /dev/null +++ b/exercices/atelier/demo/machine-3.svg @@ -0,0 +1,257 @@ + + + + diff --git a/exercices/atelier/demo/machine-4-o.svg b/exercices/atelier/demo/machine-4-o.svg new file mode 100755 index 0000000..3264b60 --- /dev/null +++ b/exercices/atelier/demo/machine-4-o.svg @@ -0,0 +1,51 @@ + diff --git a/exercices/atelier/demo/machine-4.svg b/exercices/atelier/demo/machine-4.svg new file mode 100755 index 0000000..32d52ea --- /dev/null +++ b/exercices/atelier/demo/machine-4.svg @@ -0,0 +1,322 @@ + + + + diff --git a/exercices/atelier/demo/machine-5-o.svg b/exercices/atelier/demo/machine-5-o.svg new file mode 100755 index 0000000..0e6b3ae --- /dev/null +++ b/exercices/atelier/demo/machine-5-o.svg @@ -0,0 +1,168 @@ + diff --git a/exercices/atelier/demo/machine-5.svg b/exercices/atelier/demo/machine-5.svg new file mode 100755 index 0000000..b82bc61 --- /dev/null +++ b/exercices/atelier/demo/machine-5.svg @@ -0,0 +1,1037 @@ + + + + diff --git a/exercices/atelier/demo/machine-6-o.svg b/exercices/atelier/demo/machine-6-o.svg new file mode 100755 index 0000000..2f0db97 --- /dev/null +++ b/exercices/atelier/demo/machine-6-o.svg @@ -0,0 +1,146 @@ + diff --git a/exercices/atelier/demo/machine-6.svg b/exercices/atelier/demo/machine-6.svg new file mode 100755 index 0000000..fcf5765 --- /dev/null +++ b/exercices/atelier/demo/machine-6.svg @@ -0,0 +1,897 @@ + + + + diff --git a/exercices/atelier/demo/machine-7-o.svg b/exercices/atelier/demo/machine-7-o.svg new file mode 100755 index 0000000..ec4113f --- /dev/null +++ b/exercices/atelier/demo/machine-7-o.svg @@ -0,0 +1,38 @@ + diff --git a/exercices/atelier/demo/machine-7.svg b/exercices/atelier/demo/machine-7.svg new file mode 100755 index 0000000..9ff78af --- /dev/null +++ b/exercices/atelier/demo/machine-7.svg @@ -0,0 +1,207 @@ + + + + diff --git a/exercices/atelier/index.md b/exercices/atelier/index.md new file mode 100755 index 0000000..0479409 --- /dev/null +++ b/exercices/atelier/index.md @@ -0,0 +1,98 @@ +--- +layout: layouts/page.njk +title: Atelier +--- + +La société [Ewattch](https://ewattch.com/logiciels/#easyvision) de Saint Dié implémente des solutions iot de suivi de consommation électrique de machine industrielles. + +Un des module consiste à modéliser un atelier en 3D isométrique. + +Reproduire ce module + +![](atelier.png) + +Vous disposez des illustrations svg des machines. + +#|machine|largeur|hauteur|échelle|origine x|origine y +--:|---|--:|--:|--:|--:|--:| +1|inspection|66.860|69.700|1.7|14.20|69.700 +2|cn|63.140|82.689|1.2|17.79|82.689 +3|perceuse|40.580|79.180|1.6|13.99|79.180 +4|tour|89.020|94.630|1.2|17.78|94.630 +5|foreuse|63.250|97.190|1.35|14.25|97.190 +6|robot|78.780|85.510|1.6|29.76|85.510 +7|fraiseuse|80.130|98.880|1.33|15.44|98.880 + + +### Optimiser les fichiers SVG + +Installer le composant nodejs [svgo](https://github.com/svg/svgo). +Optimiser les illustrations des machines. + +Attention : Il faudra peut être ajouter à la variable d'environnement PATH le dossier d'installation de svgo qui se trouve par défaut dans `C:\Users\VotreCompte\AppData\Roaming\npm` + +### Dessiner la gille + +Dessiner un carré de 400px de côté, remplir avec un motif `pattern` de dessiner une grille avec un pas de 25px. + +Appliquer une transformation isométrique à la grille. + +### Choix de la machine + +Ajouter un champ de sélection select pour choisir la machine + +Lorsque l'on clique sur la grille la machine sélectionnée est téléchargée, ajouter à l'illustration svg et positionnée sur la grille + +Attention le téléchargement d'éléments extérieurs à la page html ne peut s'effectuer que si la page est hébergée sur un serveur web. + +Installer le serveur web de développement Live Server dans Visual Studio. Cliquer sur le menu `Go Live` à gauche de la barre de statut de VS Code pour démarrer le serveur. + +### Fonctions Javascript + +Pour vous aider dans le développement, voici quelques fonctions javascript utiles. + + +Transformer des coordonnées du plan de l'écrans en coordonnées isométriques. La valeur 360 correspond à un déplacement arbitraire pour centrer la grille dans l'écran. + +```javascript +function planToIsometric(x , y) { + x = x - 360 / zoom; + y = y; + + let X = x * Math.cos(angle) - y * Math.sin(angle); + let Y = x * Math.sin(angle) + y * Math.cos(angle); + + x = X + Y * Math.tan(Math.PI / 6); + y = Y / Math.cos(angle); + + return { x, y }; +} +``` + +Transformer des coordonnées isométriques en coordonnées du plan + +```javascript +function isometricToPlan(h , v) { + let Y = v * 0.86603; + let X = h - Y * Math.tan(Math.PI / 6); + + let x = (X + Y * Math.tan(angle)) * Math.cos(angle); + let y = (Y - x * Math.sin(angle)) / Math.cos(angle); + + x = x + 360; + + return { x, y }; +} +``` + + +Convertir du texte (récupéré avec une fonction fetch) en objet xml et extraire l'élément SVG. + +```javascript +const xml = new window.DOMParser().parseFromString(str, "image/svg+xml"); +const svg = xml.children[0]; +``` + +Fixer les attributs width et height en fonction des machines et ajuster au facteur d'échelle. + +Décaler l'origine de la machine en fonction de la machine diff --git a/exercices/atelier/reponse.md b/exercices/atelier/reponse.md new file mode 100755 index 0000000..9e4d482 --- /dev/null +++ b/exercices/atelier/reponse.md @@ -0,0 +1,198 @@ +--- +layout: layouts/page.njk +title: Atelier +--- + + +Optimisation des fichiers SVG + +``` +svgo machine-1.svg -o machine-1-o.svg +``` + +Si vous n'arrivez pas à utiliser la commande svg vous pouvez utiliser le module Visual Studio Code `svgo` + + +Du fait de la projection isométrique le viewbox de l'illustration doit être plus grand que la grille. + +```svg + + + + Document + + + +

Taux d'incidence par région

+ + + + + + + diff --git a/exercices/cuve/cuve.png b/exercices/cuve/cuve.png new file mode 100755 index 0000000..90754ca Binary files /dev/null and b/exercices/cuve/cuve.png differ diff --git a/exercices/cuve/index.md b/exercices/cuve/index.md new file mode 100755 index 0000000..41cf7c4 --- /dev/null +++ b/exercices/cuve/index.md @@ -0,0 +1,14 @@ +--- +layout: layouts/page.njk +title: Interaction en javascript +--- + +Reproduire le schéma suivant. + +Allumer le feu rouge lorsqu'une cuve est vide + +Allumer le feu vert lorsqu'au moins un robinet est ouvert. + +![](cuve.png) + +Voir la [réponse](reponse) \ No newline at end of file diff --git a/exercices/cuve/reponse/index.md b/exercices/cuve/reponse/index.md new file mode 100755 index 0000000..803a622 --- /dev/null +++ b/exercices/cuve/reponse/index.md @@ -0,0 +1,320 @@ +--- +layout: layouts/page.njk +title: Interaction en javascript - Solution +--- + +### Etats + +Pour commencer nous allons stocker dans un tableau javascript les états des cuves + +Chaque cuve possède 3 propriétés : son nom pour l'identifier, l'état du robinet (ouvert ou fermé) et enfin le niveau dans la cuve de 1 à 0. + +```javascript +const etats = [ + { nom: "rouge", robinet: false, niveau: 1 }, + { nom: "vert", robinet: false, niveau: 1 }, + { nom: "bleu", robinet: false, niveau: 1 }, + +]; +``` + +### Robinets + +Ajouter un symbole pour le robinet dans la partie définition du svg + +```svg + + + + +``` + +Le robinet est centré sur 0,0 et est placé dans un groupe pour son placement dans l'illustration. Cela permet de s'affranchir de l'origine de la tranformation + +```svg + + + + + + + + + +``` + +Code javascript pour faire tourner le robinet + +1. Sélection tous les éléments qui utilise un robinet `document.querySelectorAll("use[href='#robinet']")` +2. Pour chaque élement faire `.forEach((robinet) =>` +3. Ajouter une fonction à l'événement au clic de souris `robinet.addEventListener("click", function (event) {` +4. Lors du clic +5. Chercher dans le tableau des états à quel cuve correspond le robinet. La propriété `data-nom`du robinet permet d'identifier la ligne d'état. `let cuve = etats.find((elt) => elt.nom == event.currentTarget.dataset["nom"]);` +propriété data-nom de l'élement à l'origine de l'événement `event.currentTarget.dataset["nom"]` +6. Une fois identifié inversé l'état du robinet. Passer d'ouvert à fermé ou de fermé à ouvert. `cuve.robinet = !cuve.robinet;` +7. Appliquer une rotation de 90° `event.currentTarget.style.transform="rotate(90deg)"` ou l'annuler `null` suivant l'état du robinet. + +```javascript +document.querySelectorAll("use[href='#robinet']").forEach((robinet) => + robinet.addEventListener("click", function (event) { + let cuve = etats.find((elt) => elt.nom == event.currentTarget.dataset["nom"]); + cuve.robinet = !cuve.robinet; + event.currentTarget.style.transform = cuve.robinet ? "rotate(90deg)" : null; + }) + ); +``` + +### Cuves + +Ajouter un symbole pour la cuve + +```svg + + + + + + + + + + + + +``` + +Les éléments personnalisables de la cuve sont controlé par des variables css. + +**--hauteur** = hauteur totale de la cuve\n +**--niveau** = niveau à l'intérieur de la cuve + +Pour l'ellipse représentant le niveau, l'ordonnée du centre est contrôlé par le style cy. La multiplication par 1px permet de donner l'unité à la valeur sinon elle est ignorée. + +```css +cy: calc(var(--hauteur) * 1px) +``` + +Les 2 lignes de chaque côté sont agrandies par un effet d'échelle scaleY. Pour une hauteur de 100 scaleY = 1, pour 200 scaleY = 2 (sans unité). + +vector-effect="non-scaling-stroke" permet de ne pas agrandir l'épaisseur du contour lors de l'agrandissement. + +```svg + +``` + +La hauteur du rectangle de remplissage est controlé aussi avec une variable css. Attention dans une illustration svg l'origine est en haut donc en diminuant la hauteur du rectangle il va se réduire vers le haut. Il faut donc aussi bouger l'origine pour que celle ci soit toujours en bas de la cuve. +Une autre solution consisterais à appliquer une transformation de symétrie verticale pour inverser le sens de la réduction. + +pour faire une opération à plusieurs termes en css il est nécessaire d'utiliser plusieurs fonctions calc imbriquées. + +hauteur du remplissage = 200 ; niveau = 0.4 ; hauteur du rectangle = 0.4 * 200 = 80. La multiplication par 1px permet de donner l'unité à la valeur sinon elle est ignorée. + +origine du remplissage = 200 * 1px * ( 1 - 0.4) = 120px + +```svg +style="height: calc(calc(var(--niveau) * var(--hauteur)) * 1px); + y: calc(calc(var(--hauteur) * 1px) * calc(1 - var(--niveau)));" x="1" +``` + +La couleur de l'ellipse du dessous à sa luminosité qui est baissée à 75% pour un effet d'assobrissement. + +``` +filter="brightness(75%)" +``` + +Le remplissage a une opacité de 0.6 pour un effet de transparence + +``` +fill-opacity="0.6" +``` + +```svg + + + + +``` + +## Javascript + +## fonction principale + +Déclarer une fonction qui devra gérer le changement de niveau `function remplir() {` +1. Filtrer les états pour sélectionner ceux dont le robinet est ouvert et la cuve non vide `.filter((cuve) => cuve.robinet == true && cuve.niveau > 0)` +2. Pour chaque cuve (dont le robinet est ouvert) `.forEach((cuve) => {` +3. Faire baisser le niveau de la cuve en question `cuve.niveau -= 0.005;` +4. Augmenter le niveau dans la cuve de destination `destination[cuve.nom] += 0.005;` +5. Mettre à jour le niveau de la cuve en agissant sur la variable css `document.querySelector('.cuve[data-nom='${cuve.nom}']').style.setProperty('--niveau', cuve.niveau);`. Attention à l'interpolation de la chaine, il faut utiliser les back quote (Alt Gr 7) +6. Calculer le niveau dans la cuve de destination `destination.niveau = (destination.rouge + destination.vert + destination.bleu) / 3;` +7. Mettre à jour le niveau de la cuve de destination en agissant sur la variable css `document.querySelector('.cuve[data-nom='destination']').style.setProperty('--niveau', destination.niveau);` +8. Calculer la couleur de destination. Il faut se rapporter à la couleur la plus présente et calculer la proportion des 2 autres en fonction. `destination.total = Math.max(destination.rouge, destination.vert, destination.bleu);` puis +`destination.couleur = 'rgb( ${(destination.rouge / destination.total) * 255} ${(destination.vert / destination.total) * 255} ${(destination.bleu / destination.total) * 255})'` +9. Mettre à jour la couleur de remplissage `document.querySelector('.cuve[data-nom='destination']').setAttribute("fill", destination.couleur);` +10. Allumer le feu rouge lorsqu'une cuve est vide `document.getElementById("feu-rouge").style.fillOpacity = etats.some((cuve) => cuve.hauteur == 0) ? 1: 0;` +11. Allumer le feu vert lorsqu'au moins un robinet est ouvert. `document.getElementById("feu-vert").style.fillOpacity = etats.some((cuve) => cuve.robinet) ? 1 : 0;` + +``` javascript +function remplir() { + etats + .filter((cuve) => cuve.robinet == true && cuve.niveau > 0) + .forEach((cuve) => { + cuve.niveau -= 0.005; + destination[cuve.nom] += 0.005; + document.querySelector(`.cuve[data-nom='${cuve.nom}']`).style.setProperty('--niveau', cuve.niveau); + }); + + destination.niveau = (destination.rouge + destination.vert + destination.bleu) / 3; + document.querySelector(`.cuve[data-nom='destination']`).style.setProperty('--niveau', destination.niveau); + + destination.total = Math.max(destination.rouge, destination.vert, destination.bleu); + destination.couleur = `rgb( ${(destination.rouge / destination.total) * 255} ${(destination.vert / destination.total) * 255} ${(destination.bleu / destination.total) * 255})`; + document.querySelector(`.cuve[data-nom='destination']`).setAttribute("fill", destination.couleur); + + document.getElementById("feu-rouge").style.fillOpacity = etats.some((cuve) => cuve.hauteur == 0) ? 1: 0; + document.getElementById("feu-vert").style.fillOpacity = etats.some((cuve) => cuve.robinet) ? 1 : 0; +} +``` + +Répéter la fonction remplir tant qu'un robinet est ouvert et de manière continue + +1. déclarer une variable globale permettant d'agir sur le timer `var timer;`. +2. Dan la fonction clic des robinets, tester si au moins un robinet est ouvert. `if (etats.some((elt) => elt.robinet))` Déclencher la fonction remplir toutes les 50ms, sauvegarder le handle de la fonction dans la variable timer. `timer = setInterval(remplir, 50) `\ +Si aucun robinet n'est ouvert annuler la répétition de la fonction `clearInterval(timer);` + +```javascript +var timer; + + ... + +if (etats.some((elt) => elt.robinet)) + timer = setInterval(remplir, 50) +else + clearInterval(timer); + +``` + +## Javscript complet + +```javascript + +``` + +### SVG Complet + +```svg + +``` + +```svg + +``` + +### Feuille de style + +```css + +``` + +Voir la [solution](solution). diff --git a/exercices/cuve/reponse/solution.html b/exercices/cuve/reponse/solution.html new file mode 100755 index 0000000..d4b7f8c --- /dev/null +++ b/exercices/cuve/reponse/solution.html @@ -0,0 +1,115 @@ + + + + + + + + + + + + + + diff --git a/exercices/dessin.svg b/exercices/dessin.svg new file mode 100755 index 0000000..f172ac5 --- /dev/null +++ b/exercices/dessin.svg @@ -0,0 +1,70 @@ + + + + diff --git a/exercices/guitare/couleurs.png b/exercices/guitare/couleurs.png new file mode 100755 index 0000000..114cad3 Binary files /dev/null and b/exercices/guitare/couleurs.png differ diff --git a/exercices/guitare/guitare.png b/exercices/guitare/guitare.png new file mode 100755 index 0000000..f027946 Binary files /dev/null and b/exercices/guitare/guitare.png differ diff --git a/exercices/guitare/guitare.svg b/exercices/guitare/guitare.svg new file mode 100755 index 0000000..ff52e72 --- /dev/null +++ b/exercices/guitare/guitare.svg @@ -0,0 +1,47 @@ + + \ No newline at end of file diff --git a/exercices/guitare/index.md b/exercices/guitare/index.md new file mode 100755 index 0000000..084d720 --- /dev/null +++ b/exercices/guitare/index.md @@ -0,0 +1,43 @@ +--- +layout: layouts/page.njk +title: Guitare +--- + +Dans un page html ajouter l'illustration de la [guitare](guitare.svg) dans une définition de symbole + +Ajouter une illustration SVG de 800px de large et 800px de haut + +Dupliquer le symbole de la guitare plusieurs fois + +Colorier à l'aide de variables css les éléments de la guitare + +palette|neck|body|guard|knobs|pickups|bridge|jack +---|---|---|---|---|---|---|--- +1|#debd8a|#406872|#ffffff|#62a600|#000|#ccc|#ccc +2|#97723a|#b00015|#111111|#ffffff|#eee|#333|#333 +3|#935540|#2c0544|#111111|#b909ae|#fff|#999|#999 +4|#000|#333|#ffffff|#ca0606|#000|#b9b9b9|#b9b9b9 + +Définir dans chaque classe les valeurs des variables + +```css +.theme1 { + --primary-color: red; +} + +.theme2 { + --primary-color: yellow; +} +``` + +Utilisez la variable pour définir le remplissage des différentes parties. + +```svg + +``` + +![](couleurs.png) + +Références +- https://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/ +- https://frontstuff.io/multi-colored-svg-symbol-icons-with-css-variables \ No newline at end of file diff --git a/exercices/guitare/reponse/index.md b/exercices/guitare/reponse/index.md new file mode 100755 index 0000000..83552b9 --- /dev/null +++ b/exercices/guitare/reponse/index.md @@ -0,0 +1,118 @@ +--- +layout: layouts/page.njk +title: Colorier un symbole +--- + + +## Définition des symboles + +pour chaque propriété personnalisable il faut attribuer la valeur non pas avec la propriété directement mais il faut utiliser les variables css. `fill="var(--body-color)"` à la place de `fill="red"` + +```svg + +``` + +## Utilisation des symbole + +Une classe différente pour chaque symbole + +```svg + + + + +``` + +## Le style + +finalement déclarer les variables + +```css + +``` \ No newline at end of file diff --git a/exercices/guitare/reponse/solution.html b/exercices/guitare/reponse/solution.html new file mode 100755 index 0000000..7c10c49 --- /dev/null +++ b/exercices/guitare/reponse/solution.html @@ -0,0 +1,110 @@ + + + + + + Document + + + + + + + + + + \ No newline at end of file diff --git a/exercices/horloge/horloge.png b/exercices/horloge/horloge.png new file mode 100755 index 0000000..a2003e2 Binary files /dev/null and b/exercices/horloge/horloge.png differ diff --git a/exercices/horloge/index.md b/exercices/horloge/index.md new file mode 100755 index 0000000..0b83231 --- /dev/null +++ b/exercices/horloge/index.md @@ -0,0 +1,32 @@ +--- +layout: layouts/page.njk +title: Horloge +--- + +Vous devez réaliser un outil d'apprentissage de l'heure + +![](horloge.png){ width: 500px; } + +## Dessiner une horloge + +Dans un canvas de 220px de largeur et 240px de hauteur + +Définir un trait de longueur 17px et 3.8px d'épaisseur pour les heures. + +Définir un trait de longueur 5px et un de 1.2px pour les minutes + +Définir un groupe représentant 5 minutes composé d'un trait d'heure et de 4 traits de minutes. + +Répéter ce bloc autant de fois que nécessaire pour faire un cercle complet + +Ajouter 2 aiguilles une pour les heures et une pour les minutes. + +*Facultatif* : + +Marquer les heures et les minutes avec du texte + +## Ajouter 2 slider + +Un pour les heures de 0 à 12 et l'autre pour les minutes + +Lorsque l'on bouge les sliders faire bouger les aiguilles. \ No newline at end of file diff --git a/exercices/horloge/reponse.md b/exercices/horloge/reponse.md new file mode 100755 index 0000000..6a39fea --- /dev/null +++ b/exercices/horloge/reponse.md @@ -0,0 +1,103 @@ +--- +layout: layouts/page.njk +title: Horloge +--- + +Les heures + +```svg + +``` + +Les minutes + +```svg + +``` + +Le bloc, chaque minute représente 6° (360 / 60) + +```svg + + + + + + + +``` + +Le viewBox permet de centrer sur le centre de l'horloge ou sur le bloc de 5 minutes +Attention si on utilise un symbole tous les éléments dans les coordonnées négatives ne sont pas affichés. + + +Chaque bloc de 5 minutes représente 30° (360 / 12) + +```svg + + + +... + + +``` + +### Les aiguilles + +```svg + + +``` + +### Le texte + +Il convient de redresser le texte après la rotation pour l'amener à sa position sur le cercle. + +```svg + + 2 + + + 5 + +``` + +### Les sliders + +```html +Heures :
+Minutes : +``` + +Télécharger le fichier svg + +### Le code javascript + +Récupérer les éléments + +```javascript +const inputh = document.querySelector("input.heure"); +const inputm = document.querySelector("input.minute"); +const aiguilleh = document.getElementById("aiguilleh"); +const aigiullem = document.getElementById("aiguillem"); +``` + +La fonction pour afficher les aiguilles dans la bonne position + +```javascript +function Show() { + aiguilleh.style.transform = `rotate(${360.0 / 12.0 * inputh.value + 30 / 60 * inputm.value}deg)`; + aiguillem.style.transform = `rotate(${360.0 / 60.0 * inputm.value}deg)`; +} +``` + +Attacher la fonctions aux événements `input` des sliders. + +```javascript +inputm.oninput = Show; +inputh.oninput = Show; +``` + +Télécharger le fichier html + + diff --git a/exercices/horloge/solution.html b/exercices/horloge/solution.html new file mode 100755 index 0000000..c151fda --- /dev/null +++ b/exercices/horloge/solution.html @@ -0,0 +1,141 @@ + + + + + + + Document + + + +

+Heures :
+Minutes : +

+ + + \ No newline at end of file diff --git a/exercices/horloge/solution.svg b/exercices/horloge/solution.svg new file mode 100755 index 0000000..4a37775 --- /dev/null +++ b/exercices/horloge/solution.svg @@ -0,0 +1,117 @@ + + \ No newline at end of file diff --git a/exercices/lion.jfif b/exercices/lion.jfif new file mode 100755 index 0000000..1906352 Binary files /dev/null and b/exercices/lion.jfif differ diff --git a/exercices/logo/couper.png b/exercices/logo/couper.png new file mode 100755 index 0000000..34968b5 Binary files /dev/null and b/exercices/logo/couper.png differ diff --git a/exercices/logo/extermites.png b/exercices/logo/extermites.png new file mode 100755 index 0000000..61f37de Binary files /dev/null and b/exercices/logo/extermites.png differ diff --git a/exercices/logo/guitare.png b/exercices/logo/guitare.png new file mode 100755 index 0000000..2270a98 Binary files /dev/null and b/exercices/logo/guitare.png differ diff --git a/exercices/logo/index.md b/exercices/logo/index.md new file mode 100755 index 0000000..a34a503 --- /dev/null +++ b/exercices/logo/index.md @@ -0,0 +1,189 @@ +--- +layout: layouts/page.njk +title: Création de logo +--- + +On vous demande de créer un logo à partir d'une image. Ce logo devra pouvoir être décliné suivant plusieurs schémas de couleurs. Vous décidez de le faire en SVG. + +## Le logo + +### Le cartouche + +Le cartouche est un anneau contenant du texte. + +### Dessiner l'anneau. + +Maintenir la touche `ctrl` pour un cercle parfait sinon vous aurez une ellipse.\ +Fixer le rayon à 100 px.\ +Ne pas remplir le cercle (cliquer sur la croix rouge dans la palette de couleur tout en bas) et fixer le contour en noir (Shift + clic sur la couleur noire).\ +Régler l'épaisseur du contour à 1px (Menu Object – Fill and Stroke – Stroke Style) + + +Dupliquer le cercle en place (Ctrl + C ; Ctrl + Alt + V).\ +Cliquer sur l'outil cercle pour retrouver les propriété et fixer le rayon à 75 px. + +Sinon Pour accéder à toutes propriétés xml des l'objets : Menu Edit – XML Editor ou Shift + Ctrl + X. + +### Guide du texte + +Dupliquer encore une fois le cercle en place (Ctrl + C ; Ctrl + Alt + V)\ +Fixer le rayon à 87.5 px. + +Afficher la liste des objets (Menu Object – Objects …) Cacher le cercle de rayon 87.5 (cliquer sur l'œil) + +Sélectionner les 2 cercles restants à l'écran (100 et 75 px).\ +Faire une exclusion : L'objet au premier plan est soustrait à l'autre. + +Nous avons maintenant un anneau. + +Remplir l'anneau de noir et supprimer le contour. (Menu Object - Fill and Stroke) + +### Texte + +Cacher l'anneau que vous venez de construire. + +Afficher maintenant le cercle de rayon 87.5 px. Dupliquer le (copier-coller en place Crtl + C ; Ctrl + Alt + V) + +Écrire 2 textes à n'importe quel endroit de la page par exemple :\ +♬ Boutique de Guitare ♬\ +★ Depuis 1973 ★ + +Police Century Gothic - Bold – taille 36 pt – Texte aligné au centre + +Sélectionner un texte et un cercle (Shift + Clic après la première sélection).\ +Positionner le texte sur le chemin (Menu Text – Put on Path)\ +Cacher le chemin et le texte. + +Sur le 2e cercle de 87.5px. Inverser son sens (Menu Path – Object to Path et Menu Path – Reverse). Rien n'est visible mais cela va permettre au texte d'être écrit dans l'autre sens. + +Sélectionner le 2e texte avec le 2e cercle et positionner le texte sur le chemin (Menu Text – Put on Path) + +Déplacer les textes le long de la circonférence du texte. Pour cela il faut effectuer une rotation du cercle support du texte.\ +Cliquer sur le cercle, les contours affiche les poignées de modification de la taille.\ +Cliquer une deuxième fois pour faire apparaitre les **poignées de rotation**. + +![poignees](poignees.png) + + +Éditer le texte, placer le curseur en tout début de la phrase (avec les flèches) et appuyer sur Alt flèche du haut ou Alt Flèche du bas pour positionner le texte verticalement et le centrer sur le cercle support. + +## La guitare + +Nous avons pour continuer notre logo, un modèle au format png. Importer le fichier [png](guitare.png) dans l'illustration. File – Import (Type d'importation Link) + +Transformer l'image au format bitmap en objet vectoriel (Menu Path – Trace Bitmap) Laisser les options par défaut Cliquer sur update puis sur Apply si le résultat est satisfaisant. + +Vous pouvez supprimer l'image depuis la liste des objets + +Redimensionner la guitare en appuyant sur Ctrl pour conserver les proportions. + +Cliquer une deuxième fois pour activer les poignées de rotation. Effectuer une légère rotation de la guitare. + +N'oubliez de nommer les objets dans le panneau des objets + +Dupliquer l'anneau. Sélectionner la copie et la guitare faire une soustraction +Attention à l'ordre des objets (l'anneau doit être avant la guitare). Utiliser les flêche du panneau Objets pour déplacer les objets vers le haut ou vers le bas.\ +Menu Path – Difference + +La guitare est découpée suivant l'anneau mais nous voulons que le manche soit complet + +### Recoller le manche + +Sélectionner les 4 points des 2 extrémités du manche.\ +Couper le path ![](couper.png) à ces 4 points. Les chemins sont coupés en 2 segments et sont toujours présents. + +![](extermites.png) + +Supprimer les segments des extrémités + +![](segments.png) + +Sélectionner 2 points de chaque partie et joindre les points avec un segment ![](joindre.png). Faire cela pour les 2 côtés. + +Décomposer la guitare en éléments constitutifs Menu Path Break Apart + +Réorganiser les objets car certains sont invisible. Remplir de couleur certaines parties pour qu'elles apparaissent + +![logo](logo.png) + +Couleurs utilisées : +Anneau : remplissage #8fcdcc ; contour 3px #fbebd1\ +Guitare : remplissage #384d6c ; contour 3px #fbebd1\ +Plaque de protection : remplissage #fbebd1\ +Texte : remplissage #384d6c + +## utilisation dans une page + +Modifier les propriété du document pour que la page englobe bien le logo.\ +File - Document Properties + +Sauvegarder le fichier au format SVG + +Créer une page html + +Ajouter le code du logo dans une définition de symbole. N'ajouter que la partie utile du svg. +Pour le viewBox du symbole vous devez reprendre le viewBox du document. +Le SVG contenant la définition n'a pas à être visible. Régler sa taille à 0 + +```svg + +``` + +Retirer un style de remplissage de tous les éléments du symbole et ajouter le directement sur la balise use + +```svg + + +``` + +```svg + +``` + +Procéder de la même manière pour la propriété stroke + +```svg + + +``` + +```svg + +``` + +### Comment faire pour remplacer la 3e couleur ? + +Il existe une astuce qui fonctionne uniquement pour cette 3e couleur. Nous allons utiliser la propriété color qui sert pour l'html et le css mais qui n'est pas présente dans les spécification du svg + +Prendre la dernière couleur et remplacer la proprété par `currentColor` + +```svg + + +``` + +Ajouter maintenant la propriété `color` sur la balise `use` + +```svg + +``` + +Utlisez un générateur de [palette](https://coolors.co/) pour colorier votre logo + +![réponse](reponse.png) \ No newline at end of file diff --git a/exercices/logo/joindre.png b/exercices/logo/joindre.png new file mode 100755 index 0000000..8f13730 Binary files /dev/null and b/exercices/logo/joindre.png differ diff --git a/exercices/logo/logo.png b/exercices/logo/logo.png new file mode 100755 index 0000000..faf731a Binary files /dev/null and b/exercices/logo/logo.png differ diff --git a/exercices/logo/logo.svg b/exercices/logo/logo.svg new file mode 100755 index 0000000..0878acb --- /dev/null +++ b/exercices/logo/logo.svg @@ -0,0 +1,101 @@ + + + + diff --git a/exercices/logo/modèle.jpg b/exercices/logo/modèle.jpg new file mode 100755 index 0000000..ac10a3b Binary files /dev/null and b/exercices/logo/modèle.jpg differ diff --git a/exercices/logo/poignees.png b/exercices/logo/poignees.png new file mode 100755 index 0000000..51896f1 Binary files /dev/null and b/exercices/logo/poignees.png differ diff --git a/exercices/logo/reponse.png b/exercices/logo/reponse.png new file mode 100755 index 0000000..88f5985 Binary files /dev/null and b/exercices/logo/reponse.png differ diff --git a/exercices/logo/reponse/reponse.md b/exercices/logo/reponse/reponse.md new file mode 100755 index 0000000..5366192 --- /dev/null +++ b/exercices/logo/reponse/reponse.md @@ -0,0 +1,114 @@ +--- +layout: layouts/page.njk +title: Création de logo - Solution +--- + +Mettre la guitare dans un symbole + +```svg + + + + Logo + + + + + + \ No newline at end of file diff --git a/exercices/logo/segments.png b/exercices/logo/segments.png new file mode 100755 index 0000000..638f92e Binary files /dev/null and b/exercices/logo/segments.png differ diff --git a/exercices/page.html b/exercices/page.html new file mode 100755 index 0000000..b9c84fb --- /dev/null +++ b/exercices/page.html @@ -0,0 +1,10 @@ + + + +SVG + + +

Mon dessin

+ + \ No newline at end of file diff --git a/exercices/page2.html b/exercices/page2.html new file mode 100755 index 0000000..7650736 --- /dev/null +++ b/exercices/page2.html @@ -0,0 +1,18 @@ + + + +SVG + + + +

Mon dessin

+ + \ No newline at end of file diff --git a/exercices/page3.html b/exercices/page3.html new file mode 100755 index 0000000..3f37e15 --- /dev/null +++ b/exercices/page3.html @@ -0,0 +1,40 @@ + + + +SVG + + + +

Mon dessin

+ + + + \ No newline at end of file diff --git a/exercices/paysage.jpg b/exercices/paysage.jpg new file mode 100755 index 0000000..47b3fd6 Binary files /dev/null and b/exercices/paysage.jpg differ diff --git a/exercices/plan/bezier.png b/exercices/plan/bezier.png new file mode 100755 index 0000000..36db49a Binary files /dev/null and b/exercices/plan/bezier.png differ diff --git a/exercices/plan/index.md b/exercices/plan/index.md new file mode 100755 index 0000000..8e5e8a6 --- /dev/null +++ b/exercices/plan/index.md @@ -0,0 +1,79 @@ +--- +layout: layouts/page.njk +title: Plan avec Inkscape +--- + +> **Inkscape** est un logiciel de dessin vectoriel libre multiplateforme. Il gère des fichiers conformes aux standards XML, SVG et CSS du W3C. + +Il offre des fonctionnalités similaires aux logiciels propriétaires comme CorelDRAW et Adobe Illustrator. Un peu plus austère, il demande un peu plus de maîtrise. + +A savoir : Le logiciel est intégré à la liste des logiciels libres préconisés par l’État français dans le cadre de la modernisation globale de ses systèmes d’informations. + + +Copier L'archive `inkscape-1.1-x64.7z` depuis le disque pédagogique `\info\amio\intégration et documents web`\ +Décompresser le dans `c:\temp` + +Ajouter l'image le plan de l'IUT au format png\ +File - Import + +Les touches + et - du pavé numérique permettent de zoomer.\ +Cliquer sur la molette de la souris pour vous déplacez dans l'illustration + +Ajouter un nouveau calque. +Menu Layer - Layers ... + +Vérrouiller le layer 1 pour ne pas dessiner dessus par inadvertance.\ +Régler l'opacité du layer 1 à 60% (Opacity en dessous de la liste) + +Retourner sur le layer 2 + +Prendre l'outil courbe de Bézier (touche B) et dessiner le contour du bâtiment.\ +Fermer bien la forme en sélectionnant le premier point lorsque vous avez fini. + +Régler l'épaisser du trait sur 3px\ +Menu Objet - Fill and Stroke - Stroke Style + +Dessiner les salles intérieures avec une épaisseur de trait de 1.5px\ +Utiliser le clic sur la molette et les touches + et - du pavé numérique pour vous déplacer dans l'illustration. + +Pour modifier la position d'un point particulier d'un chemin il faut utiliser l'outil de sélection des nodes. ![](nodes.png) + +![](inkscape.png) + +Renseigner les identifiants sur les salles.\ +Menu Object - Object Properties + +### Dimensions de la zone de travail + +Pour terminer modifier la zone de travail pour englober parfaitement le plan. +Menu File - Document Properties +Déployer le menu Resize page to content et cliquer sur le bouton Resize page to drawing or selection + +Pour optimiser le code source : sortir les chemins du layer 2 + +Enregistrer le fichier au format SVG + +## Intégration html / css + +Copier/coller le code source du fichier SVG dans une page html. +Supprimer les éléments d'en-tête Inkscape inutiles.\ +Supprimer le prologue xml +Supprimer le code relatif au layer 1 avec l'image. + +Ajouter une feuille de style à la page html + +Ajouter des classes css sur les salles +info pour les salles du département info\ +geii pour les salle du département génié électrique\ +mmi pour les salle du département mmi + +Retirer le style en ligne `fill:none` des chemins sinon celui-ci prendra le dessus. + +Définir la couleur de remplissage dans les classes CSS +#ff6e2c pour info\ +#9d2038 pour geii\ +#936bb6 pour mmi\ +#add24a pour les salles des 3 départements +#42c7c1 pour la lp tourisme + +![](reponse.png) \ No newline at end of file diff --git a/exercices/plan/inkscape.png b/exercices/plan/inkscape.png new file mode 100755 index 0000000..0a0f55e Binary files /dev/null and b/exercices/plan/inkscape.png differ diff --git a/exercices/plan/nodes.png b/exercices/plan/nodes.png new file mode 100755 index 0000000..3e831b5 Binary files /dev/null and b/exercices/plan/nodes.png differ diff --git a/exercices/plan/plan.pdf b/exercices/plan/plan.pdf new file mode 100755 index 0000000..d232708 Binary files /dev/null and b/exercices/plan/plan.pdf differ diff --git a/exercices/plan/plan.png b/exercices/plan/plan.png new file mode 100755 index 0000000..5b1c145 Binary files /dev/null and b/exercices/plan/plan.png differ diff --git a/exercices/plan/plan.svg b/exercices/plan/plan.svg new file mode 100755 index 0000000..63017fa --- /dev/null +++ b/exercices/plan/plan.svg @@ -0,0 +1,155 @@ + + + + diff --git a/exercices/plan/reponse.html b/exercices/plan/reponse.html new file mode 100755 index 0000000..d5bfc80 --- /dev/null +++ b/exercices/plan/reponse.html @@ -0,0 +1,116 @@ + + + + + + Document + + + + + + télécharger + \ No newline at end of file diff --git a/exercices/plan/reponse.png b/exercices/plan/reponse.png new file mode 100755 index 0000000..44a0149 Binary files /dev/null and b/exercices/plan/reponse.png differ diff --git a/exercices/soleil1.html b/exercices/soleil1.html new file mode 100755 index 0000000..87fa82c --- /dev/null +++ b/exercices/soleil1.html @@ -0,0 +1,94 @@ + + + +SVG + + + +

Mon dessin

+ + + + \ No newline at end of file diff --git a/exercices/sprite.svg b/exercices/sprite.svg new file mode 100755 index 0000000..8796a20 --- /dev/null +++ b/exercices/sprite.svg @@ -0,0 +1,10 @@ + + diff --git a/exercices/svg-1.html b/exercices/svg-1.html new file mode 100755 index 0000000..68118cb --- /dev/null +++ b/exercices/svg-1.html @@ -0,0 +1,14 @@ + + + + SVG + + + + +

+
+

+ + + diff --git a/exercices/svg-2.html b/exercices/svg-2.html new file mode 100755 index 0000000..ccdfd51 --- /dev/null +++ b/exercices/svg-2.html @@ -0,0 +1,35 @@ + + + + SVG Bibliothèque + + + + + + + + + + diff --git a/exercices/svg-3.html b/exercices/svg-3.html new file mode 100755 index 0000000..cce1df7 --- /dev/null +++ b/exercices/svg-3.html @@ -0,0 +1,48 @@ + + + + SVG Bibliothèque + + + + + + + + + + diff --git a/exercices/svg-4.html b/exercices/svg-4.html new file mode 100755 index 0000000..a5dcb97 --- /dev/null +++ b/exercices/svg-4.html @@ -0,0 +1,23 @@ + + + + SVG Bibliothèque + + + + + + + + + + diff --git a/exercices/svg-4a.html b/exercices/svg-4a.html new file mode 100755 index 0000000..f23f5e7 --- /dev/null +++ b/exercices/svg-4a.html @@ -0,0 +1,19 @@ + + + + SVG Image + + + + + + https://www.lachimie.net/index.php?page=34 + + + diff --git a/exercices/svg-5.html b/exercices/svg-5.html new file mode 100755 index 0000000..4333f0f --- /dev/null +++ b/exercices/svg-5.html @@ -0,0 +1,57 @@ + + + + SVG Image + + + + + + + + + + diff --git a/exercices/svg-6.html b/exercices/svg-6.html new file mode 100755 index 0000000..fe36895 --- /dev/null +++ b/exercices/svg-6.html @@ -0,0 +1,43 @@ + + + + SVG Image + + + + + + + diff --git a/exercices/svg-7.html b/exercices/svg-7.html new file mode 100755 index 0000000..05cc191 --- /dev/null +++ b/exercices/svg-7.html @@ -0,0 +1,38 @@ + + + + SVG Image + + + + + + + diff --git a/exercices/svg-8.html b/exercices/svg-8.html new file mode 100755 index 0000000..018f48f --- /dev/null +++ b/exercices/svg-8.html @@ -0,0 +1,30 @@ + + + + SVG Image + + + + + + + diff --git a/exercices/svg-9.html b/exercices/svg-9.html new file mode 100755 index 0000000..3439625 --- /dev/null +++ b/exercices/svg-9.html @@ -0,0 +1,38 @@ + + + + SVG Image + + + + + + + diff --git a/exercices/vague/index.md b/exercices/vague/index.md new file mode 100755 index 0000000..40f52a6 --- /dev/null +++ b/exercices/vague/index.md @@ -0,0 +1,93 @@ +--- +layout: layouts/page.njk +title: Animation - Exercice +--- + +Créer une `vague` à l'aide d'un chemin. + + + +Coordonnées des points : +- **A** : 0, 25 +- **B** : 100, 40 +- **C** : 300, 10 +- **D** : 500, 40 +- **E** : 600, 25 +- **F** : 700, 40 + +Points d'inflexion : +- [AB] : 50,25 et 50,40 +- [BC] : 180,40 et 200,10 +- [CD] : symétrique de 200, 10 par raport à C et 400, 40 pour D +- [DE] : 535,40 et 550,25 +- [EF] : 650,25 et 650,40 + +Il est important que la portion de courbe [EF] soit identique à [AB], + +Terminer par des segment verticaux et horizontaux pour compléter la forme par en dessous et revenir à l'origine. + +La forme fait 700px de large et nous allons créer une fenètre de 100 px de large. +Les 100px de la fin de la courbe sont identique aux 100px du début, c'est important pour avoir une transition fluide lorsque l'animation va repartir au début. + +```svg + +``` + +Ajouter une animation de transformation pour décaler la forme vers la gauche (déplacement négatif) de 600 px. Recommencer l'animation à l'infini. + +```svg + +``` + +Répéter la forme 3 fois en modifiant la vitesse de l'animation. Appliquer une opacité différente sur les 3 formes. + +

diff --git a/exercices/vague/wave.svg b/exercices/vague/wave.svg new file mode 100755 index 0000000..b96f106 --- /dev/null +++ b/exercices/vague/wave.svg @@ -0,0 +1,53 @@ + diff --git a/exercices/vision/index.md b/exercices/vision/index.md new file mode 100755 index 0000000..a18658b --- /dev/null +++ b/exercices/vision/index.md @@ -0,0 +1,65 @@ +--- +layout: layouts/page.njk +title: SVG - Exercice - Filtre +--- + +> ***Prérequis :*** le format SVG, les [filtres](../) +:{.info} + +## Exercice 1 + +On désire mettre en place un simulateur de déficience visuelle lié à la DMLA (dégénérescence maculaire liée à l'âge). Cette maladie se traduit par une tache noir au centre de la vision + +![](photo1.jpg) + +photo 1 + +Créer une page html. Ajouter une illustration SVG couvrant 100% de la page. + +Ajouter la photo et couvrir d'un rectangle noir par dessus. + +Définir un gradient radial de rayon couvrant 40% de la zone avec un centre totalement blanc jusqu'à 20% du rayon du cercle puis ensuite un dégradé vers le noir à 100% du rayon. + + +Créer un masque pour sélectionner un cercle (rayon 20% du total) dans le rectangle noir. Utiliser le dégradé radial, sachant que le blanc laisse la forme intacte et la couleur noire supprime la supprime + +Ajouter un bloc javascript dans la page, écouter le déplacement de la souris sur le document et modifier les coordonnées du cercle en fonction de la souris + +[Réponse](reponse1) + +## Exercice 2 + +Sur le même principe que l'exercice précédent Mettre en place un simulateur de glaucome. Le glaucome se traduit par une baisse du contraste des couleurs et par une vision floue périphérique + +![](photo2.jpg) + +photo 2 + +Créer une page html. Ajouter une illustration SVG couvrant 100% de la page. + +Définir un filtre complexe composé + +d'un premier filtre flou gaussien (feGaussianBlur) de déviation 8. identifier le resultat +Le resultat de ce filtre sert d'entrée pour un deuxième filtre de réduction de contraste qui utilise un matrice de conversion de couleur (feColorMatrix) + +|r|v|b|a +--:|--:|--:|--:| +0.8|0.1 |0.1| 0| 0 +0.1| 0.8| 0.1| 0| 0 +0.1| 0.1| 0.8| 0| 0 +0 | 0| 0| 0.8 | 0 + +https://runebook.dev/fr/docs/svg/element/fecolormatrix + +Créer maintenant un masque basé sur un dégradé radial de taille 50% et basé sur 40% de la photo +Le centre (0%) affiche l'image, La périphérie (100%) l'efface + +Ajouter 2 fois la photo. +- Le première prend le filtre flou +- La deuxième le masque basé sur le dégradé radial + +Suivant lla veleur du masque c'est soit la photo floue qui sera visible soit la photo nette. + +Ajouter un bloc javasript dans la page, écouter le déplacement de la souris sur le document et modifier les coordonnées du cercle en fonctionde la souris + +[Réponse](reponse2) \ No newline at end of file diff --git a/exercices/vision/photo1.jpg b/exercices/vision/photo1.jpg new file mode 100755 index 0000000..6a91686 Binary files /dev/null and b/exercices/vision/photo1.jpg differ diff --git a/exercices/vision/photo2.jpg b/exercices/vision/photo2.jpg new file mode 100755 index 0000000..93bcdf0 Binary files /dev/null and b/exercices/vision/photo2.jpg differ diff --git a/exercices/vision/reponse1.md b/exercices/vision/reponse1.md new file mode 100755 index 0000000..010ffa5 --- /dev/null +++ b/exercices/vision/reponse1.md @@ -0,0 +1,80 @@ +--- +layout: layouts/page.njk +title: SVG - Exercice - Filtre +--- + + +SVG couvrant toute la page + +```html + +``` + +Photo et rectangle noir par dessus + +```svg + + +``` + +Dégrédé radial + +```svg + + + + + + +``` + +```svg + + + +``` + +Ajouter le masque sur le rectangle noir + +```svg + +``` + +Code javascript pour suivre la souris + +```javascript +document.body.onmousemove = event => +{ + document.getElementById("centre").setAttribute("cx", event.clientX ); + document.getElementById("centre").setAttribute("cy", event.clientY ); +} +``` + +Code complet + +```html + + +``` + +Voir la [solution](solution) \ No newline at end of file diff --git a/exercices/vision/reponse2.md b/exercices/vision/reponse2.md new file mode 100755 index 0000000..c8f2260 --- /dev/null +++ b/exercices/vision/reponse2.md @@ -0,0 +1,116 @@ +--- +layout: layouts/page.njk +title: SVG - Exercice - Filtre +--- + +SVG couvrant toute la page + +```html + +``` + +Le filre flou + +```svg + +``` + +Le filtre baisse de contraste + +```svg + + +``` + +Les 2 combinés + +```svg + + + + + +``` + +Le dégradé + +```svg + + + + +``` + +Le masque + +```svg + + + +``` + +La première photo avec le flou + +```svg + +``` + +La deuxième photo nette mais avec un masquage + +```svg + +``` + +### Le suivi par la souris + +```javascript +document.body.onmousemove = event => +{ + document.getElementById("centre").setAttribute("cx", event.clientX ); + document.getElementById("centre").setAttribute("cy", event.clientY ); +} +``` + +### Le code complet + +```html + + +``` + +Voir la [solution](solution) diff --git a/exercices/vision/solution1.html b/exercices/vision/solution1.html new file mode 100755 index 0000000..d7482cb --- /dev/null +++ b/exercices/vision/solution1.html @@ -0,0 +1,36 @@ + + + + SVG Image + + + + + + + + diff --git a/exercices/vision/solution2.html b/exercices/vision/solution2.html new file mode 100755 index 0000000..eb63cc4 --- /dev/null +++ b/exercices/vision/solution2.html @@ -0,0 +1,45 @@ + + + + SVG Image + + + + + + + + + diff --git a/exercices/vision/street1.jpg b/exercices/vision/street1.jpg new file mode 100755 index 0000000..d6b46a7 Binary files /dev/null and b/exercices/vision/street1.jpg differ diff --git a/exercices/vision/street2.jpg b/exercices/vision/street2.jpg new file mode 100755 index 0000000..dad8c5b Binary files /dev/null and b/exercices/vision/street2.jpg differ diff --git a/filtres/index.md b/filtres/index.md new file mode 100755 index 0000000..3cd5530 --- /dev/null +++ b/filtres/index.md @@ -0,0 +1,43 @@ +--- +layout: layouts/page.njk +title: Filtres +--- + +### Flou + +feGaussianBlur + + + +### Ombre + +feDropShadow + + + + + + + + + \ No newline at end of file diff --git a/formes/exercice/index.md b/formes/exercice/index.md new file mode 100755 index 0000000..6f7b1c1 --- /dev/null +++ b/formes/exercice/index.md @@ -0,0 +1,26 @@ +--- +layout: layouts/page.njk +title: SVG - Smartphone +--- + +> ***Prérequis :*** le format SVG, les [formes](../) et les [propriétés](../../propriétés) +:{.info} + +Vous devez dessiner un téléphone au format SVG. +Utilisez Visual Studio Code avec l'extension SVG de Jock pour prévisualiser le résultat. + +1. Créer un rectangle de largeur 490 et de hauteur 970. Le rectangle a des coins arrondis de 70. Le contour noir fait 15 d'épaisseur. Remplissez le rectangle d'un gris très clair (#fcfcfc). + +2. Créer un deuxième rectangle de le largeur 410 et de hauteur 745. Le contour noir fait 15 d'épaisseur. Remplissez le rectangle de blanc. Le rectangle est centré horizontalement dans le premier et décalé de 110 vers le bas. + +3. Dessiner une ligne de longueur 60. Le contour noir fait 15 d'épaisseur. La ligne est terminée par des arrondis. La ligne est centré horizontalement dans le premier et centré verticalement entre les 2 rectangles. + +4. Dessinez un cercle de rayon 10 alignée sur la ligne et placé à 170 du bord gauche. + +5. Dessinez un cercle rempli de couleur noire de rayon 35 situé à 905 du haut. + +6. Dessinez un cercle rempli de couleur blanche de rayon blanc, centré sur le premier cercle. + +![](telephone.png) + +Télécharger la [solution](telephone.svg) diff --git a/formes/exercice/notebook.svg b/formes/exercice/notebook.svg new file mode 100755 index 0000000..baca30e --- /dev/null +++ b/formes/exercice/notebook.svg @@ -0,0 +1,11 @@ + \ No newline at end of file diff --git a/formes/exercice/telephone.png b/formes/exercice/telephone.png new file mode 100755 index 0000000..05077e5 Binary files /dev/null and b/formes/exercice/telephone.png differ diff --git a/formes/exercice/telephone.png~ b/formes/exercice/telephone.png~ new file mode 100755 index 0000000..a92e231 Binary files /dev/null and b/formes/exercice/telephone.png~ differ diff --git a/formes/exercice/telephone.svg b/formes/exercice/telephone.svg new file mode 100755 index 0000000..549943f --- /dev/null +++ b/formes/exercice/telephone.svg @@ -0,0 +1,14 @@ + + \ No newline at end of file diff --git a/formes/exercice/tv/index.md b/formes/exercice/tv/index.md new file mode 100755 index 0000000..d1344a8 --- /dev/null +++ b/formes/exercice/tv/index.md @@ -0,0 +1,44 @@ +--- +layout: layouts/page.njk +title: SVG - Télévision +--- + +> ***Pérequis :*** le format SVG, les [formes](../), les [propriétés](../../propriétés), le [masquage](../../découpe) +{.info} + +Vous devez dessiner un téléphone au format SVG. +Utilisez Visual Studio Code avec l'extension SVG de Jock pour prévisualiser le résualt. + +Une partie de l'illustration est déja fournie + +```svg + + + + + +``` + +L'illustration commence à l'origine en **0,0**.\ +La largeur totale est de **115px** et la hauteur d'un côté de **62px**.\ +La partie centrale est incurvée avec un vecteur de contrôle vertical qui descend de **3px** à bartir du bord, elle relie le point central qui est plus bas de **5px** que le bord, le vecteur issu du point central est horizontal est fait **20px**.\ +Une courbe relie l'autre bord de l'écran, elle est symétrique par rapport à la première. + +La marge entre le bord extérieur et la La zone vide intérieure fait **4px**. + +Vous devez dessiner l'écran avec un seul élément path qui sera composé de 2 parties. Pour passer d'une partie à l'autre il faut fermer le premier chemin avec la commande z et se déplacer au début du deuxième avec la commande M. +Pour que le centre soit vide il faut que les 2 chemins tournent en sens inverse l'un de l'autre. + +Ajouter la photo du panda, fixer la hauteur de la photoraphie à **90px**, la largeur est laissée en automatique par rapport à la hauteur. + +Faire un découpage de l'image pour la faire rentrer dans la tv + + +![](tv.png) + +![](panda.webp) diff --git a/formes/exercice/tv/panda.webp b/formes/exercice/tv/panda.webp new file mode 100755 index 0000000..fe1d762 Binary files /dev/null and b/formes/exercice/tv/panda.webp differ diff --git a/formes/exercice/tv/reponse.md b/formes/exercice/tv/reponse.md new file mode 100755 index 0000000..c79b8ff --- /dev/null +++ b/formes/exercice/tv/reponse.md @@ -0,0 +1,89 @@ +--- +layout: layouts/page.njk +title: Réponse +--- + + +Le milieu de la forme se trouve à 115 / 2 = 57.5px + +Origine en 0, 0 -> M0,0\ +Lettre en minuscule toutes les coordonnées sont relatives au point précédent\ +Largeur totale -> h115 (ligne horizontale)\ +Hauteur d"un coté -> v62 (ligne verticale) + +partie centrale incurvée -> c\ +vecteur de contrôle vertical qui descend de **3px** ->0 3\ +point central qui est plus bas de **5px** -> -57.5 5\ +le vecteur issu du point central est horizontal est fait **20px** -> (-57.5 + 20) 5 -> -37.5 5\ + +courbe symétrique -> s +il n'est pas nécessaire de définir le vecteur issu du point central\ +vecteur de contrôle vertical qui descend de **3px** pour l'extremtité gauche -> s-57.5 -2. On descend de 3px du point mais comme nous sommes déja descendu de 5 il faut remonter de 2. La lettre minuscule indique un déplacement relatif par rapport au point précédent.\ +Extremité gauche -> -57.5 -5 On remonte de 5px\ +Retour à l'origine et fermer la forme-> z + +Déplacement à l'origine de la deuxième forme -> M4,4 -> 4px de marge\ +Cette fois si il faut se déplacer dans le sens trigonométrique\ +Descendre de 54px (62 - 4 - 4) -> v54\ +Aller à l'autre extremité -> 155 - 4 - 4 -> h107\ +Remonter -> V4 ou v-54 +Revenir à l'origine et fermer la forme -> z + + +```svg + +``` + +Le cercle au centre de rayon 2.5 + +```svg + +``` + +La balise image + +```svg + +``` + +```svg + + + + + +``` + +Le fichier + + \ No newline at end of file diff --git a/formes/exercice/tv/tv.png b/formes/exercice/tv/tv.png new file mode 100755 index 0000000..e875f27 Binary files /dev/null and b/formes/exercice/tv/tv.png differ diff --git a/formes/exercice/tv/tv.svg b/formes/exercice/tv/tv.svg new file mode 100755 index 0000000..cf74e96 --- /dev/null +++ b/formes/exercice/tv/tv.svg @@ -0,0 +1,28 @@ + + diff --git a/formes/index.md b/formes/index.md new file mode 100755 index 0000000..93518f4 --- /dev/null +++ b/formes/index.md @@ -0,0 +1,402 @@ +--- +layout: layouts/page.njk +title: Formes +--- + + + +## Rectangle + +Le rectangle est défini par les coordonnées de son sommet en haut à gauche puis par sa largeur et sa hauteur. + + + +```svg + +``` + +## Cercle + +Le cercle est défini par les coordonnées de son centre et son rayon. + + + +```svg + +``` + +## Ellipse + +L'ellipse est définie par les coordonnées de son centre et par ses deux rayons. + + + +```svg + +``` + +## Ligne droite + +La ligne droite est définie par les coordonnées du point 1 de départ et les coordonnées du point 2 d'arrivée. +La ligne ne peut être remplie par une couleur. Il faut définir un contour pour la voir. + + + +```svg + +``` + +## Polyligne + +La polykigne est une ligne brisée, non fermée, entre plusieurs points. C'est un ensemble de segments réliés entre eux. La forme est dite ouverte car le dernier point n'est pas connecté avec le premier. Elle peut tout de même être remplie avec un couleur de fond. + + + +```svg + +``` + +### liste de points + +La liste de points consiste en suite de 2 nombres, le premier pour l'abscisse le deuxième pour l'ordonnée. Les points et les coordonnées sont séparés au choix par un espace ou par une virgule. + +La virgule décimale est représentée par un point : 50.425 + + + +```svg + + + + + + + + + + + +``` + +## Polygone + +Le polygone est une polyligne dont le dernier point est connecté avec le premier. La forme est automatiquement fermée. + + + +```svg + +``` + +### Règle de remplissage + +Dans le cas où les segments se croisent, l'attribut fill-rule définit l'algorithme à utiliser pour déterminer les parties qui sont considérées à l'intérieur de la forme. + + + + +```svg + + +``` +evenodd +fill-rule est un attribut de présentation vous pouvez l'utiliser dans un feuille de style CSS. + + +## Les chemins + +Les chemins sont plus compliqués, ils intègrent des portions en ligne ou en courbe. Des commandes permettent de savoir comment dessiner chaque portion. + + + +```svg + +``` + +Les commandes sont définies par des lettres, les lettres majuscules prennent en compte des coordonnées absolues tandis que les lettres minuscules travaillent en coordonnées relativement au point précédent. + + + +```svg + +``` + +Si une plusieurs commandes identiques se suivent il n'est pas nécessaire de répéter la lettre de la commande. Il suffit de mettre les points les uns à la suite des autres comme pour une polyligne. + +### Commande M, m +`Move to` : se rendre à un point sans dessiner. Toujours pour le premier point. Ensuite si la forme complexe est consititué de plusieurs parties. + +### Commande Z, z +`ClosePath` Fermer le tracé : Se rendre au premier point en ligne droite. Il n’y a pas de différence entre la commande en majuscule et en minuscule. + +### Commande L, l +`Line to` : Line droite vers le point. Identique à polyline + +### Commande H, h +`Horizontal line to` : Ligne Horizontale + +### Commande V, v +`Vertical line to` : Ligne Verticale + + + +```svg + +``` + +### Commande A, a +`Arc` : Arc elliptique 7 nombres sont nécessaires : rayon x, rayon y, inclinaison de l'axe x en dégrés, grand côté ou petit côté, angle positif ou négatif, coordonnées du point d'arrivé. + +Les cordonnées du centre de l'ellipse et les rayons réels sont calculés pour satisfaire les conditions des points d'arrivée. + +Pour un rayon rx et un rayon ry donnés, il existe deux ellipses A et B pouvant connecter deux points quelconques. + +Pour chacune des deux ellipses, il existe deux chemins possibles, ce qui donne quatre arcs possibles. + +`large-arc-flag` (0 ou 1) détermine si l’arc doit être supérieur ou inférieur à 180 degrés ; au final, il détermine dans quelle direction l’arc va parcourir une ellipse donnée. + +`sweep-flag` (0 ou 1) détermine si l’arc doit commencer son mouvement à un angle négatif ou positif, permettant ainsi de choisir lequel des deux cercles est parcouru. + + + +```svg + + + + +``` + +L'illustration dans cette page ne fonctionne pas avec Firefox. + +### Commande Q, q, T, t +Courbe quadratique : coordonnées du point de contrôle et coordonnées du point d'arrivée + + + +```svg + +``` + +T : Prolongation d'une courbe quadratique : Seules les coordonnées du point d'arrivée sont renseignés. Le point de contrôle de la commande T est le symétrique de la commande Q précédente. + + + +```svg + +``` + + +### Commande C, c, S, s +C `CurveTo` : Courbe cubique (ou courbe de Bézier) : 2 points de contrôle et un point d'arrivée + + + +```svg + +``` + +S `Shorthand CuveTo` : Prolongation d'une courbe de Bézier cubique, le premier point d'inflexion est le symétrique du point d'inflexion de la courbe précédente + + + +```svg + +``` + +L'utilisation d'un logiciel comme inkscape n'optimise pas forcement les commandes, mais cela est bien plus pratique pour dessiner des formes complexes. + +[Exercice](exercice) diff --git a/fragment/index.md b/fragment/index.md new file mode 100755 index 0000000..6df7e0a --- /dev/null +++ b/fragment/index.md @@ -0,0 +1,55 @@ +--- +layout: layouts/page.njk +title: Fragments SVG +date: Last Modified +--- + +Les fichiers svg peuvent être utilisé comme source pour les balises images ``. Il sont considérés comme des fichiers classiques jpg ou png. + +Créer un fichier svg appelé `sprite.svg` + +Ajouter ces 3 formes au fichier SVG + +```svg + + + +``` + +Ajouter dans une page html une image avec le fichier svg comme source. Visualiser la page : Nous avons 3 icônes l'une à côté de l'autre. + +```html +

+``` + +

+ + + +Récupérer qu'un fragment du svg en définissant un viewbox personnalisé dans l'url + +```html +

+``` + +

+ +Ou en définissant des viewbox prédéfinis dans le svg. + +```svg + + + + + +``` + +Et en appelant directement avec l’identifiant `ìd` + +```html +

+``` + +

diff --git a/fragment/legumes/aubergine.svg b/fragment/legumes/aubergine.svg new file mode 100755 index 0000000..70d3b30 --- /dev/null +++ b/fragment/legumes/aubergine.svg @@ -0,0 +1,13 @@ + + diff --git a/fragment/legumes/beetroot.svg b/fragment/legumes/beetroot.svg new file mode 100755 index 0000000..ba80838 --- /dev/null +++ b/fragment/legumes/beetroot.svg @@ -0,0 +1,10 @@ + + diff --git a/fragment/legumes/carrot.svg b/fragment/legumes/carrot.svg new file mode 100755 index 0000000..70904e2 --- /dev/null +++ b/fragment/legumes/carrot.svg @@ -0,0 +1,11 @@ + + diff --git a/fragment/legumes/corn.svg b/fragment/legumes/corn.svg new file mode 100755 index 0000000..32634e5 --- /dev/null +++ b/fragment/legumes/corn.svg @@ -0,0 +1,7 @@ + + diff --git a/fragment/legumes/potato.svg b/fragment/legumes/potato.svg new file mode 100755 index 0000000..f283033 --- /dev/null +++ b/fragment/legumes/potato.svg @@ -0,0 +1,8 @@ + + diff --git a/fragment/legumes/tomato.svg b/fragment/legumes/tomato.svg new file mode 100755 index 0000000..db881a1 --- /dev/null +++ b/fragment/legumes/tomato.svg @@ -0,0 +1,11 @@ + + diff --git a/fragment/sprite.svg b/fragment/sprite.svg new file mode 100755 index 0000000..d5b14d7 --- /dev/null +++ b/fragment/sprite.svg @@ -0,0 +1,17 @@ + + diff --git a/javascript.md b/javascript.md new file mode 100755 index 0000000..6c07e05 --- /dev/null +++ b/javascript.md @@ -0,0 +1,16 @@ +--- +layout: layouts/page.njk +title: Interaction en javascript +--- + +Cibler un élément svg et changer la classe qui lui est appliquée +document.getElementById("soleil2").classList.toggle("gris") + +Remarque 1 : Attention au poids des styles, dans l'application en cascade, le style inline a le plus de poids. Pour changer un style il faut que celui-ci se trouve au même niveau. + +Cibler un élément contenant un symbole. + +Utiliser currentColor pour appliquer la bonne couleur, Cela fonctionne à condition d'utiliser un nombre restreint de couleur. +Les variables css + + diff --git a/mexico-1400.png b/mexico-1400.png new file mode 100755 index 0000000..c15e667 Binary files /dev/null and b/mexico-1400.png differ diff --git a/mexico.jpg b/mexico.jpg new file mode 100755 index 0000000..a60c47e Binary files /dev/null and b/mexico.jpg differ diff --git a/mexico.png b/mexico.png new file mode 100755 index 0000000..fed97a0 Binary files /dev/null and b/mexico.png differ diff --git a/mexico.svg b/mexico.svg new file mode 100755 index 0000000..ed97cb9 --- /dev/null +++ b/mexico.svg @@ -0,0 +1,412 @@ + \ No newline at end of file diff --git a/propriétés/index.md b/propriétés/index.md new file mode 100755 index 0000000..b47226b --- /dev/null +++ b/propriétés/index.md @@ -0,0 +1,329 @@ +--- +layout: layouts/page.njk +title: Propriétés +--- + + + +## Remplissage + + + +```svg + +``` + +La propriété fill permet de définir la couleur de remplissage. + +## Contour + + + +```svg + +``` + +Un contour se défini par sa couleur et par sa largeur. + +Le contour se situe centré sur la forme, il n'est pas possible de positionner totalement à l'extérieur ou totalement à l'intérieur. + +## Opacité + + + +```svg + + + +``` + +Du fait la position du contour à cheval sur la forme, l'opacité de contour apparait différement suivant qu'elle est sur la forme ou sur le fond. + +## Coins arrondis + + + +```svg + + + +``` + +## Fin de ligne + + + +```svg + + + +``` + +## Jointure de l'angle + + + +```svg + + + + + +``` + +round +: Un coin arrondi est utilisé pour joindre les segments + +miter +: Les segments sont prolongés pour former une pointe. La prolongation s'effectue en ligne droite. + +bevel +: Le sommet est biseauté au point de jonction des 2 segments. + +miter-clip +: Compromis entre le biseau et la pointe. Si celle-ci est trop grande et dépasse la limite acceptable (voir la propriété `stroke-miterlimit` plus bas) +Un biseau est appliqué à mi-hauteur, et non pas à l'intersection. Cette propriétés n'est pas encore implémentée dans les navigateurs. + +arcs +: Les segments sont prolongés pour former une pointe. La prolongation prend en compte les rayons des segments courbes. Cette propriétés n'est pas encore implémentée dans les navigateurs. + +## Limitation des angles aigus + +La propriété `stroke-miterlimit` définit la limite de la pointe d'un angle aigu. Quand la limite est dépassée, le sommet est converti en biseau. + +La taille de la pointe est calculée à partir du point de jonction intérieur jusqu'au sommet, la taille est exprimée en fonction de l'épaisseur du contour. + +Proportion de la pointe = 1 / sin( Θ / 2) + +Épaisseur = 40\ +Points : 50,75 250,125 et 50,175\ +Demi angle = ArcTan( (125-75) / (250-50) ) = **14°**\ +Pointe = 1 / (sin (14)) = **4.12**\ +Longeur de la pointe = 4.12 x 40 = **165** + +Dans ce cas la taille de la pointe est légèrment supérieure à **4x** l'épaisseur du contour. +Si nous définissions la limite à 4 alors la pointe se transforme en biseau. + +```svg + +``` + + + +### Fonction de l'angle + + + +```svg + +``` + +Une limite à 2,6 correspond à un angle inférieur ou égal à ArcSin(1 / 2.6) soit 45° + +## Pointillés + + + +```svg + + + +``` + +`stroke-dasharray` défini le motif à répeter en alternant les pleins et les vides + +`stroke-dashoffset` défini le départ du motif. Un nombre positif indique que l'on va commencer plus loin dans le motif, donc on aura l'impression que celui-ci se décale vers la gauche. A l'inverse un nombre négatif indique que l'on va commencer le motif en avance, celui-ci va se décaler vers la droite. + +## Marqueurs + +Les marqueurs sont des éléments graphiques qui seront ajoutés sur les segments au début à la fin ou sur les point intermédiaires. + + + +```svg + + + + + + + + + +``` + +Dans un bloc de définition (voir ...) on défini +- Un marqueur en attribuant un id pour pouvoir y faire référence dans les autres éléments +- Une zone de travail (viewBox) +- Un point central de référence +- Une taille d'affichage (viewport) +- Une orientation suivant si l'n se trouve au début ou à la fin du chemin +- Et enfin des éléments graphiques (chemins, lignes, cercles, ...) pour dessiner le marqueur. + +```svg + +``` diff --git a/texte/index.md b/texte/index.md new file mode 100755 index 0000000..2e9a0bd --- /dev/null +++ b/texte/index.md @@ -0,0 +1,109 @@ +--- +layout: layouts/page.njk +title: Texte +date: Last Modified +--- + + + +Le texte est géré entièrment par l'utilisateur. il n'y a pas de retour à la ligne automatique ni de calcul d'espacement entre les lignes. + +Les balise `tspan` permettent de spécifier une nouvelle position ou des nouveaux attributs pour la partie de texte concernée. Si l'abscisse x n'est pas renseignée alors le texte continue là où il devrait être. + + + +```svg + + Bonjour + Tout le monde + +``` + +### Alignement + +La propriété `text-anchor` permet d'aligné le texte. + + + +```svg +Bonjour +Bonjour +Bonjour +``` +Les autres propriété pour la mise en forme sont identique au CSS/HTML + +## Texte sur un chemin + +La balise `textPath` prend comme référence `href` un chemin visible ou non et permet d'écir le long de celui-ci + + + +```svg + + + + Les coïncidences, me répondit mon ami, sont les pires ennemies de la vérité.. + + +``` + +## Texte libre + +la balise `foreignObject` permet d'inclure un autre document xml à l'intérieur du SVG. En l'occurence ici de l'HTML. Nous retrouvons le fonctionnement normal d'un paragraphe de texte html. + +Il est également possible d'utiliser les balises `input` des formulaires. + + + +```svg + +

Je me trouvais ...

+ + +``` \ No newline at end of file diff --git a/transformation/index.md b/transformation/index.md new file mode 100755 index 0000000..4c915c3 --- /dev/null +++ b/transformation/index.md @@ -0,0 +1,285 @@ +--- +layout: layouts/math.njk +title: Transformation +date: Last Modified + +type: post +eleventyComputed: + meta: + author: + name: "{{ metadata.author.name }}" + published: "{{ date | iso8601 }}" + modified: "{% if updateDate %}{{ updateDate | iso8601 }}{% endif %}" +--- + +## Matrice + +La matrice permet d'effectuer n'importe quelle transformation en appliquant sur les coordonnées de la forme d'origine 2 équations. + +$$ +x' = a\times x + c\times y + e +$$ + +$$ +y' = b\times x + d\times y + f +$$ + + +la fonction matrice possède 6 paramètres `matrix(a b c d e f)` + + + + +$$ +Transformation = +\begin{bmatrix} +a & c & e \\\ +b & d & f +\end{bmatrix} +$$ + +## Translation + + + +```svg + + +``` + +$$ +Translation = +\begin{bmatrix} +1 & 0 & 30 \\\ +0 & 1 & 40 +\end{bmatrix} +$$ + +$$ +x' = x + 30 +$$ + +$$ +y' = y + 40 +$$ + + + + +## Rotation + +```svg + + +``` + +$$ +Rotation = \begin{bmatrix} +cos(\alpha) & -sin(\alpha) & 0 \\\ +sin(\alpha) & cos(\alpha) & 0 +\end{bmatrix} +$$ + +$$ +x' = x\times cos(\alpha) - y\times sin(\alpha) +$$ + +$$ +y' = x\times sin(\alpha) + y\times cos(\alpha) +$$ + + + +## Échelle + +```svg + + +``` + +$$ +Échelle = +\begin{bmatrix} +0.5 & 0 & 0 \\\ +0 & 0.5 & 0 +\end{bmatrix} +$$ + +$$ +x' = x\times0.5 +$$ + +$$ +y' = y\times0.5 +$$ + + + +## Inclinaison ou cisaillement + +```svg + +``` + + + +$$ +Inclinaison = +\begin{bmatrix} +1 & tan(\alpha) & 0 \\\ +0 & 1 & 0 +\end{bmatrix} +$$ + +$$ +x' = x + y\times tan(\alpha) +$$ + +$$ +y' = y +$$ + +### Y + +$$ +Inclinaison = +\begin{bmatrix} +1 & 0 & 0 \\\ +tan(\alpha) & 1 & 0 +\end{bmatrix} +$$ + +$$ +x' = x + y\times tan(\alpha) +$$ + +$$ +y' = y +$$ + +## Multiples transformations + +Les transformations peuvent être combinés en les ajoutant les unes à la suite des autres. + +Attention toutefois le système de coordonnées tout entier est transformé lui aussi + +```svg + +``` + + + +Le déplacement en x de 40px s'effectue suivant le nouvel axe x qui a subit lui aussi une rotation de 30° + +### Multiplication de matrice + +La multiplication de matrice s'effectue en + +$$ +Resultant = +\begin{bmatrix} +a & c & e \\\ +b & d & f \\\ +0 & 0 & 1 +\end{bmatrix} +\times +\begin{bmatrix} +a' & c' & e' \\\ +b' & d' & f' \\\ +0 & 0 & 1 +\end{bmatrix} = +\begin{bmatrix} +a\times a' + c \times b' & +a \times c' + c \times d' & +a \times e' + c \times f' + e \\\ +b\times a' + d \times b' & +b \times c' + d \times d' & +b \times e' + d \times f' + f \\\ +0 & 0 & 1 +\end{bmatrix} +$$ + +$$ +Transformation = \begin{bmatrix} +cos(30) & -sin(30) & 0 \\\ +sin(30) & cos(30) & 0 \\\ +0 & 0 & 1 +\end{bmatrix} +\times +\begin{bmatrix} +1 & 0 & 40 \\\ +0 & 1 & 0 \\\ +0 & 0 & 1 +\end{bmatrix} = \begin{bmatrix} +cos(30) & +-sin(30) & +cos(30) \times 40 \\\ +sin(30) & +cos(30) & +sin(30) \times 40 \\\ +0 & 0 & 1\end{bmatrix} +$$ + + + +## Origine de la transformation + +la propriété `transform-origin` permet de sélectionner l'origine de la transformation. C'est très utile dans le cas des rotations. + +```svg + +``` + +L'origine de la transformation est située au milieu du carré. + + + +[Projection isométrique](isometric) diff --git a/transformation/isometric/index.md b/transformation/isometric/index.md new file mode 100755 index 0000000..2801e51 --- /dev/null +++ b/transformation/isometric/index.md @@ -0,0 +1,233 @@ +--- +layout: layouts/page.njk +title: Projection isométrique +date: Last Modified +--- + +La perspective isométrique est une méthode de représentation en perspective (3D) dans laquelle les trois directions de l'espace sont représentées avec la même importance, d'où le terme. Les lignes parallèles le restent il n'y a pas de point de fuite comme dans la perspective cavalière. + +### Méthode 1 + + + +1ère étape : **Rotation de 45°** + + + +2e étape : **Déformation** + +Pièce|X %|Y % +---|--:|--: +Rouge|100|57.73 +Bleu|57.73|100 +Vert|57.73|100 + +Il faut prendre soin d'appliquer la transformation depuis le centre des pièces. Sachant qu'après la rotation de 45°, ce sont les diagonales qui sont suivant les axes de X et Y.\ +Le centre est situé à côté * √2 / 2 + + + +3e étape : **Rotation** + +Pièce|Angle +---|--: +Rouge|0 ° +Bleu|-30 ° +Vert|30 ° + +La encore il faut choisir avec soin l'origine de la transformation. il faut sélectionner les points en commun avec 2 côtés. + + + +```svg + +``` + +http://www.enjoythisbeautifulday.com/how-to/isometric/ + +### Méthode 2 + +Cette méthode est un peu plus simple car il n'y a qu'une seule origine pour toute les transformations. + + + +1ère étape : **Déformation** de 86.603% (cos(30°)) en hauteur + + + +2e étape : **cisaillement** de 30° + +Pièce|Angle +---|--: +Rouge|-30 ° +Bleu|30 ° +Vert|-30 ° + + + +3e étape : **rotation** + +Pièce|Angle +---|--: +Rouge|30 ° +Bleu|30 ° +Vert|-30 ° + + + +```svg + +``` + +https://nicoguaro.github.io/posts/isometric_inkscape2/ + + + +### Méthode 3 + +En combinant les transformations successives dans une matrice résultantes + +matrix(1 0.5 -1 0.5 0 -50)\ +matrix(1 0.5 0 1 -100 -100)\ +matrix(1 -0.5 0 1 -100 100) + + + +```svg + +``` + +https://bl.ocks.org/helderdarocha/8b28505082bf1c81977d7dec797686c7 + +https://design.tutsplus.com/tutorials/how-to-create-advanced-isometric-illustrations-using-the-ssr-method--vector-1058 + + +https://design.tutsplus.com/fr/tutorials/quick-tip-how-to-create-an-isometric-grid-in-less-than-2-minutes--vector-3831 \ No newline at end of file diff --git a/utilisation/illustration.svg b/utilisation/illustration.svg new file mode 100755 index 0000000..add0037 --- /dev/null +++ b/utilisation/illustration.svg @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/utilisation/index.md b/utilisation/index.md new file mode 100755 index 0000000..a372044 --- /dev/null +++ b/utilisation/index.md @@ -0,0 +1,103 @@ +--- +layout: layouts/page.njk +title: Utilisation d'une illustration SVG +style: utilisation.css +date: Last Modified +--- + +## Image + +Une illustration SVG peut être utilisée comme source d'un élément `` + +```html +

+``` + +

+ +## CSS + +Une illustration SVG peut être utilisée comme source pour une image de fond dans du style CSS + +En utilisant un fichier externe il est possible d'utiliser une portion personnalisée de l'illstration SVG en spécifiant un paramètre [fragment](../fragment) + +```css +.bloc { + background:url(illustration.svg); +} + +.bloc3 { + background:url(illustration.svg#part3); +} +``` + +

+ +### Comme data URI encodé en base 64 + +[https://www.base64encode.org/](https://www.base64encode.org/) + +L'avantage est que tout est dans un seul fichier, la feuille de style. Il n'ya qu'une requête HTTP à faire et qu'un seul fichier à utiliser +L'encodage en base 64 permet de coder les informations avec des caractères **sûrs** qui n'entraineront pas des effets innatendus (fermeture de balise, guillements, caractère spéciaux). L'inconvénients est que la le nombre de caractères nécessaires est plus élevé de 20 à 30 % par rapport à l'information initiale et que la chaine est totalement illisible. + +```css +.bloc { +background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSI+CiAgPGNpcmNsZSBjeD0iMTUwIiBjeT0iNzUiIHI9IjcwIiBmaWxsPSIjM2VkMTI0Ii8+Cjwvc3ZnPg==); +} +``` + +

+ +Si vous souhaitez mettre la chaine de caractère base 64 sur plusieurs lignes. Il faut entourer la chaine par des guillemets et ajouter un caractère `\` avant chaque retour à la ligne. + +```css +background-image: url("data:image/svg+xml;base64,\ +PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdm\ +ciIHZlcnNpb249IjEuMSI+CiAgPGNpcmNsZSBjeD0iMTUwIiBj\ +eT0iNzUiIHI9IjcwIiBmaWxsPSIjM2VkMTI0Ii8+Cjwvc3ZnPg=="); +``` + +

+ +### data URI + +Le code source SVG peut être mis directement comme data URI. Il faut faire attention au guillements simples / doubles à l'intérieur de la chaine uri. Il faut aussi échapper les caractères spéciaux qui ont une signification particulière en css comme le # codé en %23 + +Là aussi les retours à la ligne sont représentés par des `\` + +Le code est plus lisible + +```css +.bloc { +background-image: url("data:image/svg+xml,\ + " +} +``` + +

+ +## favicon + +Comme icône favorie d'onglet. Avec l'avantage de pouvoir à l'aide des média queries CSS d'adapter l'aspect de l'icone en fonction des situations + +[https://css-tricks.com/svg-favicons-and-all-the-fun-things-we-can-do-with-them/](https://css-tricks.com/svg-favicons-and-all-the-fun-things-we-can-do-with-them/) + +## En ligne + +directement en incorporant le code svg au milieu de la page html + +```html +

+ +

+``` + + + +C'est de loin la méthode la plus intéressante car avec cette technique la portion SVG est accessible par la feuille de style CSS de la page ainsi que par le javascript. diff --git a/utilisation/utilisation.css b/utilisation/utilisation.css new file mode 100755 index 0000000..889c294 --- /dev/null +++ b/utilisation/utilisation.css @@ -0,0 +1,27 @@ +.bloc { + width: 300px; + height: 150px; + background-repeat:none +} + +.ext { + background:url(illustration.svg); +} + +.uriM { + background-image: url("data:image/svg+xml,\ + "); +} + +.b64 { +background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSI+CiAgPGNpcmNsZSBjeD0iMTUwIiBjeT0iNzUiIHI9IjcwIiBmaWxsPSIjM2VkMTI0Ii8+Cjwvc3ZnPg==); +} + +.b64M { +background-image: url("data:image/svg+xml;base64,\ +PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdm\ +ciIHZlcnNpb249IjEuMSI+CiAgPGNpcmNsZSBjeD0iMTUwIiBj\ +eT0iNzUiIHI9IjcwIiBmaWxsPSIjM2VkMTI0Ii8+Cjwvc3ZnPg=="); +} \ No newline at end of file diff --git a/wasp-illustration.svg b/wasp-illustration.svg new file mode 100755 index 0000000..d1b6dd7 --- /dev/null +++ b/wasp-illustration.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/wasp-simple.svg b/wasp-simple.svg new file mode 100755 index 0000000..b8ea90a --- /dev/null +++ b/wasp-simple.svg @@ -0,0 +1,29 @@ + + \ No newline at end of file diff --git a/wasp.jpg b/wasp.jpg new file mode 100755 index 0000000..43cc2a2 Binary files /dev/null and b/wasp.jpg differ diff --git a/wasp.png b/wasp.png new file mode 100755 index 0000000..ac1179e Binary files /dev/null and b/wasp.png differ diff --git a/wasp.svg b/wasp.svg new file mode 100755 index 0000000..511dfd8 --- /dev/null +++ b/wasp.svg @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/zone/index.md b/zone/index.md new file mode 100755 index 0000000..a401805 --- /dev/null +++ b/zone/index.md @@ -0,0 +1,191 @@ +--- +layout: layouts/page.njk +title: Zone d'affichage et zone de travail +date: Last Modified +--- + +## Zone d'affichage +Le **viewport** est la zone d'affichage visible d'une illustration SVG. +Le viewport est défini grâce aux propriétés `height` et `width` de l’élément racine ` + + + + +

	xMin	xMid	xMax
yMin	xMinYMin	xMidYMin	xMaxYMin
yMid	xMinYMid	xMidYMid	xMaxYMid
xMax	xMinYMax	xMidYMax	xMaxYMax

+ +## remplissage + +Si nous voulons remplir complétement le viewport sans ajouter aucune marge il faut ajouter le mot clé `slice` au viewbox. La forme est coupée au besoin, et l'ensemble du viewport est rempli par la zone du viewbox sans aucune marge. + +Dans ce cas c'est le facteur d'échelle le plus grand qui est pris en compte. + +Le placement s'effectue avec les mots clés xM..yM.. qui permettent de choisir la zone à sélectionner et celle à évacuer. + +```svg +