{"id":767,"date":"2022-08-23T14:49:27","date_gmt":"2022-08-23T13:49:27","guid":{"rendered":"https:\/\/blog.univ-angers.fr\/mathsinfo\/?p=767"},"modified":"2022-08-27T11:06:01","modified_gmt":"2022-08-27T10:06:01","slug":"horloges-mathematiques","status":"publish","type":"post","link":"https:\/\/blog.univ-angers.fr\/mathsinfo\/2022\/08\/23\/horloges-mathematiques\/","title":{"rendered":"Horloges math\u00e9matiques"},"content":{"rendered":"\n<p>J&rsquo;ai eu l&rsquo;occasion de faire plusieurs vid\u00e9os de <strong>montres<\/strong> originales <a href=\"https:\/\/www.youtube.com\/schraf\" target=\"_blank\" rel=\"noreferrer noopener\">sur ma chaine Youtube<\/a>, en particulier :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a rel=\"noreferrer noopener\" href=\"https:\/\/youtu.be\/yx-j5JTHGUY\" target=\"_blank\">Cr\u00e9er des montres Tokyoflash (Python sur NUMWORKS)<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/youtu.be\/-4FEz5s9akw\" target=\"_blank\">JavaScript &amp; SVG &#8211; Montre RADIOACTIVE<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/youtu.be\/tC7h4soL5v0\" target=\"_blank\">JavaScript &amp; SVG &#8211; Simulation de la montre STENCIL TokyoFlash<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/youtu.be\/ERD7aYsN6z8\" target=\"_blank\">JavaScript &#8211; Simulation de la montre TENMETSU de TokyoFlash<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/youtu.be\/0yCPulJOMaE\" target=\"_blank\">JavaScript &#8211; Simulation de montres TokyoFlash<\/a><\/li><\/ul>\n\n\n\n<p>Aujourd&rsquo;hui nous allons nous inspirer des <a rel=\"noreferrer noopener\" href=\"https:\/\/www.albertclock.com\/\" target=\"_blank\">horloges ALBERT<\/a> qui ne vous donnent l&rsquo;heure qu&rsquo;apr\u00e8s avoir effectu\u00e9 un calcul arithm\u00e9tique (additions, soustractions, multiplications ou divisions suivant le niveau choisi)<\/p>\n\n\n\n<p>Je vous propose <strong>diff\u00e9rentes versions web<\/strong> inspir\u00e9es par cette id\u00e9e. Une fois les fichiers r\u00e9cup\u00e9r\u00e9s, vous n&rsquo;aurez besoin d&rsquo;<strong>aucune connexion Internet<\/strong> et vous pourrez mettre les fichiers sur une <strong>tablette<\/strong> ou un <strong>ordinateur<\/strong> portable. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Installation et modifications<\/h2>\n\n\n\n<p>Par d\u00e9faut les <strong>horloges s&rsquo;actualisent<\/strong> toutes les <strong>60 secondes<\/strong>. Pour modifier cet intervalle, <strong>ouvrez<\/strong> le fichier <strong>.html<\/strong> avec le bloc-note puis rechercher la ligne contenant <strong>60000<\/strong> (60 millisecondes). Remplacez cette valeur par exemple par 20000 (pour 20 secondes) et <strong>enregistrez<\/strong>.  <\/p>\n\n\n\n<p>Concernant les <strong>tablettes<\/strong>, mettre le 2 fichiers (<strong>.html<\/strong> et <strong>.ttf<\/strong>) sur votre tablette (via Bluetooth, par mail ou autre), par exemple dans le dossier <strong>download<\/strong> ou <strong>documents<\/strong>. Pour ouvrir le fichier <strong>.html<\/strong> avec un navigateur install\u00e9 sur votre tablette (<strong>Chrome<\/strong> ou <strong>FireFox<\/strong> ou <strong>Brave<\/strong>), lancez le navigateur puis tapez l&rsquo;adresse (avec 3 \u00ab\u00a0\/\u00a0\u00bb) :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>file:\/\/\/storage\/emulated\/0\/download\/horloge.html\n\nou\n\nfile:\/\/\/storage\/emulated\/0\/documents\/horloge.html<\/code><\/pre>\n\n\n\n<p>Si les fichiers sont sur une carte SD, l&rsquo;adresse sera du type :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>file:\/\/\/sdcard\/download\/horloge.html<\/code><\/pre>\n\n\n\n<p>Une fois que vous avez r\u00e9ussi, mettre la page en <strong>Favori<\/strong>. <span style=\"text-decoration: underline\">Si vous n&rsquo;y arrivez pas<\/span>, vous pouvez toujours utiliser les <strong>liens d\u00e9mo<\/strong> ci-dessous, mais il vous faudra alors une connexion Internet.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Additions et soustractions<\/h2>\n\n\n\n<p><a href=\"https:\/\/uabox.univ-angers.fr\/index.php\/s\/RJf5U9RAOpRt1To\">T\u00e9l\u00e9chargez <\/a>| <a href=\"http:\/\/schraf.chez-alice.fr\/fb\/horloges\/horlogev2.html\" target=\"_blank\" rel=\"noreferrer noopener\">Voir la d\u00e9mo<\/a> en ligne<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-13.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"375\" src=\"https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-13-1024x375.png\" alt=\"\" class=\"wp-image-769\" srcset=\"https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-13-1024x375.png 1024w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-13-300x110.png 300w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-13-768x281.png 768w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-13-500x183.png 500w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-13.png 1534w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>-21+18+18=15 et -8+10+4=6, il est <strong>15 h 06 min<\/strong><\/figcaption><\/figure>\n\n\n\n<p>Pour cr\u00e9er la <strong>formule des heures<\/strong>, l&rsquo;id\u00e9e a \u00e9t\u00e9 de choisir <strong>au hasard 2 nombres<\/strong> entre -24 et 24 (par exemple -21 et +18), de <strong>les additionner<\/strong> (-3) et de regarder si la <strong>diff\u00e9rence entre l&rsquo;heure actuelle<\/strong> (par exemple 15h) <strong>et cette somme<\/strong> est ou non <strong>entre -24 et 24<\/strong>. Ici 15 &#8211; (-3) = 18 convient. D&rsquo;o\u00f9 la formule -21+18+18. <strong>Sinon<\/strong>, on tire \u00e0<strong> nouveau 2 entiers<\/strong> et on recommence, les ordinateurs \u00e9tant rapides, on ne se rend pas compte s&rsquo;il y a eu besoin de 1 ou 1000 essais !<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Addition et multiplication<\/h2>\n\n\n\n<p><a href=\"https:\/\/uabox.univ-angers.fr\/index.php\/s\/Lf1CrfHWJjdw5gi\" target=\"_blank\" rel=\"noreferrer noopener\">T\u00e9l\u00e9chargez <\/a>| <a rel=\"noreferrer noopener\" href=\"http:\/\/schraf.chez-alice.fr\/fb\/horloges\/horlogev6.html\" target=\"_blank\">Voir la d\u00e9mo<\/a> en ligne<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-17.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"441\" src=\"https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-17-1024x441.png\" alt=\"\" class=\"wp-image-782\" srcset=\"https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-17-1024x441.png 1024w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-17-300x129.png 300w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-17-768x331.png 768w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-17-500x215.png 500w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-17.png 1240w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>7 \u00d7 9 &#8211; 45 = 18 et 3 + 7 \u00d7 5 = 38, il est <strong>18 h 38 min<\/strong><\/figcaption><\/figure>\n\n\n\n<p>Les <strong>2 nombres \u00e0 multiplier<\/strong> sont choisis entre <strong>2 et 9<\/strong>, <strong>l&rsquo;un<\/strong> des 2 <strong>pouvant \u00eatre n\u00e9gatif<\/strong>. Le <strong>troisi\u00e8me<\/strong> nombre est <strong>calcul\u00e9<\/strong> pour obtenir le bon r\u00e9sultat (la bonne heure puis m\u00eame chose avec les minutes). Volontairement les 2 lignes n&rsquo;ont pas le m\u00eame ordre d&rsquo;affichage : <strong>a\u00d7b+c<\/strong> pour les <strong>heures<\/strong> et <strong>a+b\u00d7c<\/strong> pour les <strong>minutes<\/strong>. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Version points sur des d\u00e9s<\/h2>\n\n\n\n<p><a href=\"https:\/\/uabox.univ-angers.fr\/index.php\/s\/X8wRKZLR9LZTwJ1\" target=\"_blank\" rel=\"noreferrer noopener\">T\u00e9l\u00e9chargez <\/a>| <a href=\"http:\/\/schraf.chez-alice.fr\/fb\/horloges\/horlogev11.html\" target=\"_blank\" rel=\"noreferrer noopener\">Voir la d\u00e9mo<\/a> en ligne<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-27.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"346\" src=\"https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-27-1024x346.png\" alt=\"\" class=\"wp-image-821\" srcset=\"https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-27-1024x346.png 1024w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-27-300x101.png 300w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-27-768x259.png 768w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-27-500x169.png 500w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-27.png 1107w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Il y a 17 points sur le d\u00e9 du haut et 35 sur le d\u00e9 du bas, il est <strong>17 h 35 min<\/strong><\/figcaption><\/figure>\n\n\n\n<p>C&rsquo;est en regardant un <strong>manuel de CP cycle 2<\/strong> que j&rsquo;ai eu l&rsquo;id\u00e9e de cette version. Le programme est assez simple, on <strong>compte<\/strong> les <strong>dizaines<\/strong> et les <strong>unit\u00e9s<\/strong> (un d\u00e9 existe pour tous les chiffres entre 0 et 9). Lorsque l&rsquo;on a un multiple de 10, on s&rsquo;arrange pour n&rsquo;afficher que les d\u00e9s \u00ab\u00a010\u00a0\u00bb (qui est en fait le caract\u00e8re \u00ab\u00a0=\u00a0\u00bb). Il n&rsquo;y a qu&rsquo;avec \u00ab\u00a00\u00a0\u00bb seul que l&rsquo;on affiche le d\u00e9 sans point.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>AFF = n =&gt; n == 0 ?     \/\/ n vaut 0 ?\n                0 :     \/\/ si oui on renvoie 0\n                '='.repeat(0 | n \/ 10)  \/\/ Nombre de dizaines\n                + (n % 10 != 0 ? n % 10 : '')  \/\/ et unit\u00e9s si pas 0<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Version aiguilles : Heures &#8211; Minutes &#8211; Secondes<\/h2>\n\n\n\n<p><a href=\"https:\/\/uabox.univ-angers.fr\/index.php\/s\/UyATuoZzszdRhLJ\" target=\"_blank\" rel=\"noreferrer noopener\">T\u00e9l\u00e9chargez <\/a>| <a href=\"http:\/\/schraf.chez-alice.fr\/fb\/horloges\/horlogev12.html\" target=\"_blank\" rel=\"noreferrer noopener\">Voir la d\u00e9mo<\/a> en ligne | <a href=\"http:\/\/schraf.chez-alice.fr\/fb\/horloges\/horlogev12alea.html\" target=\"_blank\" rel=\"noreferrer noopener\">Version tirage al\u00e9atoire de l&rsquo;heure<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-28.png\"><img loading=\"lazy\" decoding=\"async\" width=\"942\" height=\"418\" src=\"https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-28.png\" alt=\"\" class=\"wp-image-824\" srcset=\"https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-28.png 942w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-28-300x133.png 300w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-28-768x341.png 768w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-28-500x222.png 500w\" sizes=\"auto, (max-width: 942px) 100vw, 942px\" \/><\/a><figcaption>3 horloges s\u00e9par\u00e9es pour lire heures, minutes et secondes. Il est <strong>7 h 28 min 48 s<\/strong><\/figcaption><\/figure>\n\n\n\n<p>L&rsquo;<a rel=\"noreferrer noopener\" href=\"https:\/\/fr.wikipedia.org\/wiki\/Fichier:Clock_11-12.svg\" target=\"_blank\">horloge provient de Wikipedia<\/a>, elle est au format <strong>SVG<\/strong> (donc transformable sans perte de qualit\u00e9). Modification du SVG avec <strong>Inkscape<\/strong> pour cr\u00e9er les 2 visuels (heures et minutes), il a suffit ensuite de donner les noms <strong>heures<\/strong>, <strong>minutes<\/strong>, <strong>secondes<\/strong> aux aiguilles et d&rsquo;appliquer une <strong>rotation<\/strong> en JavaScript (en pr\u00e9cisant dans Inkscape o\u00f9 est le centre de rotation) :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var hm = HM(new Date().toLocaleTimeString())\n\n\/\/ h&#091;0] contient l'heure, h&#091;1] les minutes et h&#091;2] les secondes\nheures.setAttribute('transform','rotate('+(hm&#091;0]*30)+')');\nminutes.setAttribute('transform','rotate('+(hm&#091;1]*6)+')');\nsecondes.setAttribute('transform','rotate('+(hm&#091;2]*6)+')');<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Version cercle trigonom\u00e9trique<\/h2>\n\n\n\n<p><a href=\"https:\/\/uabox.univ-angers.fr\/index.php\/s\/4KubYbkzji0MERQ\" target=\"_blank\" rel=\"noreferrer noopener\">T\u00e9l\u00e9chargez <\/a>| <a rel=\"noreferrer noopener\" href=\"http:\/\/schraf.chez-alice.fr\/fb\/horloges\/horlogev3.html\" target=\"_blank\">Voir la d\u00e9mo<\/a> en ligne<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-14.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"457\" src=\"https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-14-1024x457.png\" alt=\"\" class=\"wp-image-771\" srcset=\"https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-14-1024x457.png 1024w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-14-300x134.png 300w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-14-768x343.png 768w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-14-500x223.png 500w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-14.png 1313w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>0\u00b0 = 15h et -18\u00b0 = 3 minutes apr\u00e8s 15 soit <strong>15 h 18 min<\/strong><\/figcaption><\/figure>\n\n\n\n<p>La <strong>formule pour les minutes<\/strong> n&rsquo;est qu&rsquo;une fonction affine : <strong>0<\/strong> min est \u00e0 <strong>90\u00b0<\/strong> et <strong>60<\/strong> min \u00e0 <strong>-270\u00b0<\/strong>. On obtient la formule :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ANGLEMIN = min =&gt; -6 * min + 90<\/code><\/pre>\n\n\n\n<p>On fait ensuite un test pour savoir si le nombre est plus petit que -180 (par exemple -246), si c&rsquo;est le cas on affichera plut\u00f4t -246 + 360 = 114\u00b0<\/p>\n\n\n\n<p>La strat\u00e9gie est la m\u00eame pour les <strong>heures<\/strong>, en faisant attention aux <strong>2 cas<\/strong> : heures <strong>entre 3h et 9h<\/strong> puis <strong>entre 9h-12h-3h<\/strong>. La formule utilis\u00e9e est :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ANGLEH = h =&gt; -30 * (h % 12) + 90   \/\/ le % correspond \u00e0 'modulo'<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Syst\u00e8me d&rsquo;\u00e9quations<\/h2>\n\n\n\n<p><a href=\"https:\/\/uabox.univ-angers.fr\/index.php\/s\/4wqup82SGU5KSfu\">T\u00e9l\u00e9chargez <\/a>| <a href=\"http:\/\/schraf.chez-alice.fr\/fb\/horloges\/horlogev5.html\" target=\"_blank\" rel=\"noreferrer noopener\">Voir la d\u00e9mo<\/a> en ligne<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-16.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"471\" src=\"https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-16-1024x471.png\" alt=\"\" class=\"wp-image-779\" srcset=\"https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-16-1024x471.png 1024w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-16-300x138.png 300w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-16-768x353.png 768w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-16-500x230.png 500w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-16.png 1141w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Il faut r\u00e9soudre le syst\u00e8me pour trouver H=16 et M=37, il est donc <strong>16 h 37 min<\/strong> <\/figcaption><\/figure>\n\n\n\n<p>Pour ne pas avoir de nombres trop grands, les <strong>coefficients<\/strong> devant les <strong>heures<\/strong> sont choisis al\u00e9atoirement entre <strong>-4 et 4<\/strong> (et non nuls), et entre <strong>-3 et 3<\/strong> pour les <strong>minutes<\/strong> (non nuls).<\/p>\n\n\n\n<p>Il faut aussi s&rsquo;arranger pour <strong>ne pas afficher<\/strong> les coefficients <strong>1<\/strong> et <strong>-1<\/strong> (par exemple 1H s&rsquo;\u00e9crit H et -1M s&rsquo;\u00e9crit -M), pour cela on peut \u00e9crire cette fonction :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>UN = n =&gt; Math.abs(n) != 1 ? n : n == 1 ? '' : '-'\n\n&gt;&gt; UN(5)\n5\n&gt;&gt; UN(1)\n''\n&gt;&gt; UN(-1)\n'-'<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Version binaire<\/h2>\n\n\n\n<p><a href=\"https:\/\/uabox.univ-angers.fr\/index.php\/s\/lXU0q5GskGpZDZk\" target=\"_blank\" rel=\"noreferrer noopener\">T\u00e9l\u00e9chargez <\/a>| <a rel=\"noreferrer noopener\" href=\"http:\/\/schraf.chez-alice.fr\/fb\/horloges\/horlogev4.html\" target=\"_blank\">Voir la d\u00e9mo<\/a> en ligne<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-15.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"474\" src=\"https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-15-1024x474.png\" alt=\"\" class=\"wp-image-774\" srcset=\"https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-15-1024x474.png 1024w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-15-300x139.png 300w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-15-768x356.png 768w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-15-500x232.png 500w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-15.png 1341w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>01111 = 1 + 2 + 4 + 8 = 15 et 011110 = 2 + 4 + 8 + 16 = 30, il est <strong>15 h 30 min<\/strong><\/figcaption><\/figure>\n\n\n\n<p>Le programme est encore plus simple puisqu&rsquo;en JavaScript on transforme un <strong>nombre en binaire<\/strong> par :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&gt;&gt; (15).toString(2)\n'1111'\n&gt;&gt; (30).toString(2)\n'11110'<\/code><\/pre>\n\n\n\n<p>Pour \u00e9crire les heures nous avons besoin d&rsquo;au plus 5 bits et 6 bits pour les minutes.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&gt;&gt; BIN = (n, s) =&gt; ('0'.repeat(5) + n.toString(2)).slice(-s)\n\n&gt;&gt; BIN(15,5)    \/\/ 15 \u00e9crit sur 5 bits\n'01111'\n\n&gt;&gt; BIN(30,6)    \/\/ 30 \u00e9crit sur 6 bits \n'011110'<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Version binaire plus simple<\/h2>\n\n\n\n<p><a href=\"https:\/\/uabox.univ-angers.fr\/index.php\/s\/bWcExpCXqTq5D9x\" target=\"_blank\" rel=\"noreferrer noopener\">T\u00e9l\u00e9chargez <\/a>| <a href=\"http:\/\/schraf.chez-alice.fr\/fb\/horloges\/horlogev13.html\" target=\"_blank\" rel=\"noreferrer noopener\">Voir la d\u00e9mo<\/a> en ligne<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-29.png\"><img loading=\"lazy\" decoding=\"async\" width=\"997\" height=\"730\" src=\"https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-29.png\" alt=\"\" class=\"wp-image-829\" srcset=\"https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-29.png 997w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-29-300x220.png 300w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-29-768x562.png 768w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-29-410x300.png 410w\" sizes=\"auto, (max-width: 997px) 100vw, 997px\" \/><\/a><figcaption>Les <strong>colonnes<\/strong> correspondent aux <strong>dizaines<\/strong> et <strong>unit\u00e9s<\/strong> pour les heures, minutes et secondes<br>Une <strong>colonne<\/strong> se <strong>lit de bas en haut<\/strong> et les <strong>fen\u00eatres<\/strong> valent <strong>1<\/strong>, <strong>2<\/strong>, <strong>4<\/strong> et <strong>8<\/strong><br>Dizaine pour les heures = 1, Unit\u00e9s pour les heures = 2 + 4 = 6<br>Dizaine pour les minutes = 1 + 2 = 3, Unit\u00e9s pour les minutes = 1 + 2 + 4 = 7<br>Dizaines pour les secondes = 4, Unit\u00e9s pour les secondes = 8<br>Il est <strong>16 h 37 min 48 s<\/strong><\/figcaption><\/figure>\n\n\n\n<p>Une vraie horloge existe, elle se nomme \u00ab\u00a0The City Clock\u00a0\u00bb et <a rel=\"noreferrer noopener\" href=\"https:\/\/the-city-clock.com\/\" target=\"_blank\">vous la trouverez ici<\/a>.<\/p>\n\n\n\n<p>Le dessin a \u00e9t\u00e9 r\u00e9alis\u00e9 avec <strong>Inkscape<\/strong>, les fen\u00eatres ont \u00e9t\u00e9 nomm\u00e9es <strong>hd1<\/strong>, <strong>hd2<\/strong>&#8230;, <strong>hu1<\/strong>, <strong>hu2<\/strong>,&#8230; pour les <strong>dizaines<\/strong> et <strong>unit\u00e9s<\/strong> des <strong>heures<\/strong>, idem avec les <strong>md<\/strong>, <strong>mu<\/strong> et <strong>sd<\/strong>, <strong>su<\/strong>.<\/p>\n\n\n\n<p><span style=\"text-decoration: underline\">Exemple avec 16 h<\/span> : On r\u00e9cup\u00e8re la <strong>dizaine<\/strong> (1) et <strong>l&rsquo;unit\u00e9<\/strong> (6) que l&rsquo;on <strong>transforme<\/strong> en <strong>binaire<\/strong> (1 et 110). On <strong>parcourt<\/strong> les <strong>4<\/strong> fen\u00eatres de la <strong>colonne dizaine<\/strong> et on met en jaune s&rsquo;il y a un \u00ab\u00a01\u00a0\u00bb sinon marron. Donc avec \u00ab\u00a01\u00a0\u00bb seule la fen\u00eatre du bas sera allum\u00e9e. Avec 6, on parcourt les 4 fen\u00eatres de la colonne unit\u00e9 et on allume la 2e et 3e fen\u00eatre.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>BIN = n =&gt; &#091;...'0'.repeat(3)+n.toString(2)].reverse().join('')\n\n&gt;&gt; BIN(6)\n'011000'\n\n&gt;&gt; BIN(1)\n'1000'\n\nETAT = (v, col) =&gt; {    \/\/ Exemple v = 6 et col = 'hu'\r\n  b = BIN(v)      \/\/ Transformation du chiffre en binaire\r\n  for (let i = 0; i &lt; 4; i++) {    \/\/ 4 fen\u00eatres par colonne\r\n      c = document.getElementById(col+(i+1))  \/\/ La fen\u00eatre\r\n      c.setAttribute('fill', b&#091;i] == '0' ? '#490101' : 'yellow');\r\n  }\r\n }\n\n&gt;&gt; ETAT(6, 'hu') va allumer ou \u00e9teindre la colonne \"heure unit\u00e9s\" pour afficher 6<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Version hexad\u00e9cimale (pour les designers)<\/h2>\n\n\n\n<p><a href=\"https:\/\/uabox.univ-angers.fr\/index.php\/s\/lXU0q5GskGpZDZk\" target=\"_blank\" rel=\"noreferrer noopener\">T\u00e9l\u00e9chargez <\/a>| <a rel=\"noreferrer noopener\" href=\"http:\/\/schraf.chez-alice.fr\/fb\/horloges\/horlogev7.html\" data-type=\"page\" target=\"_blank\">Voir la d\u00e9mo<\/a> en ligne<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-19.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"228\" src=\"https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-19-1024x228.png\" alt=\"\" class=\"wp-image-787\" srcset=\"https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-19-1024x228.png 1024w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-19-300x67.png 300w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-19-768x171.png 768w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-19-500x111.png 500w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-19.png 1323w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>#0E = 14, #2A = 2*16+10=42, #14=1*16+4=20, il est <strong>14 h 42 min 20 s<\/strong><\/figcaption><\/figure>\n\n\n\n<p>La notation utilis\u00e9e est celle que l&rsquo;on trouve pour le codage des couleurs (retouche d&rsquo;images, HTML&#8230;), par exemple le <strong>rouge<\/strong> vif correspond \u00e0 <strong>#FF0000<\/strong>. Le programme est quasi identique \u00e0 la version binaire :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&gt;&gt; HEX = n =&gt; ('0' + n.toString(16)).slice(-2).toUpperCase()\n\n&gt;&gt; HEX(14)\n'0E'\n&gt;&gt; HEX(42)\n'2A'\n&gt;&gt; HEX(20)\n'14'<\/code><\/pre>\n\n\n\n<p>Inversement, pour d\u00e9coder, il faut prendre <strong>l&rsquo;unit\u00e9<\/strong> (entre <strong>0<\/strong> et <strong>F<\/strong>) et <strong>ajouter<\/strong> <strong>16 fois<\/strong> la <strong>dizaine<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Horloge de Fibonacci<\/h2>\n\n\n\n<p><a href=\"https:\/\/uabox.univ-angers.fr\/index.php\/s\/Rw9tetHVFUJauzw\" target=\"_blank\" rel=\"noreferrer noopener\">T\u00e9l\u00e9chargez <\/a>| <a rel=\"noreferrer noopener\" href=\"http:\/\/schraf.chez-alice.fr\/fb\/horloges\/horlogev8.html\" target=\"_blank\">Voir la d\u00e9mo<\/a> en ligne<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-20.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"298\" src=\"https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-20-1024x298.png\" alt=\"\" class=\"wp-image-788\" srcset=\"https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-20-1024x298.png 1024w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-20-300x87.png 300w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-20-768x224.png 768w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-20-1536x447.png 1536w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-20-500x146.png 500w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-20.png 1672w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>7e nombre de Fibonacci = 13, 9e+6e+3e = 34+8+2 = 44, il est <strong>13 h 44 min<\/strong><\/figcaption><\/figure>\n\n\n\n<p>La suite de <strong>Fibonacci<\/strong> est : <strong>0,1,1,2,3,5,8,13,21,34,55,89&#8230;<\/strong> o\u00f9 le <strong>terme suivant<\/strong> est la <strong>somme <\/strong>des<strong> 2 pr\u00e9c\u00e9dents<\/strong>.<\/p>\n\n\n\n<p><strong>Th\u00e9or\u00e8me de Zeckendorf<\/strong> : <strong>Tous<\/strong> les <strong>entiers<\/strong> peuvent s&rsquo;\u00e9crire comme une <strong>somme<\/strong> de <strong>nombres<\/strong> de <strong>Fibonacci<\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Liste des nombres de Fibonacci qui seront utiles\n&gt;&gt; F = &#091;0,1,1,2,3,5,8,13,21,34,55]\n\n\/\/ D\u00e9composition de n en somme\n&gt;&gt; FIBO = n =&gt; {\nres = &#091; ]        \/\/ R\u00e9sultat final\nwhile (n &gt; 0) {  \/\/ Tant que n n'est pas nul\n \/\/ On cherche le plus grand nb de Fibonacci inf\u00e9rieur \u00e0 n\n a = F.filter(v =&gt; v &lt;= n).slice(-1)&#091;0]\n \/\/ On l'ajoute au tableau\n res.push(F.indexOf(a))\n \/\/ n diminue du nombre trouv\u00e9\n n -= a\n}\nreturn res   \/\/ On retourne le r\u00e9sultat\n}\n\n&gt;&gt; FIBO(13)\n&#091;7]            \/\/ 13 = F(7)\n\n&gt;&gt; FIBO(44)\n&#091;9, 6, 3]      \/\/ 44 = F(9)+F(6)+F(3)\n\n&gt;&gt; FIBO(51)\n(4)&nbsp;&#091;9, 7, 4, 1]  \/\/ 51 = F(9)+F(7)+F(4)+F(1)<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Horloge romaine<\/h2>\n\n\n\n<p><a href=\"https:\/\/uabox.univ-angers.fr\/index.php\/s\/mm6PzdwGdgkQACs\" target=\"_blank\" rel=\"noreferrer noopener\">T\u00e9l\u00e9chargez <\/a>| <a rel=\"noreferrer noopener\" href=\"http:\/\/schraf.chez-alice.fr\/fb\/horloges\/horlogev9.html\" target=\"_blank\">Voir la d\u00e9mo<\/a> en ligne<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-21.png\"><img loading=\"lazy\" decoding=\"async\" width=\"719\" height=\"578\" src=\"https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-21.png\" alt=\"\" class=\"wp-image-798\" srcset=\"https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-21.png 719w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-21-300x241.png 300w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-21-373x300.png 373w\" sizes=\"auto, (max-width: 719px) 100vw, 719px\" \/><\/a><figcaption>IX = 9, XLVIII = 48, XXIV=24, il est <strong>9 h 48 min 24 s<\/strong><\/figcaption><\/figure>\n\n\n\n<p>On trouve facilement sur Internet un algorithme pour <strong>convertir<\/strong> un <strong>nombre<\/strong> en <strong>num\u00e9rotation romaine<\/strong> :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var arabe = &#091;1000,900,500,400,100,90,50,40,10,9,5,4,1]\nvar romain = 'M,CM,D,CD,C,XC,L,XL,X,IX,V,IV,I'.split(',')\n \nvar CONV = nb =&gt; {\n if (nb == 0) return ' '\n var s = ''\n for (i in arabe) {\n  var q = 0 | nb \/ arabe&#091;i];     \/\/ division enti\u00e8re\n  var nb = nb % arabe&#091;i]         \/\/ reste de la division \n  s +=  romain&#091;i].repeat(q)\n }\n return s\n}\n\n&gt;&gt; CONV(9)\n'IX'\n\n&gt;&gt; CONV(48)\n'XLVIII'\n\n&gt;&gt; CONV(24)\n'XXIV'\n<\/code><\/pre>\n\n\n\n<p>Exemple du d\u00e9roulement de l&rsquo;algorithme pour 47 (<strong>Div<\/strong> = Division): <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Reste = 47\nDiv du reste par 1000 = 0, reste = 47, ajout 0 = \nDiv du reste par 900 = 0, reste = 47, ajout 0 = \nDiv du reste par 500 = 0, reste = 47, ajout 0 = \nDiv du reste par 400 = 0, reste = 47, ajout 0 = \nDiv du reste par 100 = 0, reste = 47, ajout 0 = \nDiv du reste par 90 = 0, reste = 47, ajout 0 = \nDiv du reste par 50 = 0, reste = 47, ajout 0 = \nDiv du reste par 40 = 1, reste = 7, ajout 40 = XL   \/\/ 40*1\nDiv du reste par 10 = 0, reste = 7, ajout 0 = XL\nDiv du reste par 9 = 0, reste = 7, ajout 0 = XL\nDiv du reste par 5 = 1, reste = 2, ajout 5 = XLV    \/\/ 5*1\nDiv du reste par 4 = 0, reste = 2, ajout 0 = XLV\nDiv du reste par 1 = 2, reste = 0, ajout 2 = XLVII  \/\/ 1*2<\/code><\/pre>\n\n\n\n<p>Pour ne pas voir les secondes, utilisez ce code :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>setInterval(function x() {\n  var hm = HM(new Date().toLocaleTimeString())\n  document.querySelector(\"#hr\").innerHTML = CONV(hm&#091;0])\n  document.querySelector(\"#mn\").innerHTML = CONV(hm&#091;1])\n  return x\n}(), 60000);<\/code><\/pre>\n\n\n\n<p>et supprimez la ligne :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div id='se'&gt;&lt;\/div&gt; <\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Horloge \u00ab\u00a0IL RESTE\u00a0\u00bb<\/h2>\n\n\n\n<p><a href=\"https:\/\/uabox.univ-angers.fr\/index.php\/s\/kVN7Qt2BWqUKhyM\" target=\"_blank\" rel=\"noreferrer noopener\">T\u00e9l\u00e9chargez <\/a>(changement toutes les 30 secondes) | <a rel=\"noreferrer noopener\" href=\"http:\/\/schraf.chez-alice.fr\/fb\/horloges\/horlogev10.html\" data-type=\"URL\" target=\"_blank\">Voir la d\u00e9mo<\/a> (changement toutes les 4 secondes) <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-22.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"320\" src=\"https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-22-1024x320.png\" alt=\"\" class=\"wp-image-805\" srcset=\"https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-22-1024x320.png 1024w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-22-300x94.png 300w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-22-768x240.png 768w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-22-1536x480.png 1536w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-22-500x156.png 500w, https:\/\/blog.univ-angers.fr\/mathsinfo\/files\/2022\/08\/image-22.png 1746w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption><strong>Nombre<\/strong> de <strong>minutes<\/strong> <strong>avant<\/strong> la <strong>prochaine heure enti\u00e8re<\/strong>, ici encore<strong> 33 minutes<\/strong><\/figcaption><\/figure>\n\n\n\n<p>C&rsquo;est le m\u00eame programme que addition et soustraction, il suffit de remplacer l&rsquo;heure par <strong>IL RESTE<\/strong> et de trouver un calcul qui donnera le nombre <strong>60 &#8211; minutes<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>J&rsquo;ai eu l&rsquo;occasion de faire plusieurs vid\u00e9os de montres originales sur ma chaine Youtube, en particulier : Cr\u00e9er des montres Tokyoflash (Python sur NUMWORKS) JavaScript &amp; SVG &#8211; Montre RADIOACTIVE JavaScript &amp; SVG &#8211; Simulation de la montre STENCIL TokyoFlash &hellip; <a href=\"https:\/\/blog.univ-angers.fr\/mathsinfo\/2022\/08\/23\/horloges-mathematiques\/\">Continuer la lecture <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":4913,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-767","post","type-post","status-publish","format-standard","hentry","category-twitter"],"_links":{"self":[{"href":"https:\/\/blog.univ-angers.fr\/mathsinfo\/wp-json\/wp\/v2\/posts\/767","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.univ-angers.fr\/mathsinfo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.univ-angers.fr\/mathsinfo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.univ-angers.fr\/mathsinfo\/wp-json\/wp\/v2\/users\/4913"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.univ-angers.fr\/mathsinfo\/wp-json\/wp\/v2\/comments?post=767"}],"version-history":[{"count":36,"href":"https:\/\/blog.univ-angers.fr\/mathsinfo\/wp-json\/wp\/v2\/posts\/767\/revisions"}],"predecessor-version":[{"id":833,"href":"https:\/\/blog.univ-angers.fr\/mathsinfo\/wp-json\/wp\/v2\/posts\/767\/revisions\/833"}],"wp:attachment":[{"href":"https:\/\/blog.univ-angers.fr\/mathsinfo\/wp-json\/wp\/v2\/media?parent=767"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.univ-angers.fr\/mathsinfo\/wp-json\/wp\/v2\/categories?post=767"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.univ-angers.fr\/mathsinfo\/wp-json\/wp\/v2\/tags?post=767"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}