素数糸かけ曼荼羅

jsdoit.css

body {
  background: #ddf;
}

jsdoit.html

<div id="slider"></div>
<input type="checkbox" id="check"><label for="check">color</label>

<canvas id="canvas" width=440 height=440></canvas>

jsdoit.js

$(function(){
    var canvas = document.getElementById("canvas");
    var context= canvas.getContext("2d");
    var offsetRad = 0;
    var radius = 200;
    var contextSize = 440;
    var n = 3;
    var color = false;
    var colors = [[0xFF,0x00,0x00], [0xFF,0x80,0x00], [0xFF,0xFF,0x00], [0x80,0xFF,0x00],
                  [0x00,0xFF,0x00], [0x00,0xFF,0x80], [0x00,0xFF,0xFF], [0x00,0x80,0xFF],
                  [0x00,0x00,0xFF], [0x80,0x00,0xFF], [0xFF,0x00,0xFF], [0xFF,0x00,0x80]];

    $("#slider").slider({
        min: 3,
        max: 64,
        slide: function( event, ui ) {
            n = ui.value;
        }
    });
    $( "#check" ).button().click(function(event) {
        color = !color;
        event.preventDefault();
    });

    function draw() {
        context.fillStyle = 'rgba(221, 221, 255, 0.5)';
        context.fillRect(0, 0, contextSize, contextSize);

        var x = contextSize/2;
        var y = contextSize/2;
        context.lineWidth = 1;
        var c = 0;
        for (var j = 1; j < n/2; j++) {
            if (gcm(j, n) > 1) {
                continue;
            }
            c += 1;
            context.strokeStyle = 'rgba(' + colors[c%12][0] + ','
                                          + colors[c%12][1] + ','
                                          + colors[c%12][2] + ', 0.2)';
            context.beginPath();
            context.moveTo(
                x + Math.cos(offsetRad)*radius,
                y + Math.sin(offsetRad)*radius);
            for (var i = 1; i < n; i++) {
                var rad = Math.PI*2*(i/n*j) + offsetRad;
                context.lineTo(
                    x + Math.cos(rad)*radius,
                    y + Math.sin(rad)*radius
                    );
            }
            context.closePath();
            context.stroke();
        }

        context.fillStyle = 'rgba(0, 0, 0, 0.5)';
        context.textAlign = 'left';

        context.font = "bold 50px sans-serif";
        context.fillText("n=" + n, x-30, y-40);
    }
    
    var i = 0;
    setInterval(function(){
        if (i < 50) {
            var j = jQuery.easing.easeOutCubic(null, i, 8, 64, 100);
            n = Math.round(j);
            $("#slider").slider('value', n);
        }
        offsetRad = i*Math.PI*2/1000;
        draw();
        i++;
    },100);
});


function gcm(a,b)
{
	var c ;
	while ( b > 0 ){
		c = a%b ;
		a = b ;
		b = c ;
	}
	return a ;
}