semi circle plot 1.0 address space

create a plot describing a semi-circle. Intended to provide smooth scaling for the html5canvaseyeball iris as it moves to the edge of the the eyeball

by rob Davis

HTML

<!-- Graph layout with semi circle plotted -->  
<body>
    <canvas id="myCanvas" width="578" height="500"></canvas>
  </body>

CSS

body {
        margin: 0px;
        padding: 0px;
      }

JavaScript

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

var width = 500;
var height = 500;

drawGrid(width,height,'#ccc');
drawAxis(width,height,'#666');
// whole circle in grey
drawSemicircle(width/2, height/2, 100, 0, 360, 10, '#ccc');
// 1/4 circle in green
drawSemicircle(width/2, height/2, 100, 0, 90, 5, '#0c0');
// 1/4 circle in red
drawSemicircle(width/2, height/2, 100, 0, 90, 30, '#f00');
// draw in the correct address space
plotPointsOnCurve(width/2, height/2, 1.0, 0, 90, 0.20, '#000');

// center is irrelevent except for visualisation
// start and end angles are hard coded for the 1/4 circle
// radius and increment is in the new 0.0 - 1.0 address space
function plotPointsOnCurve(cx, cy, r, startAngle, endAngle, increment, style) {
    // using a single value starting at 0.0 and incrementing in 0.3 steps until 1.0
    var a=0;
    var x=0;
    var y=0;
    var rt=r*100;
    var s=0;
    for (var i=0.0;i<=1.0;i+=increment) {
        a=endAngle*i;
        x = rt * Math.cos(deg2Rad(a));
        y = rt * Math.sin(deg2Rad(a));
        plotPoint(x +cx, y+cy, 8, style);
        s = y==0?0:y/100;
        console.log('Input ' + i + ' = ' + s);
        console.log('circ ' + i + ' = ' + circ(i));
    }
}

// plots n as x on a semi circle and returns the y
// n cannot be outside the range 0.0 - 1.0 or the fabric of space maybe imperceptibly altered.
function circ(n) {
    var angle90 = Math.PI/2;
    var radius = 1;
    var y = radius * Math.sin(angle90*n);
    return y;
}

function drawSemicircle(cx, cy, r, startAngle, endAngle, increment, style)
{
    var x=0;
    var y=0;
    for (a=startAngle;a<=endAngle;a+=increment) {
        x = r * Math.cos(deg2Rad(a)) + cx;
        y = r * Math.sin(deg2Rad(a)) + cy;
        plotPoint(x, y, 4, style);
    }
}

function plotPoint(x, y, size, style) {

    var radius = size/2;
    context.save();
    context.beginPath();
    context.translate(x, y);
    context.arc(0,0,radius,0,2 * Math.PI,...