Mr-Rowinsky-code-breakdown.js

// Source code from - https://www.classtools.net/random-name-picker/

// THE FUNCTIONS IN QUESTION

function spin() {
	if(spinning==1){return}
	spinning=1
	$("#wellDone").hide()
    minTimeToSpin = 8; // 4
	 timeRange = 2; // 3
	 minAngToStartRotating = 30; // 10
	 angleRange = 10; // 10
    spinAngStart = Math.random() * angleRange + minAngToStartRotating; 
    spinTime = 0;
    spinTimeTotal = minTimeToSpin * 1000;
    rotateWheel();
	playSound();
  }


function rotateWheel() {
    spinTime += 50;
    if(spinTime >= spinTimeTotal) {
      stopRotateWheel();
      return;
    }
    spinAng = spinAngStart-easeOut(spinTime, 0, spinAngStart, spinTimeTotal);
    startAng += (spinAng * Math.PI / 180);
    drawWheel(false);
    spinTimeout = setTimeout('rotateWheel()', 30);//30
  }


// THE BREAKDOWN OF THE CODE
// (reorganised for clarity)

// WHEN THE spin() IS CALLED

// this variable tracks the number of millisecond that have elapsed while spinning
spinTime = 0;

// these two variables are used in the 
minAngToStartRotating = 30;
angleRange = 10;
/* *** THIS IS WHERE THE RANDOMNESS IS CALCULATED *** */
// this calculates the starting angle position of the wheel
// Math.random() - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
// "The Math.random() function returns a floating-point, pseudo-random number in the range from 0 inclusive up to but not including 1 — which you can then scale to your desired range"
// So the caluculation is 0 to 1 * 30 + 10
spinAngStart = Math.random() * angleRange + minAngToStartRotating;
// "Math.random() does not provide cryptographically secure random numbers."
// So your students are not wrong to be suspicious, random numbers are hard for a computer to calculate
// ...further reading: https://v8project.blogspot.co.uk/2015/12/theres-mathrandom-and-then-theres.html

// this variable is the minimum spin time in seconds
minTimeToSpin = 8;
// this operation translates minimum spin time from seconds to milliseconds
spinTimeTotal = minTimeToSpin * 1000; 

// this calls the rotateWheel() function to start the wheel spinning
rotateWheel();

// WHEN THE rotateWheel() IS CALLED

// the spin time elapsed is incremented by 50 milliseconds
spinTime += 50;

// this condidtional checks if the elapsed spin time is greater then or equal to the desired total spin time
if(spinTime >= spinTimeTotal) {
	// this calls the rotateWheel function to stop the wheel spinning 
  stopRotateWheel();
	// this exits the function (meaning nothing below gets executed)
  return;
}
// this operation uses the easeOut() function to calculate the next angle position of the wheel
spinAng = spinAngStart-easeOut(spinTime, 0, spinAngStart, spinTimeTotal);
// this operation updates the angel position use the calculated value from above
startAng += (spinAng * Math.PI / 180);
// this operation uses the drawWheel() function to display the updated wheel in the browser
drawWheel(false);
// this operation uses the rotateWheel() function to continue the wheel spinning
// this is called a recursive function where the function calls it self
// https://en.wikipedia.org/wiki/Recursion_(computer_science)
spinTimeout = setTimeout('rotateWheel()', 30);//30

