63 lines
No EOL
13 KiB
HTML
63 lines
No EOL
13 KiB
HTML
<!DOCTYPE html>
|
|
<!-- Page generated by OCaml with Ocsigen.
|
|
See http://ocsigen.org/ and http://caml.inria.fr/ for information -->
|
|
<html class="ada2" lang="fr" id="h" xmlns="http://www.w3.org/1999/xhtml"><head><title>Partie 2 (3H environ) : Manipulation d'image</title><meta content="text/html; charset=utf-8" http-equiv="content-type"/><link media="all" href="../ystyle.css" rel="stylesheet"/><script src="../Scripts/yfold.js"></script></head><body><div class="header" id="header"><h1 id="title">Partie 2 (3H environ) : Manipulation d'image</h1><nav><a class="caml_c" title="Back to main page" href="tps.html" data-eliom-c-onclick="XZ0PS9odE233"></a></nav></div><main><section class="yfold"><h2 class="yfold-title" onclick="toggleYfold('12e7899e')"><span class="arrow" id="arrow-12e7899e">▸</span>Objectifs</h2><div class="yfold-content" id="content-12e7899e" data-yfold-default="show"><ul class="goals"><li>Afficher et transformer une image (parcours d'image et utilisation de l'acteur graphique.)</li></ul><h4>Prérequis</h4><ul class="requires"><li>Vous avez terminé <a class="caml_c" href="tp-m1.html" data-eliom-c-onclick="Fji4IwKNfYi2">la première partie sur les caractères</a></li><li>Vous savez qu'une image est composée de points colorés appelés <i>pixels</i>. </li></ul></div><script>
|
|
//<![CDATA[
|
|
initYfold('12e7899e') ;
|
|
//]]>
|
|
</script></section><section class="yfold"><h2 class="yfold-title" onclick="toggleYfold('56c6586d')"><span class="arrow" id="arrow-56c6586d">▸</span>Mission 2</h2><div class="yfold-content" id="content-56c6586d" data-yfold-default="hide"><p>Nous nous intéressons maintenant à la manipulation d'images.</p><section class="yfold card"><h4 class="yfold-title" onclick="toggleYfold('903b1d78')"><span class="arrow" id="arrow-903b1d78">▸</span>Etape 1</h4><div class="yfold-content" id="content-903b1d78" data-yfold-default="hide"><pre class="inv-ascii">((*<<)*>:)<<</~~^/:\::;^:/\\\:~v;*/vv;\)*()v/\/(\((v(:^:v(+)/+:~:/(+(;;v~:::(//:)++:)/::r(\)/
|
|
<(<<>)<<:/:lr)+!~;(:/\\;:v\://i</</(*;\v))<*+/:)()vv</~:(*+):~)~\;v/v\iv~:::(;/:*;\:(\(:/)/(/
|
|
<<<<<<<~=<nCsp]=~+\CpSyZt^://;/\i)/<*~//(><(;<<></(><:~/vv~)/~(;/;(/*:;<~:::(//:);/:(/(:i*/)\
|
|
<)<<<vr/V3VP&&3>~<>;~\:r+(\;r;:=:::**~\:*<<:(<<<<;(<<)~~*v~((~:;;+:;*:;*^::;/;/+*+r:)/):/)/v/
|
|
<)>*~x&&t*h?rT+/~.~~'^=~;v:;r/;~>;*;)~;)<<>:v<<><):<<(~~<*~(*~(\;\;\*~'^-\(` _:'''^+*::*\)/
|
|
<<<^x3&&&Gst*+^' `<! -\:\)+|<+*/>i;)><<(><<<<</<<+^^/;^;(^(\;/;i:.,` ` ```_.+(::(/*:
|
|
<*<^2VVVsJri'. -.=!.`` -vr*+;</</>i;(<x<v<>><x<+*~.',-^,(/!(:\::/v\:<^~^---.;://<)/<::<:*v
|
|
<v<*:vvv;:~' ,` _.</~~++(v<;;>r</<;;v<>x:<<x><*;*^-.',~v(+~*/;/:\>/r^' ',` `=:<(/>v:<(v:
|
|
>*<<x<<<*)(+ .=+-\+:~~(~<v<;i>L<r<)v>x<f>:<<><~:(\^=;^^((~~v/;/(+<\:\':):' '/:>::v/:((*)
|
|
<vx<<<<<(((|l' f}/sL^\^~*;*:>~ixewvxe4Gexzsrv)>(~*<v*/v:!~*/~*+:/*/>/r<~()\ -/:<(:*v:((v:
|
|
<)<<<<<<(*)(i~ `|ivw~>:~;*/(:>L::(<Ls&K0aa0Gkx):/~)****v(/^<:~(~(/*\v:r<i((:. +;;/::v/(::(/
|
|
</><<<<(:(**()`_FoVr~(\^;*\:;a&2Y(xr<sF}s2333s*><~:((v(/<:^<*~)+(~*=v:;*~():;` .` `,~(/:::(\
|
|
>/<<<:(:~~~::/,/~sT;~;^'~(/:+fFF?1xLCy&&&000P<JZC:)**v(:<:^<*~(|v+:;::~-`,^~^- ` `--`-\/:/:\:
|
|
<v</^/0^!..,'~++,~+()(^.;;;;ixo0&g&m&gX&&04k<(::\+(<<<(:((^((~v~<r(+/;```.!_' . -. -\(//:/
|
|
<(~.~\V^^^.,,```_~i::/~^;(\;iV0XX555555g&3Gkx>;~;;<<<><v((~)v=>+<\T~:!''.;\`` ~i| =\(/):/
|
|
<(,^=+/((~ ^' `~=~/++^-^^^^^/T~T5XXX&&&3S000Sr/;\<<>>>v;:~;T~:~:~\!^' '^~~ `:/- ^/:/v::
|
|
<;:(>(v)~ ` :x^;;.`,`'`.._/*fVh(*V&300HX&&[+;;oo*<v://^i\~/^/^` ` ,`_+!' ^!=`` `'~(::
|
|
(:<(*:v)` '` +x~irv'^!.=^!^^'~;^zw4O&&&0&4&*i*4&p<*()\/~;:~:^\~+..=~~--/v -/!;'~!_.,/;/
|
|
)((()(())+T~x):;=xl/(+=+.^~~~;^xw&ggggXXXO300P1zxf>>**((\)/~(~\!/^~+|/~!` '' `` '-` `\;)\:+:
|
|
(:(//::)(~,-,```/>|'|:r=/C(I(~v&X5XgX&XXb&P}C4&&3af<**<)r*(~(^\|/^~~|/+- `!::;` '~\;\/(~:
|
|
)*(::::::,```/',^+\i+'<++<>\!(*4P4Y30230S0mkqXX&0Z><*>*)~*(~*~/!;^+!+:' .::\/(/` -i\/:/(;:
|
|
<<(:/://:^```,',,`-\)\!.!~i~~(/C<>>hy000S0k<xVaPF\:**<*(~((~(|/!:~+|iv.` ,((:/:)(| +/:(/:/:
|
|
xzjjv<v(/!' `!,-|-i>xv~:(\:<o*>^{{x~<CFFxsxxv~~~~;/<<*:~(:~v!(~:~;|+v+` ;:::/:::/ .;:::://:
|
|
XX&&XX&X&k'` `qpx.^,<suswkC}uz:x;j)<~<x^shkx>:^~~^;\<<(v~)(~v!/!(~/+~)- ^/://;(:/` ^;(//;/\\
|
|
XXXXXXXXXk`' +&&r,''+VXX55gggg5g5gggg555XX&&2aapwpppwwwuwsusLxIxL>:;>` -;;+/;\:_ +;\~~^+;
|
|
XXXXXXXXX&o+```sXk,~`'`^0g55555g555555gg55gg55555555555555g550k?r~~^!|iLna&0Ps*r^-_.=ouoL::~~
|
|
X5XXXX5XXXk_``=&X5S&s```)X55555gg5555555g555555555gg2k7T\~'^!|icop&&X0V?T~'_=:xs2g55g5gg55gg5
|
|
XX555XgXXF>vi.&XXgX&Y'``aXgg5X5555555555550VF*\~',-_!icop05ggg0h*r~'_.;ns4ggggg5g55555g555555
|
|
XXXXXXXXS?&X[^aXXXXf\=.~&555XXX550sF*r^,,_.|ivnsa&g5g53VF*\~'.=Lnsmggg55g5g55555g55gg5g555555
|
|
XXXXXXXX/T(T~0XXXXPs&(f^w7T;^',_'_|=Lco0g5g55g5&UF*\^''=ixs0g5gg555555g555g55g55g5555g55g5g55
|
|
XXXXXXXe~~``*r~/h?~*Y+! `!iLxopSX55555&aF*~'-'.=Lxsa&5555g555g5555555g5ggg55gg55555555555555
|
|
XXXX&&p\T-`.````_.,i,`oP3XXX5gXgGk*~',``_|ivzp&g55555g55555555g5555555g555555555555555g5g5555
|
|
XXX4:~o=-_ivnw0XXr+-``'~?*T~,,,``_!ivo3gg5gg555555g55ggg5gg555555g55555g5gg5555g5555555555555
|
|
XXX&ppXXXXXX&FfkF-~,r-````_|:xsS55gg5g555g555555555555555555g555555g5g5g5555555g555555555g555
|
|
XXXgXXXggXXXk1*0&si~\vopXg55g555g5555g55555g55555g5g555g555555555555g555g55g55555555g555g5555
|
|
</pre><ul class="steps"><li>Dans votre dossier algo2, copiez une image <b>JPG</b> de bon goût, de taille maximale 800x600 <b>qui n'ait aucun axe de symétrie. </b>À défaut, prenez cette <a class="caml_c" href="../Images/mononoke.jpg" data-eliom-c-onclick="UBZyB+4Y8Xzo">affiche de film</a> <i>(clic-droit sur le lien : enregistrer la cible du lien...)</i></li><li><span class="difficulty"><img style="width:16px;height:16px;" alt="Star" src="../Images/etoile.png"/></span>Écrivez un nouveau programme <var>Mission2</var>, ajoutez une procédure <code class="block">Afficher_Image</code> qui prend en argument une image (de type <var class="type">T_Image</var>) et qui l'affiche. <br/>Le type <var class="type">T_Image</var> est défini dans l'<a class="file caml_c" href="acteur-jpg/jpg.ads.html" data-eliom-c-onclick="p7gl6zeocsO+">acteur JPG</a>. et l'affichage se fait grâce à l'acteur <a class="file caml_c" href="../Ada-S1/acteur-gada/gada-graphics.ads.html" data-eliom-c-onclick="o/UQ31xXFYqL">GAda.Graphics</a>. <img class="space" title="Afficher_Image" style="width:323px;height:50px;" alt="Procedure Afficher_Image" src="../Gen/Afficher_Image-1-597-.png"/></li><li>Écrivez une procédure de test <code class="block">Tester_Afficher_Image</code> qui demande à l'utilisateur de choisir un fichier jpg et qui l'affiche. <ul><li>Voyez l'acteur <a class="file caml_c" href="../Ada-S1/acteur-gada/gada-plus.ads.html" data-eliom-c-onclick="4tRBhSTRsrTF">GAda.Plus</a> pour choisir un fichier. </li><li>Rappelez-vous qu'on ne définit pas de variable de type String, seulement des constantes, avant le <code class="kw">begin</code>. </li></ul><img class="space" title="Tester_Afficher_Image" style="width:235px;height:50px;" alt="Procedure Tester_Afficher_Image" src="../Gen/Tester_Afficher_Image-0-c97-.png"/><section class="advice"><div class="content">Il n'est pas nécessaire de donner la taille d'un tableau ou d'une matrice lorsqu'on l'initialise immédiatement, par exemple <code class="block">ZImage : T_Image := <i>(quelque chose de type T_Image)</i> ;</code></div></section></li></ul></div><script>
|
|
//<![CDATA[
|
|
initYfold('903b1d78') ;
|
|
//]]>
|
|
</script></section><section class="yfold card"><h4 class="yfold-title" onclick="toggleYfold('f7c7425a')"><span class="arrow" id="arrow-f7c7425a">▸</span>Etape 2</h4><div class="yfold-content" id="content-f7c7425a" data-yfold-default="hide"><ul class="steps"><li>Modifiez la procédure <code class="inline">Afficher_Image</code> pour qu'elle prenne deux arguments supplémentaires : les coordonnées où l'on veut afficher l'image. <img class="space" title="Afficher_Image" style="width:323px;height:50px;" alt="Procedure Afficher_Image" src="../Gen/Afficher_Image-3-451-.png"/>Testez en ouvrant une fenêtre deux fois plus large et deux fois plus haute que l'image, et en affichant l'image décalée de +(120,80). Vous devez obtenir ceci : <img class="space" style="width:160px;height:200px;" alt="Exemple avec l'image originale translatée." src="../Images/image-decalee.png"/></li><li><span class="difficulty"><img style="width:16px;height:16px;" alt="Star" src="../Images/etoile.png"/></span>En créant quatre variantes de votre procédure d'affichage, afficher l'image avec différents filtres : <ul><li>Une fois en normal (Afficher_Image)</li><li>En <b>permutant les composantes</b> rouge, verte, bleue (par exemple, la composante verte prend la valeur du rouge, et la composante rouge prend la valeur du bleu, etc.).</li><li>En <b>négatif</b> (chaque composante de couleur <var>z</var> devient <var>255-z</var>)</li><li>En <b>noir et blanc</b> (tons de gris, obtenus en prenant chaque composante égale à la luminosité). <br/>La luminosité d'un pixel se calcule en faisant la moyenne des trois couleurs<small class="pcom"> (en réalité, la moyenne devrait être pondérée en fonction de la sensibilité de l'oeil humain aux différentes couleurs)</small>. <img class="space" style="width:160px;height:200px;" alt="Exemple avec quatre images dans un rectangle." src="../Images/image-4.png"/></li></ul></li><li><span class="lbutton">Facultatif</span><small class="pcom">(À laisser si vous êtes en retard) : </small><ul><li><span class="difficulty"><img style="width:16px;height:16px;" alt="Star" src="../Images/etoile.png"/><img style="width:16px;height:16px;" alt="Star" src="../Images/etoile.png"/></span><b>"Floutage" </b> (rendre l'image floue) : on rend l'image floue en remplaçant chaque pixel <var>(x,y)</var>par une moyenne des pixels situés dans un carré de taille n centré en <var>(x,y)</var>. <br/>Testez avec n = 5, 10, 20.</li><li><span class="difficulty"><img style="width:16px;height:16px;" alt="Star" src="../Images/etoile.png"/><img style="width:16px;height:16px;" alt="Star" src="../Images/etoile.png"/></span><b>Détection de contours </b> : remplacer chaque pixel par le gradient de la luminosité au point considéré. Pour ceux qui ont peur des gradients, ne prendre que le gradient horizontal, i.e. la dérivée de la luminosité selon l'axe des X. Voir filtre de Sobel sur Wikipedia.</li></ul></li></ul></div><script>
|
|
//<![CDATA[
|
|
initYfold('f7c7425a') ;
|
|
//]]>
|
|
</script></section></div><script>
|
|
//<![CDATA[
|
|
initYfold('56c6586d') ;
|
|
//]]>
|
|
</script></section><section class="yfold"><h2 class="yfold-title" onclick="toggleYfold('a94505db')"><span class="arrow" id="arrow-a94505db">▸</span>Acteurs utilisés</h2><div class="yfold-content" id="content-a94505db" data-yfold-default="hide"><ul class="file-list"><li><a class="file caml_c" href="../Ada-S1/acteur-gada/gada-graphics.ads.html" data-eliom-c-onclick="1/LiiCFvIJDC">GAda.Graphics</a></li><li><a class="file caml_c" href="../Ada-S1/acteur-gada/gada-plus.ads.html" data-eliom-c-onclick="5Pw1SA0GnL4p">GAda.Plus</a></li><li><a class="file caml_c" href="acteur-jpg/jpg.ads.html" data-eliom-c-onclick="Xjd8iD5+DhdN">JPG</a></li></ul></div><script>
|
|
//<![CDATA[
|
|
initYfold('a94505db') ;
|
|
//]]>
|
|
</script></section><section class="yfold"><h2 class="yfold-title" onclick="toggleYfold('3cc3bf0d')"><span class="arrow" id="arrow-3cc3bf0d">▸</span>Bilan</h2><div class="yfold-content" id="content-3cc3bf0d" data-yfold-default="hide"><ul class="success"><li>Vous connaissez la structure classique d'une image numérique : une matrice de point colorés (définis par trois composantes R,G,B).</li><li>Vous promettez d'être désormais rigoureux concernant les indices de lignes et de colonnes.</li></ul></div><script>
|
|
//<![CDATA[
|
|
initYfold('3cc3bf0d') ;
|
|
//]]>
|
|
</script></section></main><footer><small class="pcom"><a class="caml_c" href="../yversion.html" data-eliom-c-onclick="CHQs4AFxwlfS">Version information</a></small><a target="_blank" href="http://www.insa-toulouse.fr"><img title="INSA Toulouse" style="width:73px;height:28px;" alt="INSA logo" src="../Images/logo-insa-light.jpg"/></a><a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer"><img title="Validate css stylesheet" style="width:28px;height:32px;" alt="CSS3 logo" src="../Images/css3.png"/></a><a target="_blank" href="http://validator.w3.org/check/referer"><img title="Validate html5 content" style="width:32px;height:32px;" alt="HTML5 logo" src="../Images/html5.png"/></a></footer></body></html> |