[60,61,62,64,65,67,69,71] randFromArray(SOLNKEYARRAY) [[[0,0],[0.4375,0],[0.4375,6.0],[-0.4375,6.0],[-0.4375,0]]] [[[0,0],[0.4375,0],[0.4375,3.0],[0.1875,3.0],[0.1875,6.0],[0,6.0],[-0.1875,6.0],[-0.1875,3.0],[-0.4375,3.0],[-0.4375,0]]] [[[0,0],[0.4375,0],[0.4375,3.0],[0.1875,3.0],[0.1875,6.0],[0,6.0],[-0.4375,6.0],[-0.4375,0]]] [[[0,0],[0.4375,0],[0.4375,6.0],[0,6.0],[-0.1875,6.0],[-0.1875,3.0],[-0.4375,3.0],[-0.4375,0]]] [[[0,0],[0.25,0],[0.25,3],[-0.25,3],[-0.25,0]]] [[0,0],[1,0],[1,1],[0,1]] {60:["C",[0.5,1.5]],61:["CS",[0.5,3.5]],62:["D",[1.5,1.5]],64:["E",[2.5,1.5]],65:["F",[3.5,1.5]],67:["G",[4.5,1.5]],69:["A",[5.5,1.5]],71:["B",[6.5,1.5]],72:["C",[7.5,1.5]]} transformlist(WKEYTARG[0],0,[0.5,0,0]) [1,1] transform (KEYLIST,0.78,[10,10,10]) WKEY[0].length WKEY2[0].length WKEY3[0].length BKEY[0].length WKEY.length randRange(-10,10) -12 -1 * LOWER_BOUND randRangeNonZero( LOWER_BOUND, UPPER_BOUND )/10 MKEYLIST[SOLKEY][0]

You are a rock star who wants to play in the key of MKEYLIST[SOLKEY][0].
Move the dot to the root note in that key. Then click the check answer box.

init({ range: [ [LOWER_BOUND , UPPER_BOUND ], [LOWER_BOUND, UPPER_BOUND] ], scale: [20,20] }); playNote(60); //label( [-5, -5], // "\\Huge{\\color{#6495ED}{ NUMBER } / \\color{#28AE7B}{ NUMBER } = {1}}", // "right" ); //graph.pic1 = new ImportPictureb("desks.jpg", [-7.5, 7.5], 1, 800, 400 ); newshapecol=[]; newshapecol.push([[0.7,3],[1.3,3],[1.3,6],[0.7,6]]) newshapecol.push([[1.7,3],[2.3,3],[2.3,6],[1.7,6]]) newshapecol.push([[3.7,3],[4.3,3],[4.3,6],[3.7,6]]) newshapecol.push([[4.7,3],[5.3,3],[5.3,6],[4.7,6]]) newshapecol.push([[5.7,3],[6.3,3],[6.3,6],[5.7,6]]) for(var t=0;t < 7; t++){ newshapepts=transformlist(BLANK,0,[1*t,0,0]); newshapecol.push(newshapepts) } //this all deals with one key geometry to get it to its first spot for (var i=0;i < WKEY3[0].length;i++){ WKEY3[0][i]=transform(WKEY3[0][i],0,[-0.5,0,0]); } style({ stroke: "#6495ED", fill: "#F5F5F5", strokeWidth: 1.0, arrows: null }) var j = 0; for (var i=1;i < WKEY3[0].length;i++){ line(WKEY3[j][i-1],WKEY3[j][i]); } line(WKEY3[j][0],WKEY3[j][i-1]); //B_3=path(WKEY3[0]); //this ends the work with one key geometry for (var i=0;i < WKEY2[0].length;i++){ WKEY2[0][i]=transform(WKEY2[0][i],0,[0.5,0,0]); } var j = 0; for (var i=1;i < WKEY2[0].length;i++){ line(WKEY2[j][i-1],WKEY2[j][i]); } line(WKEY2[j][0],WKEY2[j][i-1]); C_4=path(WKEY2[0]); for (var i=0;i < WKEY[0].length;i++){ WKEY[0][i]=transform(WKEY[0][i],0,[1.5,0,0]); } var j = 0; for (var i=1;i < WKEY[0].length;i++){ line(WKEY[j][i-1],WKEY[j][i]); } line(WKEY[j][0],WKEY[j][i-1]); D_4=path(WKEY[0]); //this moves the key to its second spot for (var i=0;i < WKEY3_PTS;i++){ WKEY3[0][i]=transform(WKEY3[0][i],0,[3,0,0]); } var j = 0; for (var i=1;i < WKEY3_PTS;i++){ line(WKEY3[j][i-1],WKEY3[j][i]); } line(WKEY3[j][0],WKEY3[j][i-1]); E_4=path(WKEY3[0]); for (var i=0;i < WKEY2_PTS;i++){ WKEY2[0][i]=transform(WKEY2[0][i],0,[3.0,0,0]); } var j = 0; for (var i=1;i < WKEY2_PTS;i++){ line(WKEY2[j][i-1],WKEY2[j][i]); } line(WKEY2[j][0],WKEY2[j][i-1]); F_4=path(WKEY2[0]); for (var i=0;i < WKEY_PTS;i++){ WKEY[0][i]=transform(WKEY[0][i],0,[3.0,0,0]); } var j = 0; for (var i=1;i < WKEY_PTS;i++){ line(WKEY[j][i-1],WKEY[j][i]); } line(WKEY[j][0],WKEY[j][i-1]); G_4=path(WKEY[0]); for (var i=0;i < WKEY_PTS;i++){ WKEY[0][i]=transform(WKEY[0][i],0,[1.0,0,0]); } var j = 0; for (var i=1;i < WKEY_PTS;i++){ line(WKEY[j][i-1],WKEY[j][i]); } line(WKEY[j][0],WKEY[j][i-1]); A_4=path(WKEY[0]); for (var i=0;i < WKEY3_PTS;i++){ WKEY3[0][i]=transform(WKEY3[0][i],0,[4.0,0,0]); } var j = 0; for (var i=1;i < WKEY3_PTS;i++){ line(WKEY3[j][i-1],WKEY3[j][i]); } line(WKEY3[j][0],WKEY3[j][i-1]); B_4=path(WKEY3[0]); for (var i=0;i < BKEY_PTS;i++){ BKEY[0][i]=transform(BKEY[0][i],0,[1.0,3.0,0]); } newshapecol.push(BKEY[0]); style({ stroke: "#6495ED", fill: "#444", strokeWidth: 1.0, arrows: null }) CS_4=path(BKEY[0]); for (var i=0;i < BKEY_PTS;i++){ BKEY[0][i]=transform(BKEY[0][i],0,[1.0,0.0,0]); } newshapecol.push(BKEY[0]); style({ stroke: "#6495ED", fill: "#444", strokeWidth: 1.0, arrows: null }) DS_4=path(BKEY[0]); for (var i=0;i < BKEY_PTS;i++){ BKEY[0][i]=transform(BKEY[0][i],0,[2.0,0.0,0]); } style({ stroke: "#6495ED", fill: "#444", strokeWidth: 1.0, arrows: null }) FS_4=path(BKEY[0]); for (var i=0;i < BKEY_PTS;i++){ BKEY[0][i]=transform(BKEY[0][i],0,[1.0,0.0,0]); } style({ stroke: "#6495ED", fill: "#444", strokeWidth: 1.0, arrows: null }) GS_4=path(BKEY[0]); for (var i=0;i < BKEY_PTS;i++){ BKEY[0][i]=transform(BKEY[0][i],0,[1.0,0.0,0]); } style({ stroke: "#6495ED", fill: "#444", strokeWidth: 1.0, arrows: null }) AS_4=path(BKEY[0]); addMouseLayer(); this.movablePoint = addMovablePoint({ snapY: 0.1, snapX: 0.1 }); movablePoint.onMove = function( x, y ) { if (x < LOWER_BOUND || UPPER_BOUND < x) { return false; // don't allow the point to move past the bounds } movablePoint.visibleShape.toFront(); jQuery("#solutionarea input:eq(1)").val( x ); jQuery("#solutionarea input:last").val( y ); jQuery("#solutionarea input:first").val(MKEYLIST[inorout(newshapecol[0],[x,y])*61+inorout(newshapecol[1],[x,y])*63+inorout(newshapecol[2],[x,y])*66+inorout(newshapecol[3],[x,y])*68+inorout(newshapecol[4],[x,y])*70+inorout(newshapecol[5],[x,y])*60+inorout(newshapecol[6],[x,y])*62+inorout(newshapecol[7],[x,y])*64+inorout(newshapecol[8],[x,y])*65+inorout(newshapecol[9],[x,y])*67+inorout(newshapecol[10],[x,y])*69+inorout(newshapecol[11],[x,y])*71][0]); };