// ALL OF THE SOURCE CODE
/*
firstTime=1;
colors = [ "yellow", "red", "white", "orange", "purple","green","brown","pink","blue"];
nms = "Adam Zapel*Barb E. Dahl*Biff Wellington*Charity Case*Don Key*Earl E. Bird*Hazel Nutt*Jack Pott*Jo King*Matt Tress*Mike Stand*Mona Lott*Orson Carte*Ray Gunn*Sonny Day*Warren Peace";
entries=nms.split("*");
origentries = nms.split("*");	

if(loadedData!="")
	{
	entries=loadedData.split("\n");
	origentries=loadedData.split("\n");
	}


function addNames()
{
	if(addingNames==1){return}
	if(spinning==1){return}
	addingNames=1
	toggle(500);
	$("#wellDone").hide()
	w=$(this).width()
	wd=$("#textboxWrap").width()
	h=$(this).height()
	wh=$("#textboxWrap").height()
	$("#textboxWrap").css("left",((w-wd)/2)-20+"px");
	$("#textboxWrap").css("top",((h-wh)/2)-40+"px");	
	document.test.textbox.value="";
	for(n=0;n<origentries.length;n++)
		{
		if(origentries[n]!=""){document.test.textbox.value+=origentries[n]+"\n"}	
		}
	removAds()
	$("#textboxWrap").fadeIn("slow")
}

function createNames()
{
counter=0;
origentries=new Array()
t=document.test.textbox.value.split("\n");
entries=new Array()
for(n=0;n<t.length;n++)
	{
	if(t[n]!="")
		{
		entries.push(t[n]);origentries.push(t[n]);
		counter++
		if(counter==50){apprise("The picker has taken your first 50 entries.<br>If you need more than this, use the <a href='http://www.classtools.net/education-games-php/fruit_machine'>ClassTools Fruit Machine</a> instead. ");break}
		}
	}
	init()
	toggle(2000);
}

function removeName()
{
	entries.splice(nametoremove,1)
	toggle(500);//close curtains
	setTimeout('$("#wellDone").hide()',600);
	setTimeout(init,600);
	setTimeout("toggle(1000)",700);//open curtains
}

//SAVE
function save()
{
theData=origentries.join("\n");
if(theData.length==0){apprise("You have nothing to save.");return}
saveOrEdit="save";
var temp=premiumUserName;
if(temp==""){temp="NONE"}

saveit("random-name-picker||PremiumUserName="+temp+"||\n*****\n"+theData)
}

//MOVE CURTAINS
$curtainopen = false;
function toggle(speed)
{
	if ($curtainopen == false){ 
	$(".leftcurtain").stop().animate({width:'60px'}, speed );
	$(".rightcurtain").stop().animate({width:'60px'},speed );
	$curtainopen = true;
	showAds()
	}else{
	$(".leftcurtain").stop().animate({width:'50%'}, speed );
	$(".rightcurtain").stop().animate({width:'51%'}, speed );
	$curtainopen = false;
	}
	return false;
};
	

//PREMIUM SAVE
function savethefave()
{
saveFave(self.location+"","wheel")//function called from _login.inc.php.
}


function init()
{
canv = document.getElementById("wheelcanvas");
if(!canv.getContext)
{self.location="http://www.classtools.net/education-games-php/fruit_machine"}

if(createdByPremiumUser==1 || premiumUserName!=""){removAds()}
else{showAds()}
addingNames=0
spinning=0
$("#textboxWrap").fadeOut("slow")
choiceTextSize = [];
intTextBox=100;
choiceCount=100;
numcolors = colors.length;	
numoptions = entries.length;  
intTextBox = 5;  
choiceCount = intTextBox;
startAng = 0;
arc = Math.PI / (numoptions / 2);
spinTimeout = null;
spinArcStart = 10;
spinTime = 0;
spinTimeTotal = 0;
var canvasContext;
  // Check available screen size so wheel doesn't go outside
  maxHeight = window.screen.availHeight;
  maxWidth = window.screen.availWidth;
  wheelSize = 280;
  t=self.location+""
	if(t.indexOf("stools")==-1){return}
  
  if (maxWidth > 500 && maxHeight > 500 && (canv.getContext) ) {
		canvasWidth = 500;		
		canv.width = canvasWidth;
		canv.height = canvasWidth;
		wheelSize = canvasWidth-2;
		context = canv.getContext('2d');
  }
  wheelRadius = wheelSize * 0.5;
  outsideRadius = wheelRadius;
  textRadius = wheelRadius * 0.9;
  insideRadius = wheelRadius *0.1;
  setChoiceFontSizes();
  drawWheel(firstTime);
  console.log(firstTime);
  
  if(firstTime==1)
		{
		$("#wellDone").show();
		$("#wellDoneNAME").html("<span class='editit'><h1><a href='javascript:spin()'>Click to Spin!</a></h1></span>")
		
	    w=$(this).width()
					wd=$("#wellDone").width()
					h=$(this).height()
					wh=$("#wellDone").height()
					$("#wellDone").css("left",((w-wd)/2)-20+"px");
					$("#wellDone").css("top",((h-wh)/2)-130+"px");
					
		if($(window).width()==1024)//IPAD Landscape
			{
			$("#wheelcanvas").css("margin-left",((w-canvasWidth)/2)-20+"px");
			}
		if($(window).width()==768)//IPAD Portrait
			{
			$("#wheelcanvas").css("margin-left","70px");
			}
  		}
	
		
  firstTime=0;
}
  
function drawWheel(isStart) {
    canvas = document.getElementById("wheelcanvas");
    if (canvas.getContext) {
      canvasContext = canvas.getContext("2d");
      canvasContext.clearRect(0,0,wheelSize,wheelSize);
      canvasContext.strokeStyle = "black";
      canvasContext.lineWidth = 2;
      canvasContext.font = 'bold 12px sans-serif';
      for(i = 0; i < numoptions; i++) {
        angle = startAng + i * arc;
        canvasContext.fillStyle = colors[i%numcolors];
        canvasContext.beginPath();
        canvasContext.arc(wheelRadius, wheelRadius, outsideRadius, angle, angle + arc, false);
        canvasContext.arc(wheelRadius, wheelRadius, insideRadius, angle + arc, angle, true);
        canvasContext.stroke();
        canvasContext.fill();
        canvasContext.save();
		  canvasContext.fillStyle = "black";         if (isStart || drawText) {
			angHalfArc = angle + arc * 0.5-0.04;
            canvasContext.translate(wheelRadius + Math.cos(angHalfArc) * textRadius, wheelRadius + Math.sin(angHalfArc) * textRadius);
            canvasContext.rotate(angHalfArc + Math.PI);
            text = entries[i];
		    canvasContext.font = 'bold '+choiceTextSize[i]+'px sans-serif';
		    canvasContext.fillText(text, 0, 0);
        }		  
        canvasContext.restore();
      } 
      //Arrow
      canvasContext.fillStyle = "black";
      canvasContext.beginPath();      
		// Left Side
		canvasContext.moveTo(0, wheelRadius + 5);
		canvasContext.lineTo(0, wheelRadius-5);
      canvasContext.lineTo(13, wheelRadius );
      canvasContext.lineTo(0, wheelRadius + 5);
		canvasContext.fill();
    }
  }
  
function spin() {
	if(spinning==1){return}
	spinning=1
	$("#wellDone").hide()
    minTimeToSpin = 8; // 4
	 timeRange = 2; // 3
	 minAngToStartRotating = 30; // 10
	 angleRange = 10; // 10
    spinAngStart = Math.random() * angleRange + minAngToStartRotating; 
    spinTime = 0;
    spinTimeTotal = minTimeToSpin * 1000;
    rotateWheel();
	playSound();
  }
  
function setChoiceFontSizes() {
  // get the font size of each choice
	 canvas = document.getElementById("wheelcanvas");
    if (canvas.getContext) {
      canvasContext = canvas.getContext("2d");
		choiceTextSize = [];
		for(i = 0; i < numoptions; i++) {
			text = entries[i];
			canvasContext.font = 'bold 18px sans-serif'; 
			textHWidth = canvasContext.measureText(text).width;
			if (textHWidth > textRadius-30) {
				choiceTextSize.push("12");
			} else {
				choiceTextSize.push("18");
			}
		}
	}
  }
  
function rotateWheel() {
    spinTime += 50;
    if(spinTime >= spinTimeTotal) {
      stopRotateWheel();
      return;
    }
    spinAng = spinAngStart-easeOut(spinTime, 0, spinAngStart, spinTimeTotal);
    startAng += (spinAng * Math.PI / 180);
    drawWheel(false);
    spinTimeout = setTimeout('rotateWheel()', 30);//30
  }
  	
function stopRotateWheel() {
    clearTimeout(spinTimeout);
	
	$('#aud').animate({'bottom': '-50px'},500,'easeInOutBounce');
		setTimeout("$('#aud').animate({'bottom': '-500px'}, 1000, 'easeInOutBounce');",2500)
	
	spinning=0;
	playClap()
	 degrees = startAng * 180 / Math.PI + 180; // left side, not top
    arcd = arc * 180 / Math.PI;
    index = Math.floor((360-degrees % 360) / arcd);
	 text = entries[index];
	   canvasContext.font = 'bold 30px sans-serif';
	   fsize="30px"
	 textHWidth = canvasContext.measureText(text).width*0.5;
	 if (textHWidth > wheelRadius) {
	  canvasContext.font = 'bold 12px sans-serif';
	  fsize="12px"
	  textHWidth = canvasContext.measureText(text).width*0.5;
	 }
	 	$("#wellDone").css("left","-500px")
		$("#wellDone").show()
		nametoremove=index;
		$("#wellDoneNAME").html(text+"<br>")
		$("#wellDoneREMOVE").html("<span style='font-size:small' class='editit'><a href='javascript:removeName()'>Remove!</a></span>")
		//$("#wellDone").append("<span style='font-size:small' class='editit'><a href='javascript:removeName()'>Remove</a></span>")
		$("#wellDone").css("font-size",fsize)
		w=$(this).width()
		wd=$("#wellDone").width()
		h=$(this).height()
		wh=$("#wellDone").height()
		
		
		
		$("#wellDone").stop().animate(
			{
			left:((w-wd)/2)-25+"px"
			},
			{
			easing:"easeInOutBack"
			}
			);
			$("#wellDone").css("top",((h-wh)/2)-130+"px");
		
			
		
			
			
  }
  
function easeOut(t, b, c, d) {
    ts = (t/=d)*t;
    tc = ts*t;
    return b+c*(tc + -3*ts + 3*t);
  }
  
*/