Skip to content

Instantly share code, notes, and snippets.

@greaneym

greaneym/audio.js

Last active May 19, 2017 20:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save greaneym/055b80a1c9ab686f3ae01f3bdb1584f2 to your computer and use it in GitHub Desktop.
Save greaneym/055b80a1c9ab686f3ae01f3bdb1584f2 to your computer and use it in GitHub Desktop.
Download ZIP
FCC zipline Simon Game with D3js
Raw
audio.js
var timer;
var song;
var audio1 = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.oAudioContext,
position = 0,
scale = {
g: 392,
f: 349.23,
e: 329.63,
a: 440,
b: 493.88
//add other notes to make different tones
};
//There are only 4 tones to be randomly selected for this game
//song = "b-a-f-g";
//shows that for this to work, build up a string then give to play
//setInterval(play, 1000 / 4);
//setInterval(playOnce, 500);
var audio2 = new audio1;
var audio3 = new audio1;
var decay = 800;
//play has own osc1, playOnce has own osc2
function createOscillator1(freq) {
var attack = 10,
//decay = 250;
decay = 800;
var now = audio2.currentTime,
gain = audio2.createGain(),
osc = audio2.createOscillator();
gain.connect(audio2.destination);
gain.gain.setValueAtTime(0, audio2.currentTime);
gain.gain.linearRampToValueAtTime(1, audio2.currentTime + attack / 1000);
gain.gain.linearRampToValueAtTime(0, audio2.currentTime + decay / 1000);
osc.frequency.value = freq;
osc.type = "square";
osc.connect(gain);
osc.start(0);
setTimeout(function() {
osc.stop(0,1);
//osc.stop(1,1);
osc.disconnect(gain);
gain.disconnect(audio2.destination);
}, decay)
}
//if decay == 0, the timeout stops
function play() { //plays over and over because decay not equal 0
//console.log("in play args", arguments, typeof arguments);
//console.log("in function play over and over");
var note = song.charAt(position),
freq = scale[note];
position += 1;
if(position >= song.length) {
//if decay = 0, song only plays once
position = 0;
}
if(freq) {
createOscillator1(freq);
}
//setTimeout(800);
//setTimeout2(800);
clearInterval(freq);
}
function createOscillator2(freq) {
var attack = 10,
//decay = 250;
decay = 800;
var now = audio3.currentTime,
gain = audio3.createGain(),
osc = audio3.createOscillator();
gain.connect(audio3.destination);
gain.gain.setValueAtTime(0, audio3.currentTime);
gain.gain.linearRampToValueAtTime(1, audio3.currentTime + attack / 1000);
gain.gain.linearRampToValueAtTime(0, audio3.currentTime + decay / 1000);
osc.frequency.value = freq;
osc.type = "square";
osc.connect(gain);
osc.start(0);
setTimeout(function() {
osc.stop(0,1);
osc.disconnect(gain);
gain.disconnect(audio3.destination);
}, decay)
}
function playOnce() { //only plays once, decay set to zero
//setInterval(playOnce, 500);
console.log("in function One Time");
var note = song.charAt(position),
freq = scale[note];
position += 1;
if(position >= song.length) {
//if decay = 0, song only plays once
//position = 0;
decay = 0;
}
if(freq) {
createOscillator2(freq);
}
clearInterval(0);
setInterval(0);
}
//playOnce();
function makeSong() {
var regep = /"+/g;
var strAdj = song.replace(/"/g, "");
console.log("strAdj", strAdj);
var str1 = strAdj.split("").join(",");
console.log("str1", str1);
var temp = [];
for (i=0; i< str1.length; i++) {
temp.push(str1.charAt(i));
}
console.log("temp", temp);
//console.log("song", song);
}
function getRandomTone(){ //returns one note in song randomly
var note1;
//currentgameState;//should be a list that grows with every play.
// and list increases if player copies the sequence correctly
list = ["a","b","f","g"];
var randomNotes = function(list) {
return list[Math.floor((Math.random()*list.length))];
}
note1 = randomNotes(list);
//console.log("returning note1 ", note1 );
return note1;
} //end getRandomTones
function playTonesOnce() { //plays the notes that are randomly selected
console.log("in randomPlay function");
var i = 0;
var tones = setInterval(function(){
//play(song.charAt(game.gameState[i]));
i++;
if (i >= game.gameState.length) {
clearInterval(tones);
}
}, 600);
}
Raw
game.js
//game.js
//reusing the same contructor structures from tictactoe!
// featuring closure that changes the current player
// which at least makes me think I am finally learning how to use closures
function Game (theName) {
this.name = theName;
this.count = 1;
//this.count = 1;
//this.gameState = '';
this.gameState = '';
//this.player = [];
this.gameArr = [];
this.player = '';
this.moves = '';
this.current = '';
this.gamePlayer = "simon";
this.displayState = false;
this.timeLength = 0;
this.strict = false;
this.over = false;
}
Game.prototype = {
constructor: Game,
saveState:function (aString) {
this.gameState = this.gameState + aString;
//this.timeLength = (this.gameState.length * 2500) ;
if (this.timeLength = 0) { return (this.gameState.length =1000)}
else{ this.timeLength = (this.gameState.length * 1000) };
return this.gameState;
},
getState:function() {
return this.gameState;
},
continueGame:function() {
var nextstep = game.player.length +1;
return playNotes(0,nextstep);
},
addCount:function() {
return this.count++;
},
savePlayer:function (aString) {
this.player = this.player + aString;
return this.player;
},
getPlayer:function() {
return this.player;
},
compareStates:function (thegame,theplayer) {
if (thegame.length && theplayer.length >0) {
if (thegame === theplayer) {
return true; }
else
return false; }
},
displayOn:function (name) {
d3.selectAll("svg").remove();
var boardClass = '';
boardClass = '#' + name;
$(boardClass).removeClass("display:none");
$(boardClass).addClass("display:block");
},
displayOff:function (name) {
d3.selectAll("svg").remove();
var boardClass = '';
boardClass = '#' + name;
$(boardClass).removeClass("display:block");
$(boardClass).addClass("display:none");
},
reset: function() {
//clear out variables
this.gameArr = [];
this.count = 0;
this.player = '';
this.gameState = '';
current = 0;
end = 0;
return this.gameArr,this.count,this.player,this.gameState;
},
//or, could have just used game.count but wanted to see how
//closure could work
toggleState:function () {
if (this.gamePlayer == "simon") {
this.gamePlayer = "user";
console.log("toggled", this.gamePlayer);
return this.gamePlayer;
}
else if (this.gamePlayer == "user") { this.gamePlayer = "simon";
console.log("toggled", this.gamePlayer);
return this.gamePlayer;
}
}
} //end of game prototype
var game = new Game;
var strict = false;
var animate = false;
var song = ''; //used in playNotes and playnote
var end = 0; //used in playNotes and playnote
console.log("initial gamestate sb blank", game, game.getState(''));
game.moves = 'SB';
// displays the score
function showScore1(newText){
$('#scont2').empty();
$('#scont2').append(newText);
$('#scont2').fadeOut(100, function() {
$(this).html(newText).fadeIn(70);
});
}
//make initial sequence of tones
function makeSequence() {
var soundstr = '';
soundarr = [];
for (i=0; i <= 19; i++) {
soundarr.push(getRandomTone());
}
console.log("soundarr",soundarr);
soundstr = soundarr.toString();
console.log("soundstr",soundstr);
var regep = /"+/g;
var strAdj = soundstr.replace(/"+/g, "");
var strAdj2 = soundstr.replace(/,/g, "");
return strAdj2;
}
var test = makeSequence();
console.log("test song", test);
Raw
index.html
<html>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>FCC SIMON using D3</title>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet">
<link href="mc.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="/bootstrap-3.3.6/bootstrap-3.3.6/dist/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script type="text/javascript" src="audio.js"></script>
<script type="text/javascript" src="game.js"></script>
<script type="text/javascript" src="ply.js"></script>
<script type="text/javascript" src="pl3b.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<script>
</script>
</body>
<div id="container">
<div id="piechart1" class="inside"></div>
<div id="piechart2" class="inside"></div>
</div> <!-- container -->
<div id="scont2"> </div>
<div id="btncontainer">
<input id="onButton" type="button" placeholder="On"
class="onButton btn btn-info" value="On">
<input id="offButton" type="button" placeholder="Off"
class="offButton btn btn-info" value="Off" >
<input type="radio" id="strictButton" value="">
</div> <!-- btncontainer -->
</html>
Raw
main.js
//main.js
window.onload = function() {
var timeoutid = '';
var soundarr = [];
var clicked = 0;
var agree = '';
var agree2 = '';
var current = 0;
var end = 0;
var steps = 0;
var whoseMove = 0;
$('#strictButton').on("click", function() {
console.log("strictbutton clicked");
game.strict = true;
console.log("strict on? ", game.strict);
//here always make playNotes start over from 0,0
current = 0;
end = 0;
});
//clears the simon graphic that is not interactive off page
//if this is too short it cuts off the last note playing
function clearPage1() {
d3.selectAll('svg').transition().delay(2000).remove();
d3.selectAll('#piechart2').transition().delay(2000).remove();
}
function pauseIt(time) {
return new Promise(resolve => {
var pauseItID = setTimeout(resolve, time)
})
}
document.getElementById("piechart1").addEventListener("click",function(e) {
e.preventDefault();
var userclick = e.toElement.__data__.data.tone;
var whatscurrent = test.charAt(0);
//console.log( "userclick", userclick);
//console.log( "whatscurrent", whatscurrent);
if (userclick === test.charAt(0)) {
//console.log("match");
//console.log("gamecount",game.count);
end = game.count;
if (game.gameState.length === game.player.length) {
//game.addCount();
//showScore1(game.count);
//console.log("should now advance to next level");
// return playNotes(0,end); //this does not work because not in scope
}
}
}) //end function
$('#onButton').on("click", function() {
console.log("onbutton clicked");
steps++;
var playNotes = function( start, end) { //plays sequence of notes
var current = start;
console.log("current",current);
// if (current = 0) { game.timeLength = 1000;}
console.log("before timeout set game.timeLength", game.timeLength.toString());
timeoutID = setTimeout(function go () {
dsPieChart(current,end);
if (current< end) { //timeout lasts for duration of note playing
console.log("current, end",current,end);
setTimeout(go, 1000);
}
current++;
if (current === end) {
clearPage1();
}
showScore1(current);
dsPieChart2();
},1000);
} //end function
//planning to remove this as it is repetitious
var replaySequence = function(start, end) { //plays sequence of notes
var current = start;
console.log("current",current);
console.log("before timeout set game.timeLength", game.timeLength.toString());
timeoutID2 = setTimeout(function go () {
dsPieChart(current,end);
if (current< end) { //timeout lasts for duration of note playing
console.log("current, end",current,end);
console.log("game.timeLength", game.timeLength.toString());
setTimeout(go, 1000);
}
current++;
if (current === end) {
clearPage1();
}
showScore1(steps);
dsPieChart2();
},1000);
} //end function
function Loop1() {
console.log("in Loop");
var index = 0;
function nextSeq(i) {
playNotes(0,i);
//index++;
}
nextSeq();
var loopID = setTimeout(function () {
console.log("i,gsl",index,game.gameState.length);
if (index >= game.gameState.length) {
if (!game.over && game.gamePlayer === 'simon') {
index++;
showScore1(index);
//clearTimeout(loopID);
game.reset();
return playNotes(0,index);
}
}
else {
game.reset();
end = index;
playNotes(0,index);
console.log("start over now"); }
clearTimeout(loopID);
nextSeq(index);
}, 2000);
}
//Loop1();
var t = 0;
var index = 0;
//(function Loop2 (loopnumber) {
function Loop2 (loopnumber) {
console.log("in Loop");
index = loopnumber;
t = loopnumber;
console.log("args", arguments);
while (index < 2) { //when t < 22 after getting this to work
playNotes(0,t);
//console.log("theloop game over,agree2", game.over, agree2);
if (!game.over && game.gamePlayer === 'simon') {
t++;
index++;
console.log("game NOT over: round", game.over,t);
game.player = '';
game.gameState = '';
game.gameArr = [];
current = 0;
end = t;
clearTimeout(timeoutID);
pauseIt(1000).then(t, function() {
playNotes(0,t);
});
}
else { t = 0;console.log("game is over");
game.reset();
clearTimeout(timeoutID);
playNotes(0,t);
}
}//end while
}
//Loop2(0);
playNotes(0,1);
var t,index;
function Loop3 (loopnumber) {
console.log("in Loop3");
index = 0;
t = loopnumber;
console.log("args", arguments);
do {
playNotes(0,t);
console.log("theloop game over?", game.over);
if (!game.over && game.gamePlayer === 'simon') {
t++;
console.log("game NOT over: round", game.over,t);
game.player = '';
game.gameState = '';
pauseIt(1000).then(function(t) {
playNotes(0,t);
});
}
else { t = 0;console.log("game is over");
game.reset();
playNotes(0,t);
}
index++;
}//end do
while (index < 3); //when index < 22 after getting this to work
}
//Loop3(0);
//playNotes(0,2);
function Loop4 () {
var rounds = 0;
if (rounds >= 3) { return; }
for (var rounds = 0; rounds <= 2; rounds++) {
playNotes(0, rounds, function( counter) {
console.log("theloop game over?", game.over);
console.log("counter",counter);
if (!game.over && game.gamePlayer === 'simon') {
console.log("Loop game NOT over: round", game.over,rounds);
reset();
pauseIt(1000).then(function() {
playNotes(0,rounds);
});
}
else {
console.log("game is over");
reset();
return;
}
});
}
}
//Loop4();
$('#offButton').on("click", function() {
console.log("offbutton clicked");
game.gameState = '';
game.player = '';
current = 0;
end = 0;
window.location.reload();
});
}); //end on button
function showScore1(newText){
$('#scont2').empty();
$('#scont2').append(newText);
$('#scont2').fadeOut(50, function() {
$(this).html(newText).fadeIn(50);
});
}
}; //end window onload
Raw
mc.css
#container {
position : absolute;
top: 30px;
left: 300px;
height:700px;
width:700px;
/* border-style:solid;
border-width:2px;
border-color:blue; */
}
#piechart1 {
position:absolute;
left:50%;
top:0;
height:400px;
width:400px;
/* border-style:solid;
border-width:20px;
border-color:green; */
z-index:59;
}
#piechart2 {
position:absolute;
left:50%;
top:0;
height:400px;
width:400px;
/* border-style:solid;
border-width:20px;
border-color:red; */
z-index:10;
}
/*
#chart-off {
display: none;
position:relative;
top:-12%;
left:30%;
width:400px;
height: 400px;
border-style:solid;
border-width:12px;
border-color:red;
}
*/
#scont2 {
position:absolute;
top:300px;
left:925px;
width:50px;
height: 60px;
border-style:solid;
border-width:2px;
border-color:orange;
font-size: 45px;
font-weight: bold;
font-color: blue;
text-align: center;
z-index:20;
}
#score {
position: absolute;
top: 200px;
left: 600px;
width: 40px;
height: 20px;
/* border-style: solid;
border-color: blue;
border-width: 3px; */
font-size: 25px;
font-weight: bold;
font-color: blue;
text-align: center;
z-index:20;
}
#strictButton {
position:absolute;
top:225px;
left:555px;
right: 720px;
width: 20px;
height: 20px;
}
.onButton {
position:absolute;
top:105px;
left:525px;
right: 620px;
width: 70px;
height: 70px;
/* border-style:solid;
border-width:2px;
border-color:blue; */
font-style: bold;
font-size: 20px;
z-index:38;
}
.offButton {
position:relative;
top:25px;
left:525px;
right: 620px;
width: 70px;
height: 70px;
/*border-style:solid;
border-width:2px;
border-color:blue; */
font-style: bold;
font-size: 20px;
z-index:28;
}
Raw
pl3b.js
// interactive part
function dsPieChart2(){
var over = "ontouchstart" in window ? "touchstart" : "mouseover",
out = "ontouchstart" in window ? "touchend" : "mouseout";
console.log("interactive pie");
var dataset2 = [
{color: "blue", id:1, class:"blue", tone: "b", amount: 25 },
{color: "yellow", id:2, class:"yellow", tone: "a", amount: 25},
{color: "#29BF12", id:3,class:"green", tone: "f", amount: 25},
{color: "red", id: 4,class:"red", tone: "g", amount: 25}
]
;
var width = 600,
height = 600,
outerRadius = Math.min(width, height) / 2,
innerRadius = outerRadius * .999,
// for animation
innerRadiusFinal = outerRadius * .5,
innerRadiusFinal3 = outerRadius* .45
//color = d3.scale.category20() //builtin range of colors
// color = d3.scale.category10() //builtin range of colors
// color = [0: "red", 1: "green", 3: "yellow", 4: "blue"];
;
// clearPage();
var visD = d3.select("#pieChart1")
.append("svg:svg") //create the SVG element inside the <body>
.data([dataset2]) //associate our data with the document
.attr("width", width) //set the width and height of our visualization (these will be attributes of the <svg> tag
.attr("height", height)
.append("svg:g") //make a group to hold our pie chart
.attr("transform", "translate(" + outerRadius + "," + outerRadius + ")") //move the center of the pie chart from 0, 0 to radius, radius
;
var arcD = d3.svg.arc() //this will create <path> elements for us using arc data
.outerRadius(outerRadius).innerRadius(innerRadius);
// for animation
var arcFinal = d3.svg.arc().innerRadius(innerRadiusFinal).outerRadius(outerRadius);
var arcFinal3 = d3.svg.arc().innerRadius(innerRadiusFinal3).outerRadius(outerRadius);
var pieD = d3.layout.pie() //this will create arc data for us given a list of values
//.value(function(d) { return d.id; }); //we must tell it out to access the value of each element in our data array
.value(function(d) { return d.amount; }); //we must tell it out to access the value of each element in our data array
var arcsD = visD.selectAll("g.slice") //this selects all <g> elements with class slice (there aren't any yet)
.data(pieD) //associate the generated pie data (an array of arcs, each having startAngle, endAngle and value properties)
.enter() //this will create <g> elements for every "extra" data element that should be associated with a selection. The result is creating a <g> for every object in the data array
.append("svg:g") //create a group to hold each slice (we will have a <path> and a <text> element associated with each slice)
.attr("class", "slice") //allow us to style things in the slices (like text)
// .on("mouseover", mouseover)
//.attr("class", "slice", "attr", "opacity:0.3") //allow us to style things in the slices (like text)
// .on("mouseout", click)
;
arcsD.append("svg:path")
.attr("fill", function(d, i) { return d.data.color; } ) //set the color for each slice to be chosen from the color function defined above
.attr("d", arcD) //this creates the actual SVG path using the associated data (pie) with the arc drawing function
.on("click", function(d) {
clicktimeout = setTimeout(function () {
console.log("clicked on d", d.data.tone);
game.savePlayer(d.data.tone);
console.log("gameplayer ", game.player);
var gp = game.player.charAt(game.count);
var gs = game.gameState.charAt(game.count);
console.log("charat gs", gs);
console.log("charat gp", gp);
console.log("current gp string", game.player);
console.log("current gs string", game.gameState);
agree2 = game.compareStates(game.player, game.gameState);
game.toggleState();
console.log("in d2 agree2,player", agree2,game.gamePlayer);
if (game.gameState.length === game.player.length) {
console.log("str lengs equal");
if (agree2) {
console.log("agree2",agree2);
game.over = false;
console.log("in dp2 agrees, game.over",game.over);
console.log("in dp2 agrees, end, game.count",end,game.count);
end = game.count;
// return playNotes(0,end);
}
}
else { game.over = true; }
console.log("in dp2 not agree, game.over",game.over);
//return playNotes(0,0);
}, 1000); //clicktimout
clearPage();
//eturn;
//if (strict) { game.gameState = ''; }
// return;
})
;
d3.selectAll("g.slice").selectAll("path").transition()
.duration(750)
.delay(10)
.attr("d", arcFinal )
// ;
return;
function mouseover(d,i) {
//function click(d,i) {
//console.log("i,d.value on mouseover",i,d.value );
//console.log("this on mouseover", this);
d3.select(this).select("path").transition()
.duration(750)
.attr("stroke-fill","yellow")
//.attr("class", "changeit")
.attr("stroke-width", 10.5)
.attr("d", arcFinal3)
.attr("class", function (d) {
if (i === 0) {
console.log("saw d=0",d);
//game.savePlayer(d.data.tone);
play(d.data.tone);
}
if (i === 1) {
console.log("saw d=1",d);
//game.savePlayer(d.data.tone);
play(d.data.tone);
}
if (i === 2) {
// console.log("saw d=2",d);
//game.savePlayer(d.data.tone);
play(d.data.tone);
}
if (i === 3) {
//game.savePlayer(d.data.tone);
play(d.data.tone);
//console.log("saw d=3",d);
}
console.log("game player state", game.player );
})
//.on("click", function(d) {
// game.savePlayer(d.data.tone);
// })
;
//console.log("d.id on mouseover",d.id );
}
function mouseout() {
//function click() {
//console.log("this on mouseout", this);
console.log("this on click", this);
d3.select(this).select("path").transition()
.duration(750)
.attr("stroke","yellow")
.attr("stroke-width", 5.5)
;
} //end mouseout
} //end dsPieChart2
function returnst () {
return game.over;
}
function clearPage() {
d3.selectAll('svg').transition().delay(2000).remove();
d3.selectAll('#piechart1').transition().delay(2000).remove();
d3.selectAll('#piechart2').transition().delay(2000).remove();
}
Raw
ply.js
function dsPieChart(current,end){
console.log("args current",current);
console.log("args end",end);
var dataset = [
{color: "blue", id:1, class:"blue", tone: "b", amount: 25 },
{color: "yellow", id:2, class:"yellow", tone: "a", amount: 25},
{color: "#29BF12", id:3,class:"green", tone: "f", amount: 25},
{color: "red", id: 4,class:"red", tone: "g", amount: 25}
]
;
var width = 600,
height = 600,
outerRadius = Math.min(width, height) / 2,
innerRadius = outerRadius * .999,
innerRadiusFinal = outerRadius * .5,
innerRadiusFinal3 = outerRadius* .45,
color = d3.scale.category10() //builtin range of colors
;
d3.selectAll('svg').remove(); //if this is not present get multiples
vis = d3.select("#pieChart2")
.append("svg:svg") //create the SVG element inside the <body>
.data([dataset]) //associate our data with the document
.attr("width", width) //set the width and height of our visualization (these will be attributes of the <svg> tag
.attr("height", height)
.append("svg:g") //make a group to hold our pie chart
.attr("transform", "translate(" + outerRadius + "," + outerRadius + ")") //move the center of the pie chart from 0, 0 to radius, radius
;
var arc = d3.svg.arc() //this will create <path> elements for us using arc data
.outerRadius(outerRadius).innerRadius(innerRadius);
// for animation
var arcFinal = d3.svg.arc().innerRadius(innerRadiusFinal).outerRadius(outerRadius);
var arcFinal3 = d3.svg.arc().innerRadius(innerRadiusFinal3).outerRadius(outerRadius);
var pie = d3.layout.pie() //this will create arc data for us given a list of values
.value(function(d) { return d.amount; }); //we must tell it out to access the value of each element in our data array
var arcs = vis.selectAll("g.slice") //this selects all <g> elements with class slice (there aren't any yet)
.data(pie) //associate the generated pie data (an array of arcs, each having startAngle, endAngle and value properties)
.enter() //this will create <g> elements for every "extra" data element that should be associated with a selection. The result is creating a <g> for every object in the data array
.append("svg:g") //create a group to hold each slice (we will have a <path> and a <text> element associated with each slice)
.attr("fill", function(d, i) {
return d.data.color; } ) //set the color for each slice to be chosen from the color function defined above
;
arcs.append("svg:path")
.attr("fill", function(d, i) {
return d.data.color; } ) //set the color for each slice to be chosen from the color function defined above
.attr("d", arc) //this creates the actual SVG path using the associated data (pie) with the arc drawing function
.attr("d", function(d,i) {
//console.log("what in d,i",d,i);
} )
;
var getTone = '';
console.log("sequence being played from current to end", test.substring(0,end));
console.log("sequence current to end", test.substring(current,end));
getTone = test.charAt(current);
game.addCount();
//showScore1(game.gameState.length);
console.log('test getTone', test.charAt(current));
game.saveState(getTone);
game.gameArr.push(getTone);
console.log('gameArr', game.gameArr);
console.log("gameState ", game.gameState);
var i = 0;
song = test.charAt(i); //song is whatever in playNotes(start,end)
console.log('playing song', song);
play(song.charAt(i));
arcs.select("path")
.filter(function (d) { return d.data.tone === getTone; })
.attr("d",arcFinal).attr("stroke-width", 1.5)
.each(function(d) {
if (d.data.tone === getTone) {
console.log("playing d.data.tone",d.data.tone);
play(d.data.tone.charAt(current));
return d.data.tone;
}
})
.attr("fill", function(d, i) {
return d.data.color; } )
.transition().duration(800)
.attr("d",arcFinal3).attr("stroke-width", 30)
.attr("stroke","orange")
;
arcs.select("path").transition(300)
.attr("d", arcFinal3)
.attr("stroke","orange")
.attr("stroke-width", 1)
;
arcs.select("path").transition(50)
.attr("d",arcFinal3).attr("stroke-width", 0)
.attr("d",arcFinal).attr("stroke-width", 0)
;
//showScore1(game.gameState.length);
// $('#scont2').html(game.gameState.length);
} // function dsPieChart
@greaneym
Copy link
Author

This is not working yet.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment