{"id":192,"date":"2020-03-09T19:47:35","date_gmt":"2020-03-09T18:47:35","guid":{"rendered":"https:\/\/perso.ens-lyon.fr\/ludovic.bellon\/wp\/?page_id=192"},"modified":"2020-12-28T20:28:41","modified_gmt":"2020-12-28T19:28:41","slug":"mouvement-brownien","status":"publish","type":"page","link":"https:\/\/perso.ens-lyon.fr\/ludovic.bellon\/wp\/vulgarisation\/mouvement-brownien\/","title":{"rendered":"Le mouvement Brownien"},"content":{"rendered":"\n<p>La vid\u00e9o ci-dessus permet d&rsquo;observer <em>l&rsquo;agitation thermique<\/em>, qui se manifeste ici par le mouvement al\u00e9atoire de petites particules (billes de verre de 2\u00b5m) dans de l&rsquo;eau. Ces fluctuations constituent un <strong>mouvement Brownien<\/strong>. En mesurant les trajectoires de ces particules et en les comparant aux pr\u00e9dictions th\u00e9oriques d&rsquo;Einstein sur la diffusion, Jean Perrin d\u00e9montre au d\u00e9but du XX\u00e8me si\u00e8cle l&rsquo;existence des atomes, et leur nombre gigantesque (6,02 x 10<sup>23<\/sup> atomes dans 12 g de carbone par exemple).<\/p>\n\n\n\n<p>Vous pouvez reproduire l&rsquo;exp\u00e9rience de Jean Perrin dans la vid\u00e9o ci-dessus: choisissez une particule, cliquez sur la vid\u00e9o pour enregistrer et visualiser les trajectoires lorsque le temps s&rsquo;\u00e9coule. Comme dans l&rsquo;image ci-dessous, vous pourrez observer par vous m\u00eame le caract\u00e8re al\u00e9atoire du mouvement : la direction et la vitesse changent sans cesse.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"601\" height=\"484\" src=\"https:\/\/perso.ens-lyon.fr\/ludovic.bellon\/wp\/wp-content\/uploads\/2020\/03\/TrajectoiresMvtBrownien.jpg\" alt=\"\" class=\"wp-image-306\" srcset=\"https:\/\/perso.ens-lyon.fr\/ludovic.bellon\/wp\/wp-content\/uploads\/2020\/03\/TrajectoiresMvtBrownien.jpg 601w, https:\/\/perso.ens-lyon.fr\/ludovic.bellon\/wp\/wp-content\/uploads\/2020\/03\/TrajectoiresMvtBrownien-300x242.jpg 300w\" sizes=\"auto, (max-width: 601px) 100vw, 601px\" \/><figcaption>Quelques trajectoires issues du suivi des particules par les internautes&#8230;<\/figcaption><\/figure>\n\n\n\n<div id=\"CanvasDiv\" style=\"position: absolute; left: 50%; width: 100%;\">\n    <div style=\"position: relative; left: -50%; width: 100%;\">\n        <canvas id=\"TrajectoriesCanvas\" width=\"960\" height=\"540\" style=\"z-index: 3; background: transparent; cursor: pointer; display: block; margin: 0 auto; max-width: 100%;\">\n        Votre navigateur n&rsquo;est pas compatible avec cette exp\u00e9rience interactive, (pas de support des canvas HTML5).\n        <\/canvas>\n    <\/div>\n<\/div>\n<video id=\"videolayer\" width=\"960\" height=\"540\" autoplay=\"\" loop=\"\" muted=\"\" playsinline=\"\" src=\"https:\/\/perso.ens-lyon.fr\/ludovic.bellon\/MvtBrownien\/2um.mp4\" style=\"z-index: 2; display: block; margin: 0 auto;\">\n<\/video>\n\n<img loading=\"lazy\" decoding=\"async\" id=\"blankImg\" src=\"https:\/\/perso.ens-lyon.fr\/ludovic.bellon\/wp\/wp-content\/uploads\/2020\/03\/blank-image.png\" width=\"1\" height=\"1\">\n\n\n\n<script>\nhandleClick = function(e) {\n    \/\/ send video in background\n    videoElement.style.zIndex = \"1\";\n    \/\/ Avoid any problem with video management (pause play from click on video)\n    e.preventDefault();\n    \/\/ Read timing\n    var t=videoElement.currentTime*ticksperseconds;\n    \/\/ Compute scaling factor between actual window size and canvas size\n    var scaleX = 960\/TrajectoriesCanvas.getBoundingClientRect().width;\n    var scaleY = 540\/TrajectoriesCanvas.getBoundingClientRect().height;\n    \/\/ Read current click position\n    var newX=e.offsetX*scaleX;\n    var newY=e.offsetY*scaleY;\n    \/\/ initiate a new track if video went back to initial time, if more than 10s has ellapsed since last click, or if distance with previous point is really far from what expected from diffusion.\n    if ((t<lastt)||(t>lastt+tracktimeout)||(((newX-lastX)**2+(newY-lastY)**2)>(coeffDifftimes20*(t-lastt))))\n    {\n        \/\/ set last click to current click\n        lastX=newX;\n        lastY=newY;\n        lastt=t;\n        \/\/ increment track number and line color\n        trackidx=trackidx+1;\n        ctx.strokeStyle = colorlist[(trackidx-1)%14];\n    };\n    \/\/ send timing, position of click, usersession information to MySQL database\n    $.post('https:\/\/perso.ens-lyon.fr\/ludovic.bellon\/MvtBrownien\/clickmap.php',{t:t,x:newX,y:newY,l:uniqueID,ti:trackidx});\n    \/\/ draw line from previous point\n    ctx.beginPath();\n    ctx.moveTo(lastX, lastY);\n    ctx.lineTo(newX, newY);\n    \/\/ add a 11 px cross\n    DX5px=5*scaleX;\n    DY5px=5*scaleY;\n    ctx.moveTo(newX-DX5px, newY);\n    ctx.lineTo(newX+ DX5px, newY);\n    ctx.moveTo(newX, newY-DY5px);\n    ctx.lineTo(newX, newY+DY5px);\n    \/\/ plot line\n    ctx.stroke();\n    \/\/ keep memory of this click\n    lastX=newX;\n    lastY=newY;\n    lastt=t;\n\n}\n\nvar videoElement = document.getElementById(\"videolayer\");\nvideoElement.addEventListener(\"mousedown\", handleClick, false);\nvar TrajectoriesCanvas = document.getElementById(\"TrajectoriesCanvas\");\nTrajectoriesCanvas.addEventListener(\"mousedown\", handleClick, false);\n\nvar image2remove = document.getElementsByClassName(\"attachment-twentyseventeen-featured-image size-twentyseventeen-featured-image wp-post-image\")[0];\nimage2remove.parentNode.removeChild(image2remove);\ndocument.getElementsByClassName(\"single-featured-image-header\")[0].appendChild(document.getElementById(\"CanvasDiv\"));\ndocument.getElementsByClassName(\"single-featured-image-header\")[0].appendChild(videoElement);\ndocument.getElementsByClassName(\"single-featured-image-header\")[0].appendChild(document.getElementById(\"blankImg\"));\n\nvar ctx = TrajectoriesCanvas.getContext(\"2d\");\nctx.globalAlpha = 0.5;\nctx.lineWidth=\"2\";\n\n\/\/ define unique ID\nuniqueID = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);\n\n\/\/ converstion of data to physical units\nvar umperpixels=0.07752;\nvar ticksperseconds=100;\n\/\/ coefficients for criteria to detect new tracks\n\/\/ distance criterium : 20 times the expected diffusion constant (pixel^2\/tick) for a 2\u00b5m bead in water at 295K [kBT\/(6*pi*eta*R)]\nvar coeffDifftimes20=20*1.38e-23*295\/(6*3.14*0.95e-3*1e-6)\/(1e-6*umperpixels)**2\/ticksperseconds;\n\/\/ time criterium : more 10s delay between clicks\nvar tracktimeout=10*ticksperseconds;\n\/\/ initiate last click information : set t to -20s to make sure first click initiate a trajectory\nvar lastt=-2*tracktimeout;\nvar lastX=0;\nvar lastY=0;\nvar trackidx=0;\n\/\/ color list to cycle through to differentiate tracks' plot.\nvar colorlist=[\"0072BD\", \"#D95319\", \"#EDB120\", \"#7E2F8E\", \"#77AC30\", \"#4DBEEE\", \"#A2142F\", \"#07B02D\", \"#D51939\", \"#EB2D10\", \"#728EFE\", \"#7A37C0\", \"#4BEDEE\", \"#A1224F\"];\n<\/script>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>La vid\u00e9o ci-dessus permet d&rsquo;observer l&rsquo;agitation thermique, qui se manifeste ici par le mouvement al\u00e9atoire de petites particules (billes de verre de 2\u00b5m) dans de l&rsquo;eau. Ces fluctuations constituent un mouvement Brownien. En mesurant les trajectoires de ces particules et en les comparant aux pr\u00e9dictions th\u00e9oriques d&rsquo;Einstein sur la diffusion, Jean Perrin d\u00e9montre au d\u00e9but &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/perso.ens-lyon.fr\/ludovic.bellon\/wp\/vulgarisation\/mouvement-brownien\/\" class=\"more-link\">Continuer la lecture<span class=\"screen-reader-text\"> de &laquo;&nbsp;Le mouvement Brownien&nbsp;&raquo;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":371,"parent":895,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-192","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/perso.ens-lyon.fr\/ludovic.bellon\/wp\/wp-json\/wp\/v2\/pages\/192","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/perso.ens-lyon.fr\/ludovic.bellon\/wp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/perso.ens-lyon.fr\/ludovic.bellon\/wp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/perso.ens-lyon.fr\/ludovic.bellon\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/perso.ens-lyon.fr\/ludovic.bellon\/wp\/wp-json\/wp\/v2\/comments?post=192"}],"version-history":[{"count":173,"href":"https:\/\/perso.ens-lyon.fr\/ludovic.bellon\/wp\/wp-json\/wp\/v2\/pages\/192\/revisions"}],"predecessor-version":[{"id":894,"href":"https:\/\/perso.ens-lyon.fr\/ludovic.bellon\/wp\/wp-json\/wp\/v2\/pages\/192\/revisions\/894"}],"up":[{"embeddable":true,"href":"https:\/\/perso.ens-lyon.fr\/ludovic.bellon\/wp\/wp-json\/wp\/v2\/pages\/895"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/perso.ens-lyon.fr\/ludovic.bellon\/wp\/wp-json\/wp\/v2\/media\/371"}],"wp:attachment":[{"href":"https:\/\/perso.ens-lyon.fr\/ludovic.bellon\/wp\/wp-json\/wp\/v2\/media?parent=192"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}