Last active
May 19, 2017 20:57
-
-
Save greaneym/055b80a1c9ab686f3ae01f3bdb1584f2 to your computer and use it in GitHub Desktop.
FCC zipline Simon Game with D3js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//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); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#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; | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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(); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is not working yet.