Récupération du cours SVG
This commit is contained in:
65
exercices/vision/index.md
Executable file
65
exercices/vision/index.md
Executable file
@@ -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
|
||||
|
||||
|
||||
|
||||
<a href="street1.jpg" download>photo 1</a>
|
||||
|
||||
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
|
||||
|
||||
|
||||
|
||||
<a href="street2.jpg" download>photo 2</a>
|
||||
|
||||
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)
|
||||
BIN
exercices/vision/photo1.jpg
Executable file
BIN
exercices/vision/photo1.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
BIN
exercices/vision/photo2.jpg
Executable file
BIN
exercices/vision/photo2.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
80
exercices/vision/reponse1.md
Executable file
80
exercices/vision/reponse1.md
Executable file
@@ -0,0 +1,80 @@
|
||||
---
|
||||
layout: layouts/page.njk
|
||||
title: SVG - Exercice - Filtre
|
||||
---
|
||||
|
||||
|
||||
SVG couvrant toute la page
|
||||
|
||||
```html
|
||||
<svg height="100%" width="100%">
|
||||
</svg>
|
||||
```
|
||||
|
||||
Photo et rectangle noir par dessus
|
||||
|
||||
```svg
|
||||
<image href="street1.jpg" height="100%" width="100%" />
|
||||
<rect width="100%" height="100%" />
|
||||
```
|
||||
|
||||
Dégrédé radial
|
||||
|
||||
```svg
|
||||
<radialGradient id="Gradient" r="0.4">
|
||||
<stop offset="0%" stop-color="white"/>
|
||||
<stop offset="20%" stop-color="white"/>
|
||||
<stop offset="100%" stop-color="black"/>
|
||||
</radialGradient>
|
||||
|
||||
```
|
||||
|
||||
```svg
|
||||
<mask id="masque">
|
||||
<circle id="centre" r="2%" fill="url(#Gradient)" />
|
||||
</mask>
|
||||
```
|
||||
|
||||
Ajouter le masque sur le rectangle noir
|
||||
|
||||
```svg
|
||||
<rect width="100%" height="100%" mask="url(#masque)" />
|
||||
```
|
||||
|
||||
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
|
||||
<svg height="100%" width="100%">
|
||||
<defs>
|
||||
<radialGradient id="Gradient" r="0.4">
|
||||
<stop offset="0%" stop-color="white"/>
|
||||
<stop offset="20%" stop-color="white"/>
|
||||
<stop offset="100%" stop-color="black"/>
|
||||
</radialGradient>
|
||||
<mask id="masque">
|
||||
<circle id="centre" cx="512" cy="342" r="20%" fill="url(#Gradient)" />
|
||||
</mask>
|
||||
</defs>
|
||||
<image href="street1.jpg" x="0" y="0" height="100%" width="100%" />
|
||||
<rect width="100%" height="100%" mask="url(#masque)" />
|
||||
</svg>
|
||||
<script>
|
||||
document.body.onmousemove = event =>
|
||||
{
|
||||
document.getElementById("centre").setAttribute("cx", event.clientX );
|
||||
document.getElementById("centre").setAttribute("cy", event.clientY );
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Voir la [solution](solution)
|
||||
116
exercices/vision/reponse2.md
Executable file
116
exercices/vision/reponse2.md
Executable file
@@ -0,0 +1,116 @@
|
||||
---
|
||||
layout: layouts/page.njk
|
||||
title: SVG - Exercice - Filtre
|
||||
---
|
||||
|
||||
SVG couvrant toute la page
|
||||
|
||||
```html
|
||||
<svg height="100%" width="100%">
|
||||
</svg>
|
||||
```
|
||||
|
||||
Le filre flou
|
||||
|
||||
```svg
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="8" result="flou"/>
|
||||
```
|
||||
|
||||
Le filtre baisse de contraste
|
||||
|
||||
```svg
|
||||
<feColorMatrix type="matrix" values="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"
|
||||
in="flou"">
|
||||
</feColorMatrix>
|
||||
```
|
||||
|
||||
Les 2 combinés
|
||||
|
||||
```svg
|
||||
<filter id="flou">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="8" result="flou"/>
|
||||
<feColorMatrix type="matrix" values="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"
|
||||
in="flou"">
|
||||
</feColorMatrix>
|
||||
</filter>
|
||||
```
|
||||
|
||||
Le dégradé
|
||||
|
||||
```svg
|
||||
<radialGradient id="Gradient" cx="0.5" cy="0.5" r="0.5">
|
||||
<stop offset="0%" stop-color="white"/>
|
||||
<stop offset="100%" stop-color="black"/>
|
||||
</radialGradient>
|
||||
```
|
||||
|
||||
Le masque
|
||||
|
||||
```svg
|
||||
<mask id="masque">
|
||||
<circle id="centre" cx="512" cy="342" r="40%" fill="url(#Gradient)" />
|
||||
</mask>
|
||||
```
|
||||
|
||||
La première photo avec le flou
|
||||
|
||||
```svg
|
||||
<image href="street2.jpg" height="100%" width="100%" filter="url(#flou)" />
|
||||
```
|
||||
|
||||
La deuxième photo nette mais avec un masquage
|
||||
|
||||
```svg
|
||||
<image href="street2.jpg" height="100%" width="100%" mask="url(#masque)" />
|
||||
```
|
||||
|
||||
### 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
|
||||
<svg height="100%" width="100%">
|
||||
<defs>
|
||||
<filter id="flou">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="8" result="flou"/>
|
||||
<feColorMatrix type="matrix" values="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" in="flou"">
|
||||
</feColorMatrix>
|
||||
</filter>
|
||||
<radialGradient id="Gradient" cx="0.5" cy="0.5" r="0.5">
|
||||
<stop offset="0%" stop-color="white"/>
|
||||
<stop offset="100%" stop-color="black"/>
|
||||
</radialGradient>
|
||||
<mask id="masque">
|
||||
<circle id="centre" cx="512" cy="342" r="40%" fill="url(#Gradient)" />
|
||||
</mask>
|
||||
</defs>
|
||||
<image href="street2.jpg" height="100%" width="100%" filter="url(#flou)" />
|
||||
<image href="street2.jpg" height="100%" width="100%" mask="url(#masque)" />
|
||||
</svg>
|
||||
<script>
|
||||
document.body.onmousemove = event =>
|
||||
{
|
||||
document.getElementById("centre").setAttribute("cx", event.clientX );
|
||||
document.getElementById("centre").setAttribute("cy", event.clientY );
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Voir la [solution](solution)
|
||||
36
exercices/vision/solution1.html
Executable file
36
exercices/vision/solution1.html
Executable file
@@ -0,0 +1,36 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>SVG Image</title>
|
||||
<style>
|
||||
body { margin: 0 }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<svg height="100%" width="100%">
|
||||
<defs>
|
||||
|
||||
<radialGradient id="Gradient" r="0.4">
|
||||
<stop offset="0%" stop-color="white"/>
|
||||
<stop offset="20%" stop-color="white"/>
|
||||
<stop offset="100%" stop-color="black"/>
|
||||
</radialGradient>
|
||||
|
||||
<mask id="masque">
|
||||
<circle id="centre" cx="512" cy="342" r="20%" fill="url(#Gradient)" />
|
||||
</mask>
|
||||
</defs>
|
||||
<image href="../street1.jpg" x="0" y="0" height="100%" width="100%" />
|
||||
<rect width="100%" height="100%" mask="url(#masque)" />
|
||||
|
||||
</svg>
|
||||
<script>
|
||||
document.body.onmousemove = event =>
|
||||
{
|
||||
document.getElementById("centre").setAttribute("cx", event.clientX );
|
||||
document.getElementById("centre").setAttribute("cy", event.clientY );
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
45
exercices/vision/solution2.html
Executable file
45
exercices/vision/solution2.html
Executable file
@@ -0,0 +1,45 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>SVG Image</title>
|
||||
<style>
|
||||
body { margin: 0}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<svg height="100%" width="100%">
|
||||
<defs>
|
||||
<filter id="flou">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="8" result="flou"/>
|
||||
<feColorMatrix type="matrix" values="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" in="flou"">
|
||||
</feColorMatrix>
|
||||
</filter>
|
||||
|
||||
<radialGradient id="Gradient" cx="0.5" cy="0.5" r="0.5">
|
||||
<stop offset="0%" stop-color="white"/>
|
||||
<stop offset="100%" stop-color="black"/>
|
||||
</radialGradient>
|
||||
|
||||
<mask id="masque">
|
||||
<circle id="centre" cx="512" cy="342" r="40%" fill="url(#Gradient)" />
|
||||
</mask>
|
||||
|
||||
</defs>
|
||||
<image href="../street2.jpg" x="0" y="0" height="100%" width="100%" filter="url(#flou)" />
|
||||
<image href="../street2.jpg" x="0" y="0" height="100%" width="100%" mask="url(#masque)" />
|
||||
|
||||
</svg>
|
||||
<script>
|
||||
document.body.onmousemove = event =>
|
||||
{
|
||||
document.getElementById("centre").setAttribute("cx", event.clientX );
|
||||
document.getElementById("centre").setAttribute("cy", event.clientY );
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
exercices/vision/street1.jpg
Executable file
BIN
exercices/vision/street1.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
BIN
exercices/vision/street2.jpg
Executable file
BIN
exercices/vision/street2.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 355 KiB |
Reference in New Issue
Block a user