Do Re Mi

xholonWorkbook.xml

<?xml version="1.0" encoding="UTF-8"?>
<!--Xholon Workbook http://www.primordion.com/Xholon/gwt/ MIT License, Copyright (C) Ken Webb, Tue Dec 30 2014 09:34:51 GMT-0500 (EST)-->
<XholonWorkbook>

<Notes><![CDATA[
Xholon
------
Title: Do Re Mi
Description: 
Url: http://www.primordion.com/Xholon/gwt/
InternalName: f32bc38f9d7326fa6ad9  based on c455c95cc513e7f88cb1
Keywords: 

My Notes
--------
I could have an Avatar that moves between notes.

I've previously explored audio in several Xholon workbooks (in order from oldest to newest):
9275385              HTML5 Audio Synthesis
8ed2bb6b43bd69b8a8c4 Structure in Music
d64f5762a7d3faa62d2e HTML5 Web Audio API - example 2
ec9a9d69155bd997c157 HTML5 Web Audio API - example 2 with Java classes

To convert color names to rgba(r,g,b,a) using d3:
var color = d3.rgb("red");
console.log("rgba(" + color.r + "," + color.g + "," + color.b + ",1.0)");

References
----------
(1) http://en.wikipedia.org/wiki/Solf%C3%A8ge
    Do Re Mi Fa So La Ti and other note naming conventions
    "Isaac Newton[citation needed] had associated the seven solfège syllables with the seven colours of the rainbow and surmised that each colour vibrated accordingly (a concept possibly related to the modern view of chromesthesia). Thus, red has the least amount of vibration while violet vibrates the most."
    These are the colors I use in this workbook.
    Children's xylophones also use a rainbow color sequence.

(2) http://en.wikipedia.org/wiki/Do-Re-Mi
    the song

(3) http://en.wikipedia.org/wiki/Scale_(music)

(4) http://bl.ocks.org/mbostock/5723d93e4f617b542991
    this is a circular piano keyboard with 2 octaves; including the sounds

]]></Notes> 

<_-.XholonClass>
  
  <TheSystem/>
  
  <Scale/>
  <Note>
    <Do/>
    <Re/>
    <Mi/>
    <Fa/>
    <So/>
    <La/>
    <Ti/>
  </Note>
  
</_-.XholonClass>

<xholonClassDetails>
  <Do><Color>rgba(255,0,0,0.8)</Color></Do> <!-- red -->
  <Re><Color>rgba(255,165,0,0.8)</Color></Re> <!-- orange -->
  <Mi><Color>rgba(255,255,0,0.8)</Color></Mi> <!-- yellow -->
  <Fa><Color>rgba(0,255,0,0.8)</Color></Fa> <!-- green -->
  <So><Color>rgba(0,0,255,0.8)</Color></So> <!-- blue -->
  <La><Color>rgba(75,0,130,0.8)</Color></La> <!-- indigo -->
  <Ti><Color>rgba(128,0,128,0.8)</Color></Ti> <!-- purple -->
  
  <Avatar><Color>rgba(0,0,0,0.2)</Color></Avatar>
</xholonClassDetails>

<TheSystem>
  
  <Scale>
    <Do roleName="Do">
      <Avatar roleName="Xylophone Player"><Attribute_String><![CDATA[
script;
next;
next;
next;
next;
next;
next;
next;
wait 1;
prev;
prev;
prev;
prev;
prev;
prev;
prev;
      ]]></Attribute_String></Avatar>
    </Do>
    <Re roleName="Re"/>
    <Mi roleName="Mi"/>
    <Fa roleName="Fa"/>
    <So roleName="So"/>
    <La roleName="La"/>
    <Ti roleName="Ti"/>
  </Scale>
  
  <Animate duration="0.8" selection="#one" xpath="./TheSystem/Scale" cssStyle=".d3cpnode circle {stroke-width: 0px;}" efParams="{&quot;selection&quot;:&quot;#one&quot;,&quot;sort&quot;:&quot;disable&quot;,&quot;width&quot;:300,&quot;height&quot;:300,&quot;mode&quot;:&quot;tween&quot;,&quot;labelContainers&quot;:false,&quot;includeId&quot;:true,&quot;shape&quot;:&quot;circle&quot;,&quot;maxChars&quot;:2}"/>
  
</TheSystem>

<TheSystembehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
var me, beh = {
postConfigure: function() {
  me = this.cnode.parent();
  
  // SVG caption
  $wnd.xh.svg = {};
  $wnd.xh.svg.caption = $doc.createElement("p");
  $wnd.xh.svg.caption.textContent = $wnd.xh.param("ModelName");
  
  var div = $doc.querySelector("#xhanim");
  
  // create a new div for this animation
  var one = $doc.createElement("div");
  one.setAttribute("id", "one");
  div.appendChild(one);
  
  one.appendChild($wnd.xh.svg.caption);
  //$wnd.xh.root().append(this.cnode.remove());
}
}
]]></TheSystembehavior>

<Avatarbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
var me, beh = {
postConfigure: function() {
  me = this.cnode.parent();
  $wnd.xh.root().append(this.cnode.remove());
  //me.println(me.parent().role());
  me.action("param caption #xhanim>#one>p;param transcript false;param repeat true;");
},

act: function() {
  //me.action("next;");
  //me.println(me.parent().role());
}
}
]]></Avatarbehavior>

<SvgClient><Attribute_String roleName="svgUri"><![CDATA[data:image/svg+xml,

]]></Attribute_String><Attribute_String roleName="setup">${MODELNAME_DEFAULT},${SVGURI_DEFAULT}</Attribute_String></SvgClient>

</XholonWorkbook>