forked from Open-CT/openct-tasks
210 lines
8.3 KiB
HTML
210 lines
8.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=770, initial-scale=1.0">
|
|
<title>Image pixellisée</title>
|
|
<script>
|
|
window.stringsLanguage = 'fr';
|
|
</script>
|
|
<script class="remove" type="text/javascript" src="../../../_common/modules/pemFioi/importModules-1.1_M.js" id="import-modules"></script>
|
|
<script class="remove" type="text/javascript">
|
|
var modulesPath = '../../../_common/modules';
|
|
importModules([
|
|
'jquery-1.7.1', 'jquery-ui.touch-punch', 'raphael-2.1', 'JSON-js', 'jschannel',
|
|
'beav-1.0', 'beaver-task-2.0', 'simulation-2.0', 'raphaelFactory-1.0',
|
|
'delayFactory-1.0', 'simulationFactory-1.0', 'raphaelButton-1.0',
|
|
'platform-pr', 'buttonsAndMessages', 'installationAPI.01', 'miniPlatform',
|
|
'taskStyles-0.1', 'randomGenerator-1.0', 'drag_lib-2.0', 'shape-paths',
|
|
// 'graph-1.0', 'visual-graph-1.1'
|
|
'grid-1.0'
|
|
]);
|
|
</script>
|
|
<script class="remove" type="text/javascript">
|
|
var json = {
|
|
"id": "http://castor-informatique.fr/tasks/2012/2012-AT-04/",
|
|
"language": "fr",
|
|
"version": "fr.01",
|
|
"authors": "France-ioi",
|
|
"translators": [ ],
|
|
"license": "CC BY-SA 3.0",
|
|
"taskPathPrefix": "",
|
|
"modulesPathPrefix": "",
|
|
"browserSupport": [ ],
|
|
"acceptedAnswers": [
|
|
"111111000011110001110111100000011101110001110111111111000011"
|
|
]
|
|
};
|
|
</script>
|
|
<script type="text/javascript" src="task.js"></script>
|
|
<script type="text/javascript">
|
|
var taskStrings = {
|
|
success: "Bravo, vous avez réussi !",
|
|
failure: "Ce n'est pas la bonne réponse.",
|
|
errorBlack: "Une des cases noircies ne contient pas de morceau de trait noir.",
|
|
errorWhite: "Certaines cases qui contiennent un morceau de trait noir n'ont pas été noircies.",
|
|
errorBlackHard: "Une des cases coloriées en noir contient moins de 2 tiers de bleu.",
|
|
errorWhiteHard: "Une case contenant plus d'un tiers de bleu n'est pas coloriée.",
|
|
errorGreyWhite: "Une des cases coloriées en gris contient moins d'un tiers de bleu.",
|
|
errorGreyBlack: "Une des cases coloriées en gris contient plus de 2 tiers de bleu."
|
|
};
|
|
</script>
|
|
<style type="text/css">
|
|
#container {
|
|
margin: 1em auto;
|
|
position: relative;
|
|
}
|
|
canvas {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 0;
|
|
}
|
|
#paper {
|
|
z-index: 10;
|
|
}
|
|
#error {
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="task">
|
|
<h1>Image pixellisée</h1>
|
|
<div id="tabsContainer"></div>
|
|
<div id="taskContent">
|
|
<div id="zone_1">
|
|
<div class="consigne">
|
|
<p>Castor veut dessiner un poisson sur son ordinateur.</p>
|
|
|
|
<center>
|
|
<img src="fish.png" style="width:100px"/>
|
|
</center>
|
|
|
|
<p>Cependant, son ordinateur est assez vieux, et il ne permet d'enregistrer qu'un petit nombre
|
|
de « pixels » (les petits carrés qui constituent une image numérique).</p>
|
|
|
|
<p>Aidez Castor à créer son image. Pour cela, <strong class="easy medium">noircissez toutes les cases de la grille qui contiennent un morceau de trait noir du poisson.</strong><span class="hard">remplissez les cases qui contiennent un morceau de dessin selon les règles suivantes:</span> <ul class="hard"><li>Si plus des 2 tiers de la case sont bleus, coloriez la en noir,</li><li>Si plus d'un tiers mais moins des 2 tiers de la case sont bleus, coloriez la en gris.</li></ul> Les autres cases doivent rester blanches.</p>
|
|
</div>
|
|
</div>
|
|
<div id="zone_2">
|
|
<div id="container">
|
|
<canvas></canvas>
|
|
<div id="paper"></div>
|
|
</div>
|
|
<div id="error"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <img style="display: none;" src="fish.png" id="fish" /> -->
|
|
</div><!-- task -->
|
|
<div id="solution">
|
|
<div class="explications">
|
|
<h2>La solution</h2>
|
|
|
|
<p>Il fallait noircir les cases de la grille comme montré ci-dessous.<br />
|
|
<img src="2012-AT-04-solution.png" />
|
|
</p>
|
|
|
|
|
|
<h2>C'est de l'informatique </h2>
|
|
|
|
<p>Cette tâche fait manipuler une notion utile en <strong>infographie</strong>, domaine de l'informatique qui consiste à créer, mémoriser et transformer des images avec des dispositifs informatisés. L'image construite dans cet exemple est une <strong>image pixellisée</strong>, ou image <em>bitmap</em>. C'est-à-dire qu'elle est constituée d'un ensemble de points (pixels) placés sur une grille. Chaque point possède le code de sa couleur. Dans l'exemple, il n'y a que deux couleurs : noir et blanc. Pour mémoriser une telle image, il suffit de mémoriser pour chaque point ses coordonnées dans la grille et le code de sa couleur. L'image sera d'autant plus précise que la grille sera très fine, c'est-à-dire comportera beaucoup de points. Sur l'exemple, l'image obtenue est peu précise car la grille utilisée est assez grossière.</p>
|
|
|
|
<h2>Culture informatique </h2>
|
|
|
|
<p>
|
|
Il y a deux manières principales de représenter des images de manière numérique :
|
|
</p>
|
|
<ul>
|
|
<li><strong>Les images pixellisée</strong>, obtenues en découpant une image en cases et en stockant la couleur de chaque case.</li>
|
|
<li><strong>Les images vectorielles</strong>, obtenues en construisant l'image à partir de formes mathématiques (carrés, segments, élipses, arcs de cercles, ...) et d'indications sur la couleur des zones délimitées par ces formes.</li>
|
|
</ul>
|
|
|
|
<p>Avec une image pixellisée, dès que l'on zoom un peu trop, on voit apparaître des carrés. Au contraire, avec des images vectorielles, on peut zoomer autant que l'on veut, l'image reste toujours parfaitement nette.
|
|
</p>
|
|
<p>
|
|
Regardons par exemple la différence avec le logo du concours Castor, en comparant
|
|
une image pixellisée avec une image vectorielle du même Castor.
|
|
Tant qu'on ne zoom pas, il n'y a aucune différence à l'affichage.
|
|
</p>
|
|
|
|
<style>
|
|
.solution
|
|
{
|
|
width:770px;
|
|
border-collapse:collapse;
|
|
}
|
|
.solution tr td
|
|
{
|
|
padding:0.5em;
|
|
text-align:center;
|
|
border:1px solid black;
|
|
}
|
|
.solution tr td img
|
|
{
|
|
border:0px solid black;
|
|
}
|
|
|
|
.solution-title {
|
|
padding:0.5em;
|
|
font-size:x-large;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|
|
<table class="solution">
|
|
<tr>
|
|
<td colspan="2" style="width:335px"><b>Image pixellisée, pas de zoom</b></td>
|
|
<td colspan="2" style="width:335px"><b>Image vectorielle, pas de zoom</b></td>
|
|
</tr>
|
|
<tr><td colspan="2"><img src="vec1-solution.png" style="" /></td><td colspan="2"><img src="pix1-solution.png" style=""></td></tr>
|
|
</table>
|
|
|
|
<p>
|
|
En revanche, dès que l'on zoom, on voit clairement apparaître l'intérêt de l'image vectorielle.
|
|
</p>
|
|
|
|
<table class="solution">
|
|
<tr>
|
|
<td colspan="2" style="width:335px"><b>Image pixellisée, zoom 6x</b></td>
|
|
<td colspan="2" style="width:335px"><b>Image vectorielle, zoom 6x</b></td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2">
|
|
<img src="solution-zoomX6-pix.png" style="width:330px">
|
|
</td>
|
|
<td colspan="2">
|
|
<img src="solution-zoomX6-vec.png" style="width:330px">
|
|
</td></tr>
|
|
</table>
|
|
|
|
<p>
|
|
Pour limiter l'effet de la pixellisation, la plupart des logiciels modernes
|
|
comme les logiciels de photos ou bien les navigateurs web utilisent une technique
|
|
d'<b>interpolation</b> pour essayer de rendre les contours plus continus.
|
|
Cette technique permet de zoomer dans les images pixellisées sans faire
|
|
apparaître de carrés, comme illustré ci-dessous à gauche.
|
|
Néanmoins le résultat n'est jamais aussi net qu'avec
|
|
une image vectorielle.
|
|
</p>
|
|
|
|
<table class="solution">
|
|
<tr>
|
|
<td style="width:335px"><b>Image pixellisée, zoom 6x avec interpolation</b></td>
|
|
<td style="width:335px"><b>Image vectorielle, zoom 6x</b></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<img src="solution-zoomX6-pixInter.png" style="width:330px">
|
|
</td>
|
|
<td>
|
|
<img src="solution-zoomX6-vec.png" style="width:330px">
|
|
</td></tr>
|
|
</table>
|
|
|
|
|
|
</div>
|
|
</div> <!-- task-solution -->
|
|
</body>
|
|
</html>
|