GearBox

by Ted Newman

HTML

<h2>Please build a gear train with a drive speed equal to desired volume.</h2>
All speeds measured in Kinetic Volume Units (kvu).<br />
<canvas id="canvas" width="700" height="500" style="border:1px solid black;"></canvas>
<button type="button" id="clearbtn">
Clear
</button>
<div id="volout">

</div>

CSS

body {
  font-family: arial, sans-serif;
  margin-left: 50px;
}
#volout {
  color: #7f00e8;
  font-size: 30px;
  display: inline-block;
  width: 700px;
  text-align: center;
}

.warn {
  color: red;
}

JavaScript

/*


	Gear Train Volume Control made by Taw
  
  
  
  
  --------DISCLAIMER:--------
  This was made at 1:00 am.
  This code is not optimized.
  This code is not organized.
  This logic is not elegant.
  This code is not fun to read.
  Proceed at your own risk.
  
  
  
  
  Feel free to ask questions, I guess.
  
  
*/





var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var mouseX = 0;
var mouseY = 0;

var toothSize = 4;

OVERLAP_CONSTANT = 3;

var driveGear = {x:50,y:50,r:30, angle:0, speed: 1};
var drivenGear = {x:500, y:450, r:30, angle: 0, speed: 0}
var mouseGear = null;

var resolveGear = null;

var gears = [driveGear, drivenGear];
var belts = [];

var beltSelected = false;
var deleteSelected = false;
var mouseBelt = null;

var smallGearSizes = [11,13,15,17];
var medGearSizes = [29,30,31,32];
var med2GearSizes = [40,42,44,46];
var largeGearSizes = [59,61,67,71,73];
var sampleGears = [{x:625, y: 30, r: smallGearSizes[Math.floor(Math.random()*smallGearSizes.length)]},
	{x:625, y: 90, r: medGearSizes[Math.floor(Math.random()*medGearSizes.length)]},
  {x:625, y: 175, r: med2GearSizes[Math.floor(Math.random()*med2GearSizes.length)]},
  {x:625, y: 300, r: largeGearSizes[Math.floor(Math.random()*largeGearSizes.length)]}
]

var sampleBeltCircles = [{x:600, y: 430, r: 20}, {x:650, y: 410, r: 30}, {x: 625, y: 420, r: 40}]

var hoverGear = null;
var hoverBelt = null;

function drawGear(gear){
	var angle = gear.angle || 0;
	ctx.beginPath();
  ctx.moveTo(gear.x + (gear.r - toothSize/2) * Math.cos(angle), gear.y + (gear.r - toothSize/2) * Math.sin(angle));
  for(var i = 0; i <= gear.r * 2; i++) {
  	if (i%2) {
    	ctx.lineTo(gear.x + (gear.r + toothSize/2) * Math.cos(angle + Math.PI/gear.r * i), gear.y + (gear.r + toothSize/2) * Math.sin(angle + Math.PI/gear.r * i));
    }
    else {
    	ctx.lineTo(gear.x + (gear.r - toothSize/2) * Math.cos(angle + Math.PI/gear.r * i), gear.y + (gear.r - toothSize/2) * Math.sin(angle +...