sugarlabs · walterbender · Dec 3, 2024 · Dec 3, 2024
diff --git a/examples/Galton-box-with-retorgrade.html b/examples/Galton-box-with-retorgrade.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="description" content="No description provided"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> <title>My Project</title> <meta property="og:site_name" content="Music Blocks"/> <meta property="og:type" content="website"/> <meta property="og:title" content="Music Blocks Project - My Project"/> <meta property="og:description" content="No description provided"/> <style>body{background-color: #dbf0fb;}#main{background-color: white; padding: 5%; position: fixed; width: 80vw; height: max-content; margin: auto; top: 0; left: 0; bottom: 0; right: 0; display: flex; flex-direction: column; justify-content: center; text-align: center; color: #424242; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); font-family: "Roboto", "Helvetica","Arial",sans-serif;}h3{font-weight: 400; font-size: 36px; margin-top: 10px;}hr{border-top: 0px solid #ccc; margin: 1em;}.btn{border: solid; border-color: #96D3F3; padding: 5px 10px; line-height: 50px; color: #0a3e58;}.btn:hover{transition: 0.4s; -webkit-transition: 0.3s; -moz-transition: 0.3s; background-color: #96D3F3;}.code{word-break: break-all; height: 15vh; background: #f6f8fa; color: #494949; text-align: justify; margin-right: 10vw; margin-left: 10vw; padding: 16px; overflow: auto; line-height: 1.45; background-color: #f6f8fa; border-radius: 3px; font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;}.image{border-radius: 2px 2px 0 0; position: relative; background-color: #96D3F3;}.image-div{margin-bottom: 10px;}.moreinfo-div{margin-top: 20px;}h4{font-weight: 500; font-size: 1.4em; margin-top: 10px; margin-bottom: 10px;}.tbcode{margin-bottom: 10px;}</style></head><body> <div id="main"> <div class="image-div"><img class="image" id="project-image" src=""></div><h3 id="title">Music Blocks Project - My Project</h3> <p>No description provided</p><hr> <div> <div style="color: #9E9E9E"><p>This project was created in Music Blocks (<a href="https://musicblocks.sugarlabs.org" target="_blank">https://musicblocks.sugarlabs.org</a>). Music Blocks is a collection of tools for exploring fundamental musical concepts in a fun way. Music Blocks is a Free/Libre Software application. The source code can be accessed at <a href="https://github.com/sugarlabs/musicblocks" target="_blank">https://github.com/sugarlabs/musicblocks</a>. For more information, please consult the <a href="../guide/guide.html" target="_blank">Music Blocks Guide</a>.</p><p>To run this project, open Music Blocks in a web browser and drag and drop this file into the browser window. Alternatively, open the file in Music Blocks using the Load project button.</p></div><div class="moreinfo-div"> <div class="tbcode"><h4>Project Code</h4>This code stores data about the blocks in a project. <a href="javascript:toggle();" id="showhide">Show</a></div> <div class="code">[[0,["start",{"id":1732206676179,"collapsed":false,"xcor":2.4868995751603507e-14,"ycor":289.28571428571394,"heading":45,"color":58.31,"shade":60,"pensize":5,"grey":85.71428571428571}],168,49,[null,44,null]],[1,["newnote",{"collapsed":false}],1034,97,[16,2,5,7]],[2,"divide",1136,97,[1,3,4]],[3,["number",{"value":1}],1222,97,[2]],[4,["number",{"value":4}],1222,129,[2]],[5,"vspace",1048,129,[1,6]],[6,"steppitch",1048,161,[5,9,93]],[7,"hidden",1034,286,[1,null]],[8,"forward",1048,225,[93,50,null]],[9,["namedbox",{"value":"box"}],1184,161,[6]],[10,["storein2",{"value":"box"}],747,121,[22,11,25]],[11,["number",{"value":1}],853,121,[10]],[12,["storein2",{"value":"box"}],766,377,[19,13,27]],[13,["number",{"value":-1}],872,377,[12]],[14,["action",{"collapsed":false}],1020,56,[null,15,16,null]],[15,["text",{"value":"common"}],1152,65,[14]],[16,"hidden",1034,97,[14,1]],[17,["action",{"collapsed":false}],752,336,[null,18,19,null]],[18,["text",{"value":"left"}],884,345,[17]],[19,"hidden",766,377,[17,12]],[20,["action",{"collapsed":false}],733,80,[null,21,22,null]],[21,["text",{"value":"right"}],865,89,[20]],[22,"hidden",747,121,[20,10]],[23,["nameddo",{"value":"common"}],766,441,[27,62]],[24,["nameddo",{"value":"common"}],747,185,[25,60]],[25,"setheading",747,153,[10,26,24]],[26,["number",{"value":135}],853,153,[25]],[27,"setheading",766,409,[12,28,23]],[28,["number",{"value":225}],872,409,[27]],[29,"oneOf",284,313,[30,31,33]],[30,"do",210,313,[34,29,32]],[31,["text",{"value":"left"}],370,313,[29]],[32,"vspace",210,345,[30,null]],[33,["text",{"value":"right"}],370,345,[29]],[34,"repeat",196,281,[42,35,30,96]],[35,["modelength",{"value":7}],298,281,[34]],[36,["action",{"collapsed":false}],414,456,[null,37,38,null]],[37,["text",{"value":"goto top"}],546,465,[36]],[38,"hidden",428,497,[36,47]],[39,["nameddo",{"value":"goto top"}],182,217,[54,42]],[40,"setxy",442,656,[89,41,57,58]],[41,["number",{"value":0}],516,656,[40]],[42,"repeat",182,249,[39,43,34,null]],[43,["number",{"value":4}],284,249,[42]],[44,"setkey2",182,90,[0,45,46,49]],[45,["notename",{"value":"C"}],258,90,[44]],[46,["modename",{"value":"major"}],258,122,[44]],[47,"penup",428,497,[38,84]],[48,"pendown",428,781,[92,59]],[49,["storein2",{"value":"box1"}],182,153,[44,53,54]],[50,["namedbox",{"value":"box1"}],1127,225,[8]],[51,["height",{"value":810}],374,153,[53]],[52,["modelength",{"value":7}],374,185,[53]],[53,"divide",288,153,[49,51,52]],[54,"vspace",182,185,[49,39]],[55,["toppos",{"value":405}],602,688,[57]],[56,["namedbox",{"value":"box1"}],602,720,[57]],[57,"minus",516,688,[40,55,56]],[58,"vspace",442,719,[40,null]],[59,"emptyHeap",428,813,[48,null]],[60,"push",747,217,[24,78,null]],[61,["number",{"value":-1}],1248,407,[66]],[62,"push",766,473,[23,79,null]],[63,["action",{"collapsed":false}],1128,366,[null,64,65,null]],[64,["text",{"value":"undo right"}],1260,375,[63]],[65,"hidden",1142,407,[63,66]],[66,["storein2",{"value":"box"}],1142,407,[65,61,67]],[67,"setheading",1142,439,[66,68,69]],[68,["number",{"value":315}],1248,439,[67]],[69,["nameddo",{"value":"common"}],1142,471,[67,null]],[70,["action",{"collapsed":false}],864,546,[null,71,72,null]],[71,["text",{"value":"undo left"}],996,555,[70]],[72,"hidden",878,587,[70,73]],[73,["storein2",{"value":"box"}],878,587,[72,74,75]],[74,["number",{"value":1}],984,587,[73]],[75,"setheading",878,619,[73,76,77]],[76,["number",{"value":45}],984,619,[75]],[77,["nameddo",{"value":"common"}],878,651,[75,null]],[78,["text",{"value":"undo right"}],821,217,[60]],[79,["text",{"value":"undo left"}],840,473,[62]],[80,"repeat",196,439,[96,81,82,97]],[81,["modelength",{"value":7}],298,439,[80]],[82,"do",210,471,[80,83,null]],[83,["pop",{"value":"undo left"}],284,471,[82]],[84,["newnote",{"collapsed":false}],428,529,[47,85,88,92]],[85,"divide",530,529,[84,86,87]],[86,["number",{"value":1}],616,529,[85]],[87,["number",{"value":4}],616,561,[85]],[88,"vspace",442,561,[84,89]],[89,"pitch",442,593,[88,90,91,40]],[90,["solfege",{"value":"sol"}],516,593,[89]],[91,["number",{"value":4}],516,625,[89]],[92,"hidden",428,781,[84,48]],[93,"setcolor",1048,193,[6,94,8]],[94,["outputtools",{"value":"pitch to color"}],1133,193,[93,95]],[95,["currentpitch",{"value":"G4"}],1347,193,[94]],[96,"penup",196,407,[34,80]],[97,"pendown",196,534,[80,null]]]</div></div></div></div><script type="text/javascript">function toggle(){if (document.getElementsByClassName("code")[0].style.display=="none"){document.getElementsByClassName("code")[0].style.display="flex";document.getElementById("showhide").textContent = "Hide";} else {document.getElementsByClassName("code")[0].style.display="none";document.getElementById("showhide").textContent = "Show";}} var name=decodeURIComponent(window.location.pathname.split("/").pop().slice(0, -5)); var prefix="Music Blocks Project - "; var title=prefix+name; document.querySelector('meta[property="og:title"]').content=title; document.title=name; document.getElementById("title").textContent=title; document.getElementsByClassName("code")[0].style.display = "none";</script></body></html>
diff --git a/examples/README.md b/examples/README.md
@@ -403,7 +403,8 @@ Music Blocks has handy widgets for various musical concepts to create musical co
 | equal-temperament-calculation.html | Calculate an octave tuned to equal temperament by using 2^(1/12) |
 | Twinkle-Twinkle-with-Pythagorean-tuning.html | Listen to the difference tuning makes |
 | el.html | Experimentation with the *One of this or that* block.
-| Galton-music.html | Modeled after a Galton box, a Gaussian distribution of tones is generated. |
+| Galton-music.html | Modeled after a Galton box, a Gaussian distribution of tones is generated. A nice way to explore musical mode. |
+| Galton-box-with-retrograde.html | Colorful twist on Galton box example |
 | record-player.html | Record and playback a sequence of notes on a "vinyl". |
 | stocks.html | Generated from a Python script, this project is a musical representation of the price of a stock over time |
 | Morse-code-rhythms.html | Generate Morse code rhythms by typing in letters that generate rhythmic patterns |
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="description" content="No description provided"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> <title>My Project</title> <meta property="og:site_name" content="Music Blocks"/> <meta property="og:type" content="website"/> <meta property="og:title" content="Music Blocks Project - My Project"/> <meta property="og:description" content="No description provided"/> <style>body{background-color: #dbf0fb;}#main{background-color: white; padding: 5%; position: fixed; width: 80vw; height: max-content; margin: auto; top: 0; left: 0; bottom: 0; right: 0; display: flex; flex-direction: column; justify-content: center; text-align: center; color: #424242; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); font-family: "Roboto", "Helvetica","Arial",sans-serif;}h3{font-weight: 400; font-size: 36px; margin-top: 10px;}hr{border-top: 0px solid #ccc; margin: 1em;}.btn{border: solid; border-color: #96D3F3; padding: 5px 10px; line-height: 50px; color: #0a3e58;}.btn:hover{transition: 0.4s; -webkit-transition: 0.3s; -moz-transition: 0.3s; background-color: #96D3F3;}.code{word-break: break-all; height: 15vh; background: #f6f8fa; color: #494949; text-align: justify; margin-right: 10vw; margin-left: 10vw; padding: 16px; overflow: auto; line-height: 1.45; background-color: #f6f8fa; border-radius: 3px; font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;}.image{border-radius: 2px 2px 0 0; position: relative; background-color: #96D3F3;}.image-div{margin-bottom: 10px;}.moreinfo-div{margin-top: 20px;}h4{font-weight: 500; font-size: 1.4em; margin-top: 10px; margin-bottom: 10px;}.tbcode{margin-bottom: 10px;}</style></head><body> <div id="main"> <div class="image-div"><img class="image" id="project-image" src=""></div><h3 id="title">Music Blocks Project - My Project</h3> <p>No description provided</p><hr> <div> <div style="color: #9E9E9E"><p>This project was created in Music Blocks (<a href="https://musicblocks.sugarlabs.org" target="_blank">https://musicblocks.sugarlabs.org</a>). Music Blocks is a collection of tools for exploring fundamental musical concepts in a fun way. Music Blocks is a Free/Libre Software application. The source code can be accessed at <a href="https://github.com/sugarlabs/musicblocks" target="_blank">https://github.com/sugarlabs/musicblocks</a>. For more information, please consult the <a href="../guide/guide.html" target="_blank">Music Blocks Guide</a>.</p><p>To run this project, open Music Blocks in a web browser and drag and drop this file into the browser window. Alternatively, open the file in Music Blocks using the Load project button.</p></div><div class="moreinfo-div"> <div class="tbcode"><h4>Project Code</h4>This code stores data about the blocks in a project. <a href="javascript:toggle();" id="showhide">Show</a></div> <div class="code">[[0,["start",{"id":1732206676179,"collapsed":false,"xcor":2.4868995751603507e-14,"ycor":289.28571428571394,"heading":45,"color":58.31,"shade":60,"pensize":5,"grey":85.71428571428571}],168,49,[null,44,null]],[1,["newnote",{"collapsed":false}],1034,97,[16,2,5,7]],[2,"divide",1136,97,[1,3,4]],[3,["number",{"value":1}],1222,97,[2]],[4,["number",{"value":4}],1222,129,[2]],[5,"vspace",1048,129,[1,6]],[6,"steppitch",1048,161,[5,9,93]],[7,"hidden",1034,286,[1,null]],[8,"forward",1048,225,[93,50,null]],[9,["namedbox",{"value":"box"}],1184,161,[6]],[10,["storein2",{"value":"box"}],747,121,[22,11,25]],[11,["number",{"value":1}],853,121,[10]],[12,["storein2",{"value":"box"}],766,377,[19,13,27]],[13,["number",{"value":-1}],872,377,[12]],[14,["action",{"collapsed":false}],1020,56,[null,15,16,null]],[15,["text",{"value":"common"}],1152,65,[14]],[16,"hidden",1034,97,[14,1]],[17,["action",{"collapsed":false}],752,336,[null,18,19,null]],[18,["text",{"value":"left"}],884,345,[17]],[19,"hidden",766,377,[17,12]],[20,["action",{"collapsed":false}],733,80,[null,21,22,null]],[21,["text",{"value":"right"}],865,89,[20]],[22,"hidden",747,121,[20,10]],[23,["nameddo",{"value":"common"}],766,441,[27,62]],[24,["nameddo",{"value":"common"}],747,185,[25,60]],[25,"setheading",747,153,[10,26,24]],[26,["number",{"value":135}],853,153,[25]],[27,"setheading",766,409,[12,28,23]],[28,["number",{"value":225}],872,409,[27]],[29,"oneOf",284,313,[30,31,33]],[30,"do",210,313,[34,29,32]],[31,["text",{"value":"left"}],370,313,[29]],[32,"vspace",210,345,[30,null]],[33,["text",{"value":"right"}],370,345,[29]],[34,"repeat",196,281,[42,35,30,96]],[35,["modelength",{"value":7}],298,281,[34]],[36,["action",{"collapsed":false}],414,456,[null,37,38,null]],[37,["text",{"value":"goto top"}],546,465,[36]],[38,"hidden",428,497,[36,47]],[39,["nameddo",{"value":"goto top"}],182,217,[54,42]],[40,"setxy",442,656,[89,41,57,58]],[41,["number",{"value":0}],516,656,[40]],[42,"repeat",182,249,[39,43,34,null]],[43,["number",{"value":4}],284,249,[42]],[44,"setkey2",182,90,[0,45,46,49]],[45,["notename",{"value":"C"}],258,90,[44]],[46,["modename",{"value":"major"}],258,122,[44]],[47,"penup",428,497,[38,84]],[48,"pendown",428,781,[92,59]],[49,["storein2",{"value":"box1"}],182,153,[44,53,54]],[50,["namedbox",{"value":"box1"}],1127,225,[8]],[51,["height",{"value":810}],374,153,[53]],[52,["modelength",{"value":7}],374,185,[53]],[53,"divide",288,153,[49,51,52]],[54,"vspace",182,185,[49,39]],[55,["toppos",{"value":405}],602,688,[57]],[56,["namedbox",{"value":"box1"}],602,720,[57]],[57,"minus",516,688,[40,55,56]],[58,"vspace",442,719,[40,null]],[59,"emptyHeap",428,813,[48,null]],[60,"push",747,217,[24,78,null]],[61,["number",{"value":-1}],1248,407,[66]],[62,"push",766,473,[23,79,null]],[63,["action",{"collapsed":false}],1128,366,[null,64,65,null]],[64,["text",{"value":"undo right"}],1260,375,[63]],[65,"hidden",1142,407,[63,66]],[66,["storein2",{"value":"box"}],1142,407,[65,61,67]],[67,"setheading",1142,439,[66,68,69]],[68,["number",{"value":315}],1248,439,[67]],[69,["nameddo",{"value":"common"}],1142,471,[67,null]],[70,["action",{"collapsed":false}],864,546,[null,71,72,null]],[71,["text",{"value":"undo left"}],996,555,[70]],[72,"hidden",878,587,[70,73]],[73,["storein2",{"value":"box"}],878,587,[72,74,75]],[74,["number",{"value":1}],984,587,[73]],[75,"setheading",878,619,[73,76,77]],[76,["number",{"value":45}],984,619,[75]],[77,["nameddo",{"value":"common"}],878,651,[75,null]],[78,["text",{"value":"undo right"}],821,217,[60]],[79,["text",{"value":"undo left"}],840,473,[62]],[80,"repeat",196,439,[96,81,82,97]],[81,["modelength",{"value":7}],298,439,[80]],[82,"do",210,471,[80,83,null]],[83,["pop",{"value":"undo left"}],284,471,[82]],[84,["newnote",{"collapsed":false}],428,529,[47,85,88,92]],[85,"divide",530,529,[84,86,87]],[86,["number",{"value":1}],616,529,[85]],[87,["number",{"value":4}],616,561,[85]],[88,"vspace",442,561,[84,89]],[89,"pitch",442,593,[88,90,91,40]],[90,["solfege",{"value":"sol"}],516,593,[89]],[91,["number",{"value":4}],516,625,[89]],[92,"hidden",428,781,[84,48]],[93,"setcolor",1048,193,[6,94,8]],[94,["outputtools",{"value":"pitch to color"}],1133,193,[93,95]],[95,["currentpitch",{"value":"G4"}],1347,193,[94]],[96,"penup",196,407,[34,80]],[97,"pendown",196,534,[80,null]]]</div></div></div></div><script type="text/javascript">function toggle(){if (document.getElementsByClassName("code")[0].style.display=="none"){document.getElementsByClassName("code")[0].style.display="flex";document.getElementById("showhide").textContent = "Hide";} else {document.getElementsByClassName("code")[0].style.display="none";document.getElementById("showhide").textContent = "Show";}} var name=decodeURIComponent(window.location.pathname.split("/").pop().slice(0, -5)); var prefix="Music Blocks Project - "; var title=prefix+name; document.querySelector('meta[property="og:title"]').content=title; document.title=name; document.getElementById("title").textContent=title; document.getElementsByClassName("code")[0].style.display = "none";</script></body></html>