Bad Pi

what does a circle look like when Pi is less specific

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

// TODO more granularity on alt PI

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

var width = 500;
var height = 500;

drawGrid(width,height,'#ccc');
drawCrossHair(width, height, '#000');
drawAxis(width,height,'#666');

// Math.PI is 18 chars in length including the "3."
// a length of 10 works but 9 does not
// 3.14159265 
// 3.1415926
drawSemicircle(width/2, height/2, 100, 0,   120, 5, 'red',   parseFloat(3.14159262180328391345085492504, 10));
drawSemicircle(width/2, height/2, 100, 120, 240, 5, 'green', parseFloat(3.14159262180328391345085492504, 10));
drawSemicircle(width/2, height/2, 100, 240, 360, 5, 'blue',  parseFloat(3.141592621803283913450854925031, 10));

function piIToLength(length) {
    var stringPi = Math.PI.toString();
    return parseFloat(stringPi.substring(0,length), 10);
}

// 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 drawSemicircle(cx, cy, r, startAngle, endAngle, increment, style, pi )
{
    console.log(pi);
    var x=0;
    var y=0;
    for (a=startAngle;a<=endAngle;a+=increment) {
        x = r * Math.cos(deg2Rad(a, pi)) + cx;
        y = r * Math.sin(deg2Rad(a, pi)) + cy;
        plotPoint(x, y, 4, style, pi);
    }
}

function plotPoint(x, y, size, style, altpi) {
    var pi = altpi;
    var radius = size/2;
    context.save();
    context.beginPath();
    context.translate(x, y);
    context.arc(0,0,radius,0,2 * pi, true);
    context.fillStyle=style;
    context.fill();
    context.restore();
}


function drawAxis(w,h,style)
{
    // x axis
    var x = w/2;
    var y = h/2;
    context.fillStyle=style;
    for (var i=-x;i<x;i+=(w*.05)){
        context.fillText(i/100, x+i, y+12);
    }
    // y axis
    for (var i=-y;i<y;i+=(h*.05)){
        context.fillText(i/100, x-(context.measureText(i/100).width+4), y+i);
    }
}

function drawGrid(w,h,style)
{
    context.beginPath();
    var...