SOLUTION

5 5

There are 12 notes in the Chromatic Scale; on a piano you hit every key...black and white...
to play the Chromatic scale.

And 7 notes in the major scale defined by base-fs-fs-hs-fs-fs-fs and a hs back to the root.

Though we traditionally think of middle C as the simplest visual starting point,
frequencywise, the A note, 3 half steps lower than C, is the easiest frequency to know at 440 Hz.

Every half step above that has a frequency that is the 12th root of 2 higher in frequency.

Which means that the A in the next octave has a frequency of 880 Hz.

playNote();
style({ stroke: "#6495ED", fill: "#6495ED", strokeWidth: 3.5, arrows: "->" }); DS_4.attr({fill:"red"});
style({ stroke: "#6495ED", fill: "#6495ED", strokeWidth: 3.5, arrows: "->" }); DS_4.attr({fill:"#444"}); movablePoint.visibleShape.toFront(); movablePoint.moveTo( MKEYLIST[SOLKEY][1][0], MKEYLIST[SOLKEY][1][1]);
style({ stroke: "#6495ED", fill: "#6495ED", strokeWidth: 3.5, arrows: "->" }); DS_4.attr({fill:"#444"}); movablePoint.visibleShape.toFront(); movablePoint.moveTo( 1, 4);
C_4.attr({fill:"#F5F5F5"}); D_4.attr({fill:"#F5F5F5"}); E_4.attr({fill:"#F5F5F5"}); F_4.attr({fill:"#F5F5F5"}); G_4.attr({fill:"#F5F5F5"}); A_4.attr({fill:"#F5F5F5"}); B_4.attr({fill:"#F5F5F5"}); CS_4.attr({fill:"#444"}); DS_4.attr({fill:"#444"}); FS_4.attr({fill:"#444"}); GS_4.attr({fill:"#444"}); AS_4.attr({fill:"#444"});
C_4.attr({fill:"#FFDEAD"}); E_4.attr({fill:"#FFDEAD"}); G_4.attr({fill:"#FFDEAD"});