Pipe filing

by toby3105

HTML

<canvas id="myCanvas" width="500px" height="500px"></canvas>

JavaScript

(function () {
	'use strict';
	var Pipe = function (x, y, pipeRadius, cableRadius, context) {
		var _pipeCircumference = pipeRadius*2*Math.PI ;
		var _cableDiameter = cableRadius * 2;
		var _cableRadius = cableRadius;
		var _maxPerRow;
		var _slice;
		var _currentRow = 0;
		var _innerRadius = pipeRadius;
		var _context = context;
		var _center = {
			x:x,
			y:y
		}
		var _circlesInCurrentRow = 0; 
		var _pipeRadius = pipeRadius;
		var _startAngle = 180;
		var _way = 1;
		var initRow = function(first){
			if(!first){
				_innerRadius -= _cableDiameter * _way;
			}
			else{
				_innerRadius -= _cableRadius;
			}
			if(_innerRadius == 0){
				_innerRadius +=_cableDiameter;
				_way = -_way;
				_startAngle += 180
			}
			console.log(_innerRadius);
			_maxPerRow = Math.floor(_innerRadius*Math.PI / _cableDiameter);
			_slice = Math.PI / _maxPerRow;
			_circlesInCurrentRow = 0;
			if(_way == 1){
				drawCircle(_innerRadius,_center.x,_center.y);
			}
			_pipeCircumference = _innerRadius*2*Math.PI
		}
		var printCircles = function(circlesToPrint){
			drawCircle(_pipeRadius,_center.x,_center.y);
			initRow(true);
			while(circlesToPrint > 0){
				var cableAngle = degreesToRadians(_startAngle) - _slice * _circlesInCurrentRow;
				var x = _center.x + _innerRadius * Math.cos(cableAngle);
				var y = _center.y + _innerRadius * Math.sin(cableAngle);
				drawCircle(_cableRadius,x,y)
				_circlesInCurrentRow++;
				circlesToPrint--;
				if (_circlesInCurrentRow >= _maxPerRow) {
					initRow();
				}
			}
		}
		var degreesToRadians = function(deg){
			return deg * 0.0174532925;
		}
		var drawCircle = function(radius,x,y){
		    _context.beginPath();
    		_context.arc(x, y, radius, 0, 2 * Math.PI, false);
    		_context.fillStyle = 'green';
			_context.fill();
			_context.lineWidth = 2;
			_context.strokeStyle = '#003300';
			_context.stroke();
		}
		
		return{
			printCircles:printCircles
		}
	}
	
	var canvas = document.getElementById('myCanvas');
	var context =...