{"id":3665,"date":"2024-02-09T18:57:10","date_gmt":"2024-02-09T17:57:10","guid":{"rendered":"https:\/\/eva.louis-le-grand.net\/maths\/?p=3665"},"modified":"2024-02-09T19:45:53","modified_gmt":"2024-02-09T18:45:53","slug":"gateau-musical","status":"publish","type":"post","link":"https:\/\/eva.louis-le-grand.net\/maths\/index.php\/2024\/02\/09\/gateau-musical\/","title":{"rendered":"G\u00e2teau musical"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"585\" src=\"https:\/\/eva.louis-le-grand.net\/maths\/wp-content\/uploads\/2024\/02\/mikado-musique-1024x585.jpg\" alt=\"\" class=\"wp-image-3670\" srcset=\"https:\/\/eva.louis-le-grand.net\/maths\/wp-content\/uploads\/2024\/02\/mikado-musique-1024x585.jpg 1024w, https:\/\/eva.louis-le-grand.net\/maths\/wp-content\/uploads\/2024\/02\/mikado-musique-300x171.jpg 300w, https:\/\/eva.louis-le-grand.net\/maths\/wp-content\/uploads\/2024\/02\/mikado-musique-768x439.jpg 768w, https:\/\/eva.louis-le-grand.net\/maths\/wp-content\/uploads\/2024\/02\/mikado-musique-1536x878.jpg 1536w, https:\/\/eva.louis-le-grand.net\/maths\/wp-content\/uploads\/2024\/02\/mikado-musique-2048x1170.jpg 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">La musique existe gr\u00e2ce au miracle: <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/eva.louis-le-grand.net\/maths\/wp-content\/ql-cache\/quicklatex.com-ce0a6bd45d54c6cfc1ef180016bc5eaa_l3.png\" class=\"ql-img-inline-formula \" alt=\"&#51;&#94;&#123;&#49;&#50;&#125;&#32;&#61;&#32;&#50;&#94;&#123;&#49;&#57;&#125;\" title=\"Rendered by QuickLaTeX.com\" height=\"15\" width=\"70\" style=\"vertical-align: 0px;\"\/>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pas rout \u00e0 fait, mais presque. <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/eva.louis-le-grand.net\/maths\/wp-content\/ql-cache\/quicklatex.com-f93b6adf5116dba79af44e755265ee5a_l3.png\" class=\"ql-img-inline-formula \" alt=\"&#60;&#101;&#109;&#62;&#50;&#94;&#123;&#49;&#57;&#47;&#49;&#50;&#125;&#32;&#61;&#32;&#50;&#46;&#57;&#57;&#54;&#54;&#60;&#47;&#101;&#109;&#62;\" title=\"Rendered by QuickLaTeX.com\" height=\"21\" width=\"256\" style=\"vertical-align: -5px;\"\/><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Voici le r\u00e9sultat en musique:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"720\" style=\"aspect-ratio: 1280 \/ 720;\" width=\"1280\" controls src=\"https:\/\/eva.louis-le-grand.net\/maths\/wp-content\/uploads\/2024\/02\/gateau-musical.mp4\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Voici la discussion avec ChatGPT: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&gt; ecris le code pour dessiner en js: les notes de musiques suivent une frequence exponentielle. dessinne des bars proportionnelle \u00e0 la longueur des frequences en indiquant les notes (blanches et noires) sur 2 octaves\n\nR\u00e9ponse :\nVoici le code. Assurez-vous d'avoir un \u00e9l\u00e9ment canvas dans votre HTML avec un identifiant \"canvas\" :\n\n&gt; met tou dans le code js y compris pour ajouter le canvas dans la page\n\n&gt; Maintenant au lieu de mettre nes notes dans l'odre avec les barres au dessus, met les barres au dessus des notes dans l'ordre de Vive le Vent. reduit la largeur des colonnes noires \u00e0 60% de l'espacement entre les colonne, et fais les barres 2 fois plus hautes<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Il n&rsquo;y a plus qu&rsquo;a copier\/coller le code fourni dans la console du navigateur Google Chrome sur une page pour avoir  la longueur des mikado pour le morceau de musique. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Cr\u00e9ation du canevas\n    const canvas = document.createElement(\"canvas\");\n    canvas.width = 800;\n    canvas.height = 400;\n    document.body.appendChild(canvas);\n\n    const ctx = canvas.getContext(\"2d\");\n\n    \/\/ Cr\u00e9ation d'un tableau contenant les fr\u00e9quences des notes de deux octaves\n    const frequencies = &#91;];\n    for (let i = 0; i &lt; 24; i++) {\n        frequencies.push(Math.pow(2, i \/ 12) * 440); \/\/ 440Hz est la fr\u00e9quence du La 4\n    }\n\n    \/\/ Cr\u00e9ation d'un tableau contenant les noms des notes\n    const noteNames = &#91;\n        \"La\", \"La#\", \"Si\", \"Do\", \"Do#\", \"R\u00e9\", \"R\u00e9#\", \"Mi\", \"Fa\", \"Fa#\", \"Sol\", \"Sol#\"\n    ];\n\n    \/\/ Cr\u00e9ation d'un tableau contenant les noms des notes pour \"Vive le Vent\"\n    const songNotes = &#91;\"Mi\", \"Mi\", \"Mi\", \"Mi\", \"Mi\", \"Mi\", \"Mi\", \"Sol\", \"Do\", \"R\u00e9\", \"Mi\", \"Fa\", \"Fa\", \"Fa\", \"Mi\", \"Mi\", \"Mi\", \"R\u00e9\", \"R\u00e9\", \"R\u00e9\", \"Mi\", \"R\u00e9\", \"Sol\"];\n\n    \/\/ Largeur et hauteur du canevas\n    const width = canvas.width;\n    const height = canvas.height;\n\n    \/\/ Dessiner les barres proportionnelles\n    for (let i = 0; i &lt; songNotes.length; i++) {\n        const x = (i \/ songNotes.length) * width;\n        const noteIndex = noteNames.indexOf(songNotes&#91;i]);\n        const frequency = frequencies&#91;noteIndex];\n        const barHeight = (frequency \/ frequencies&#91;frequencies.length - 1]) * height * 2; \/\/ Barres deux fois plus hautes\n        const y = height - barHeight;\n        const barWidth = (0.6 * width) \/ songNotes.length; \/\/ Largeur de la barre r\u00e9duite \u00e0 60% de l'espacement entre les colonnes\n\n        \/\/ Remplissage de la barre\n        ctx.fillStyle = \"black\";\n        ctx.fillRect(x + ((1 - 0.6) \/ 2) * barWidth, y, barWidth, barHeight);\n\n        \/\/ Ajouter le nom de la note (en blanc)\n        ctx.fillStyle = \"white\";\n        ctx.font = \"bold 12px Arial\";\n        ctx.textAlign = \"center\";\n        ctx.fillText(songNotes&#91;i], x + (0.5 * barWidth) + ((1 - 0.6) \/ 2) * barWidth, height + 15); \/\/ \u00c9criture en dessous de la barre\n    }<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"400\" src=\"https:\/\/eva.louis-le-grand.net\/maths\/wp-content\/uploads\/2024\/02\/image.png\" alt=\"\" class=\"wp-image-3666\" srcset=\"https:\/\/eva.louis-le-grand.net\/maths\/wp-content\/uploads\/2024\/02\/image.png 800w, https:\/\/eva.louis-le-grand.net\/maths\/wp-content\/uploads\/2024\/02\/image-300x150.png 300w, https:\/\/eva.louis-le-grand.net\/maths\/wp-content\/uploads\/2024\/02\/image-768x384.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<div style='border: 2px solid #88AAAA; background: #DDFFFF; padding:8px;' ><img decoding=\"async\" src=\"https:\/\/eva.louis-le-grand.net\/maths\/wp-content\/uploads\/2023\/10\/qui.png\" alt=\"\" class=\"wp-image-1120\" width=30 \/> <b>Pour aller plus loin<\/b><br>\n&#8211; Sur les rythmes (euclidien), la cha\u00eene YouTube <i>@mathemusique<\/i> qui a la bonne id\u00e9e de donner parfois des conf\u00e9rences en vrai \u00e0 laquelle j&rsquo;ai eu la chance d&rsquo;assister et qu&rsquo;il faut encourager. Ah si tous les \u00e9tudiants en th\u00e8se louaient des cin\u00e9mas comme lui pour donner des conf\u00e9rences!\nhttps:\/\/www.youtube.com\/@mathemusique\n<br>\n&#8211; Le spectacle <i>Math\u2019n pop<\/i> de <i>Andreatta Moreno<\/i> \u00e0 voir absolument qui fait de la musique avec des cycles hamiltoniens que j&rsquo;ai d\u00e9couvert au Festival pas assez connu des Syst\u00e8mes Complexes: <i>Artex<\/i> d&rsquo;Arts et de Science organis\u00e9 par <i>David Chavalarias<\/i>.<br>\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/sxayV182TPk?si=ihqL5fcyRkAX_ghf\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><br>\nPeut-\u00eatre aurez-vous l&rsquo;occasion de les voir ou re-voir s&rsquo;ils sont encore invit\u00e9s \u00e0 se repr\u00e9senter dans des espaces tels que universit\u00e9s, MMI, Maison Henri-Poincar\u00e9, Mus\u00e9es, Festivals de Fleurance, Math-en-Sc\u00e8ne&#8230; Vive le spectacle vivant ! Effet Wow garantie comme dirait Very Math Trip. Question spectacle vivant, personnellement, j&rsquo;attends que quelqu&rsquo;un invite en France les anglo-saxons <i>Matt Parker<\/i> et ses comp\u00e8res tels que Hannah Fry.\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>La musique existe gr\u00e2ce au miracle: . Pas rout \u00e0 fait, mais presque. Voici le r\u00e9sultat en musique: Voici la discussion avec ChatGPT: Il n&rsquo;y a plus qu&rsquo;a copier\/coller le code fourni dans la console du navigateur Google Chrome sur une page pour avoir la longueur des mikado pour le morceau de musique. Pour aller [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3672,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3665","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-non-classe"],"_links":{"self":[{"href":"https:\/\/eva.louis-le-grand.net\/maths\/index.php\/wp-json\/wp\/v2\/posts\/3665","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eva.louis-le-grand.net\/maths\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eva.louis-le-grand.net\/maths\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eva.louis-le-grand.net\/maths\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eva.louis-le-grand.net\/maths\/index.php\/wp-json\/wp\/v2\/comments?post=3665"}],"version-history":[{"count":11,"href":"https:\/\/eva.louis-le-grand.net\/maths\/index.php\/wp-json\/wp\/v2\/posts\/3665\/revisions"}],"predecessor-version":[{"id":3682,"href":"https:\/\/eva.louis-le-grand.net\/maths\/index.php\/wp-json\/wp\/v2\/posts\/3665\/revisions\/3682"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/eva.louis-le-grand.net\/maths\/index.php\/wp-json\/wp\/v2\/media\/3672"}],"wp:attachment":[{"href":"https:\/\/eva.louis-le-grand.net\/maths\/index.php\/wp-json\/wp\/v2\/media?parent=3665"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eva.louis-le-grand.net\/maths\/index.php\/wp-json\/wp\/v2\/categories?post=3665"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eva.louis-le-grand.net\/maths\/index.php\/wp-json\/wp\/v2\/tags?post=3665"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}