{"id":1031,"date":"2020-01-22T18:10:19","date_gmt":"2020-01-22T17:10:19","guid":{"rendered":"http:\/\/labodemaths.fr\/WordPress3\/?p=1031"},"modified":"2020-01-22T22:04:26","modified_gmt":"2020-01-22T21:04:26","slug":"isn-animation-et-programmation-objet-en-javascript","status":"publish","type":"post","link":"https:\/\/labodemaths.fr\/WordPress3\/isn-animation-et-programmation-objet-en-javascript\/","title":{"rendered":"ISN : animation et programmation objet en Javascript"},"content":{"rendered":"\n<h3>1. Mise en place du tp<\/h3>\n\n\n\n<p>Cr\u00e9er un dossier \u00ab\u00a0Lille_sous_la_neige\u00a0\u00bb, contenant un sous-dossier \u00ab\u00a0images\u00a0\u00bb.<br>1) T\u00e9l\u00e9charger les images ci-dessous dans ce sous-dossier \u00ab\u00a0images\u00a0\u00bb :<\/p>\n\n\n\n<div class=\"wp-block-file\"><a href=\"https:\/\/labodemaths.fr\/WordPress3\/wp-content\/uploads\/2020\/01\/Lille.png\">Lille<\/a><a href=\"https:\/\/labodemaths.fr\/WordPress3\/wp-content\/uploads\/2020\/01\/Lille.png\" class=\"wp-block-file__button\" download>T\u00e9l\u00e9charger<\/a><\/div>\n\n\n\n<div class=\"wp-block-file\"><a href=\"https:\/\/labodemaths.fr\/WordPress3\/wp-content\/uploads\/2020\/01\/fond_body.png\">fond_body<\/a><a href=\"https:\/\/labodemaths.fr\/WordPress3\/wp-content\/uploads\/2020\/01\/fond_body.png\" class=\"wp-block-file__button\" download>T\u00e9l\u00e9charger<\/a><\/div>\n\n\n\n<p>2) Cr\u00e9er un fichier \u00ab\u00a0index.html\u00a0\u00bb dans votre dossier \u00ab\u00a0Lille_sous_la_neige\u00a0\u00bb et y copier le code html ci-dessous. Enregistrer votre fichier<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"fr\" >\n\n&lt;head>\n  &lt;meta charset=\"UTF-8\">\n  &lt;title>Et tombe la neige&lt;\/title>\n&lt;link rel=\"stylesheet\" href=\"style.css\">\n&lt;link href=\"https:\/\/fonts.googleapis.com\/css?family=Amatic+SC|Titillium+Web:300,700\" rel=\"stylesheet\">\n&lt;\/head>\n&lt;body >\n  &lt;div id=\"conteneur\">\n      &lt;header>\n      Winter is coming...o\u00f9 comment utiliser l'\u00e9l\u00e9ment canvas pour faire de l'animation.\n      &lt;\/header>\n     \n    &lt;article>\n           &lt;div>\n              &lt;h1>Etape 1 : Image de Lille sous la neige&lt;\/h1>\n              &lt;img src=\"images\/Lille.png\">\n           &lt;\/div>\n        &lt;\/article>\n&lt;footer>SNT, Lyc\u00e9e Faidherbe 2020&lt;\/footer>\n&lt;\/div>\n&lt;\/body>\n&lt;script src=\"js\/script.js\">&lt;\/script>\n\n&lt;\/html>\n<\/code><\/pre>\n\n\n\n<p>3) Cr\u00e9er un fichier \u00ab\u00a0style.css\u00a0\u00bb dans votre dossier \u00ab\u00a0Lille_sous_la_neige\u00a0\u00bb et y copier le code css ci-dessous. Enregistrer <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\n@media all  and (min-width: 600px) {\n  body{\n    background-image :url(images\/fond_body.png);\n    background-position: left;\n    background-position: bottom;\n    background-repeat: no-repeat;\n    background-attachment: fixed;\n\n\n  }\n  #conteneur{\n    margin-left: 600px;\n    width : 900px;\n  }\nheader,footer {\n  font-family: 'Amatic SC', cursive;\n  border-width:1px;\n  border-style: outset;\n  border-color: #000;\n  margin-top: 15px;\n  margin-bottom: 15px;\n  font-size: 30px;\n  padding-left: 50px;\n  color: black;\n\n}\n\narticle{\nfont-family: 'Titillium Web', sans-serif;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-around;\n  border-width:1px;\n  border-style: outset;\n  border-color: #000;\n  margin-top: 15px;\n  margin-bottom: 15px;\n}\narticle h1{\n  font-size: 20px;\n  font-weight: bold;\n  text-decoration: underline;\n}\n}\n\n@media all  and (max-width: 600px) {\n    \n#conteneur{\n    width : 95%;\n    position : center;\n  }\nheader,footer {\n  font-family: 'Amatic SC', cursive;\n  border-width:1px;\n  border-style: outset;\n  border-color: #000;\n  margin-top: 15px;\n  margin-bottom: 15px;\n  font-size: 30px;\n  padding-left: 50px;\n  color: black;\n\n}\nheader {\n    height: 350px;\n    background-image :url(images\/fond_body.png);\n    background-position: left;\n    background-position: top;\n    background-repeat: no-repeat;\n    background-size: cover;\n    }\n\n\narticle{\n    font-family: 'Titillium Web', sans-serif;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  \n  border-width:1px;\n  border-style: outset;\n  border-color: #000;\n  margin-top: 15px;\n  margin-bottom: 15px;\n}\narticle h1{\n  font-size: 20px;\n  font-weight: bold;\n  text-decoration: underline;\n}\nimg {\n        width: 80%;\n        position: center;\n    }\n\n}<\/code><\/pre>\n\n\n\n<p>4) Observer le rendu de la page dans le navigateur de votre choix. R\u00e9duire la largeur de la page    de votre navigateur pour observer la modification de la mise en page.<\/p>\n\n\n\n<h3>2. La programmation orient\u00e9e objet ou POO<\/h3>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>\u201cLa <strong>programmation orient\u00e9e objet (POO)<\/strong>, ou <strong>programmation par objet<\/strong>, est un <a href=\"https:\/\/fr.wikipedia.org\/wiki\/Paradigme_(programmation)\">paradigme<\/a> de <a href=\"https:\/\/fr.wikipedia.org\/wiki\/Programmation_informatique\">programmation informatique<\/a> \u00e9labor\u00e9 par les Norv\u00e9giens <a href=\"https:\/\/fr.wikipedia.org\/wiki\/Ole-Johan_Dahl\">Ole-Johan Dahl<\/a> et <a href=\"https:\/\/fr.wikipedia.org\/wiki\/Kristen_Nygaard\">Kristen Nygaard<\/a> au d\u00e9but des ann\u00e9es 1960 et poursuivi par les travaux de l&rsquo;Am\u00e9ricain <a href=\"https:\/\/fr.wikipedia.org\/wiki\/Alan_Kay\">Alan Kay<\/a> dans les ann\u00e9es 1970. Il consiste en la d\u00e9finition et l&rsquo;interaction de briques logicielles appel\u00e9es <em><a href=\"https:\/\/fr.wikipedia.org\/wiki\/Objet_(informatique)\">objets<\/a> ; un objet repr\u00e9sente un concept, une id\u00e9e ou toute entit\u00e9 du monde physique, comme une voiture, une personne ou encore une page d&rsquo;un livre. Il poss\u00e8de une structure interne et un comportement, et il sait interagir avec ses pairs&#8230; Il existe actuellement deux grandes cat\u00e9gories de langages \u00e0 objets :<br><\/em><\/p><cite>https:\/\/fr.wikipedia.org\/wiki\/Programmation_orient\u00e9e_objet<\/cite><\/blockquote>\n\n\n\n<h3>3. Le but de ce TP.<\/h3>\n\n\n\n<p>Comme dans cette vid\u00e9o d&rsquo;une c\u00e9l\u00e8bre chanson, on veut faire tomber la neige sur notre image de Lille.<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Adamo - Tombe la neige (1976)\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/aMOcmmgu9v8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Nous allons donc pour cela devoir cr\u00e9er des flocons de neige.<br>On peut consid\u00e9rer qu&rsquo;un flocon est un objet d\u00e9fini par certaines propri\u00e9t\u00e9s et certains comportements : on parlera de propri\u00e9t\u00e9s et de m\u00e9thodes en POO.<\/p>\n\n\n\n<p>Avant de se lancer dans la programmation, il faut r\u00e9fl\u00e9chir sur ces propri\u00e9t\u00e9s et m\u00e9thodes qui vont d\u00e9finir nos flocons.<\/p>\n\n\n\n<h4>a) Propri\u00e9t\u00e9s des flocons<\/h4>\n\n\n\n<p>On peut consid\u00e9rer qu&rsquo;un flocon sera d\u00e9fini par :<br>&#8211; sa position sur l&rsquo;\u00e9cran donc par deux coordonn\u00e9es x et y,<br>&#8211; son type : pour un rendu plus r\u00e9aliste, on va pr\u00e9voir 3 tailles diff\u00e9rentes correspondant \u00e0 3 types diff\u00e9rents.<\/p>\n\n\n\n<h4>b) M\u00e9thodes associ\u00e9es.<\/h4>\n\n\n\n<p>A un flocon, on va associer 2 m\u00e9thodes ou 2 comportements ou interactions possibles :<br>&#8211; un d\u00e9placement al\u00e9atoire,<br>&#8211; une repr\u00e9sentation graphique.<\/p>\n\n\n\n<h4>c) Nature des flocons.<\/h4>\n\n\n\n<p>On peut envisager que nos flocons soient des \u00e9l\u00e9ments HTML et manipuler le DOM ( Document Object Model ) \u00e0 l&rsquo;aide du javascript pour les cr\u00e9er et les animer.<br>Plus simplement, ici, on va consid\u00e9rer qu&rsquo;il s&rsquo;agit de dessins que l&rsquo;on va manipuler dans un \u00e9l\u00e9ment canvas.<\/p>\n\n\n\n<h3>4. Mise en place de l&rsquo;animation.<\/h3>\n\n\n\n<h4>a) On remplace l&rsquo;\u00e9l\u00e9ment image par un \u00e9l\u00e9ment canvas.<\/h4>\n\n\n\n<p>Supprimer de votre fichier html, l&rsquo;image ( \u00e9l\u00e9ment &lt;img&gt; ) et le remplacer par un \u00e9l\u00e9ment &lt;canvas&gt; auquel on va attribuer une id.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;canvas id=\"mon_canvas\">&lt;\/canvas><\/code><\/pre>\n\n\n\n<h4>b) On modifie le css pour mettre notre image en fond de notre canvas.<\/h4>\n\n\n\n<p>Ajouter au fichier css les propri\u00e9t\u00e9s suivantes dans les 2 types de r\u00e8gles appliqu\u00e9es en fonction de la taille de l&rsquo;\u00e9cran.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>#mon_canvas {\n  background-image: url(\"images\/Lille.png\");\n  background-position: center top; \/* On centre l'image *\/\n  background-repeat: no-repeat; \/* on ne la r\u00e9p\u00e8te pas *\/\n  background-size: cover; \/* l'image recouvre l'\u00e9l\u00e9ment *\/\n  height: 200px; \/* on fixe les dimensions du canvas *\/\n  width: 400px;\n}<\/code><\/pre>\n\n\n\n<h4>c) On ajoute un fichier js pour g\u00e9rer notre interaction.<\/h4>\n\n\n\n<p>Cr\u00e9er dans votre r\u00e9pertoire o\u00f9 figurent le fichier html et le fichier css un fichier \u00ab\u00a0script.js\u00a0\u00bb et y copier le code suivant :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\n  \/\/ on d\u00e9clare un \u00e9l\u00e9ment canvas qui correspond \u00e0 l'\u00e9l\u00e9ment dont l'id est tutoriel\n   var canvas = document.getElementById(\"mon_canvas\");\n   \/\/ on d\u00e9clare notre feuille de dessin ctx qui sera une version 2D du canvas\n   ctx = canvas.getContext(\"2d\");\n  \/\/ On d\u00e9clare une liste d'objets appel\u00e9 flocon\n   var flocon=[];\n   \/\/ on cr\u00e9e 30 flocons\n   \/\/creation_flocons(30);\n   \/\/\n\n\n   window.requestAnimationFrame(dessiner_la_carte);\n\n\n\n   \/\/ on d\u00e9finit le constructeur et les propri\u00e9t\u00e9s et m\u00e9thodes associ\u00e9es\n  function Flocon(x,y,type) {\n    \/\/ on recup\u00e8re les arguments x et y de la fonction\n    \/\/ pour les attribuer \u00e0 l'objet en question\n    this.x=x;\n    this.y=y;\n    this.type=type;\n    \/\/ on cr\u00e9e 2 m\u00e9thodes\n    \/\/ la m\u00e9thode dessiner en fonction du type de flocon : 0 gros, 1 moyens, 2 petits\n    this.deplacement=function(){\n      switch (this.type) {\n        \/\/ cas 0 : on dessine un cercle non rempli\n        case 0:\n        vitesse=0.9;\n          break;\n       \/\/ cas 1 : on dessine un cercle colori\u00e9 en noir\n        case 1:\n        vitesse=0.7;\n        break;\n        \/\/ cas 2 : un demi-cercle vers le bas\n        case 2:\n        vitesse=0.6;\n        break;\n      }\n      this.x=this.x+(Math.floor(Math.random()*3)-1)*vitesse;\n      this.y=this.y+vitesse;\n\n      if (this.y>canvas.height){this.y=0;}\n\n    }\n    \/\/ la m\u00e9thode d\u00e9placement en fonction du type\n    this.dessiner=function(){\n\n      var taille;\n      var transparences;\n      switch (this.type) {\n        \/\/ cas 0 : on dessine un cercle non rempli\n        case 0:\n        taille=6;\n        transparence = 0.5;\n          break;\n       \/\/ cas 1 : on dessine un cercle colori\u00e9 en noir\n        case 1:\n        taille=4;\n        transparence = 0.8;\n        break;\n        \/\/ cas 2 : un demi-cercle vers le bas\n        case 2:\n        taille=2;\n        transparence = 1;\n        break;\n      }\n      ctx.beginPath();\n      ctx.arc(this.x,this.y,taille,0,Math.PI*2, true);\n      ctx.fillStyle = 'rgb(255,255,255,'+transparence+')';\n      ctx.fill();\n      ctx.closePath();\n    }\n\n\/\/ fin du constructeur\n}\n\n\n\nfunction dessiner_la_carte(){\n  var nbe_aleatoire;\n  var type;\n  \/\/ on efface avec un fond noir\n  if (flocon.length&lt;300){\n    nbe_aleatoire=Math.random();\n    if (nbe_aleatoire&lt;0.1){type=0;}\n    if (nbe_aleatoire>=0.1 &amp;&amp; nbe_aleatoire&lt;0.3){type=1;}\n      if (nbe_aleatoire>=0.3){type=2;}\n\nflocon[flocon.length]= new Flocon(Math.floor(Math.random()*canvas.width),Math.floor(Math.random()*canvas.height),type);\n  }\n  \/\/ctx.clearRect(0,0,600,800);\n  ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n  for (var i=0;i&lt;flocon.length;i++){\n  flocon[i].dessiner();\n  flocon[i].deplacement();\n                        }\n  window.requestAnimationFrame(dessiner_la_carte);\n }\n<\/code><\/pre>\n\n\n\n<p>Ins\u00e9rer dans votre html l&rsquo;appel \u00e0 vote script en le pla\u00e7ant judicieusement :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script src=\"script.js\">&lt;\/script><\/code><\/pre>\n\n\n\n<h4>d) Modifier le script pour comprendre son fonctionnement<\/h4>\n\n\n\n<p>Modifier le script js pour :<\/p>\n\n\n\n<ul><li>avoir moins de flocons,<\/li><li>changer la taille des flocons,<\/li><li>etc &#8230;&#8230;.<\/li><\/ul>\n\n\n\n<h3>5) La suite<\/h3>\n\n\n\n<p>Reprendre le tp pour cr\u00e9er les bases d&rsquo;un jeu de type Frog en se limitant pour l&rsquo;instant aux simples objets qui se d\u00e9placent sur la route.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>1. Mise en place du tp Cr\u00e9er un dossier \u00ab\u00a0Lille_sous_la_neige\u00a0\u00bb, contenant un sous-dossier \u00ab\u00a0images\u00a0\u00bb.1) T\u00e9l\u00e9charger&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/labodemaths.fr\/WordPress3\/isn-animation-et-programmation-objet-en-javascript\/\">Read the post<span class=\"screen-reader-text\">ISN : animation et programmation objet en Javascript<\/span><\/a><\/div>\n","protected":false},"author":2,"featured_media":1033,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[58],"tags":[],"_links":{"self":[{"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts\/1031"}],"collection":[{"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/comments?post=1031"}],"version-history":[{"count":9,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts\/1031\/revisions"}],"predecessor-version":[{"id":1048,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts\/1031\/revisions\/1048"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/media\/1033"}],"wp:attachment":[{"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/media?parent=1031"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/categories?post=1031"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/tags?post=1031"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}