Circles around a circle

by Richard Morris

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  
<p>Draw circles around a circle</p>
<canvas id="canvas" width=300 height=300></canvas>
<br/>
Num Circles: <input id="nCirc" name="ncirc" value="6" size="3"/>
<br/>
Angle: <input id="startAng" name="sang" value="0" size="5" />
<br/>
Centre radius: <input id="baseRad" name="brad" value="50" size="5" />
<br/>

CSS

body{ background-color: ivory; }
#canvas{border:1px solid green;}
#nCirc { font-size: small; margin: -4px 0 0 4px;}
#startAng { font-size: small; margin: -4px 0 0 4px; }
#baseRad { font-size: small; margin: -4px 0 0 4px; }

//.ui-spinner-input {font-size: small; margin: -4px 0 0 4px; }

JavaScript

// Circles around a circle

// canvas and mousedown related variables
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var $canvas = $("#canvas");
var canvasOffset = $canvas.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var scrollX = $canvas.scrollLeft();
var scrollY = $canvas.scrollTop();

var spinner = $( "#nCirc" ).spinner({ min: 3  });
var spinner = $( "#baseRad" ).spinner({ min: 3  });
var spinner = $( "#startAng" ).spinner({ 
      spin: function( event, ui ) {
        if ( ui.value > 180 ) {
          $( this ).spinner( "value", ui.value - 360 );
            reCalc();
          return false;
        } else if ( ui.value < -180 ) {
          $( this ).spinner( "value", ui.value + 360 );
            reCalc();
          return false;
        }
        reCalc();
      }
});


// save canvas size to vars b/ they're used often
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var baseRadius = 50;
var baseCircle = new Circle(150,150,50);

var nCircles = 7;
var startAngle = 0.0;

function Circle(x,y,r) {
    this.x = x;
    this.y = y;
    this.r = r;
}

Circle.prototype.draw = function() {
    ctx.beginPath();
    ctx.arc(this.x,this.y,this.r, 0, 2 * Math.PI, false);
    ctx.stroke();
}

var circles = new Array();

function calcCircles(n) {
    circles.splice(0); // clear out old circles
    var angle = Math.PI / n;
    var s = Math.sin(angle);
    var r = baseRadius * s / (1-s);
    console.log(angle);
    console.log(s);
    console.log(r);
    console.log(startAngle);
    console.log(startAngle / (Math.PI * 2 ) );
    for(var i=0;i<n;++i) {
        var phi = Math.PI * startAngle / 180 + angle * i * 2;
        var cx = 150+(baseRadius + r) * Math.cos(phi);
        var cy = 150+(baseRadius + r) * Math.sin(phi);
        circles.push(new Circle(cx,cy,r));
    }
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    baseCircle.draw();
   ...