forked: 素数糸かけ曼荼羅

jsdoit.css

html {
    height:100%;
}

body {
    background: white;
    width:100%;
    height:100%;
    overflow : hidden;
}

jsdoit.html

<select id="number">
</select>

<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 = 24;
    var ii = 0;
    var i = 0;
    var width = 100;
    var height = 100;
    
    for(var k = 3; k <= 64; k++) {
        $('select#number').append('<option>' + k + '</option>');
    }
    $('select#number').val(n);
    
    $("select#number").change(function () {
        $("select option:selected").each(function () {
            n = $(this).val();
        });
    }).change();
        
    
    function rezise() {
        width = $("body").width() - 1;
        height = $("body").height() - 1;
        $(canvas).attr({width:width, height:height});
    }
    $(window).resize(rezise);
    rezise();
    
    function draw_one(j) {
        var x = width/2;
        var y = height/2;
        context.beginPath();
        context.moveTo(
            x + Math.cos(offsetRad)*radius,
            y + Math.sin(offsetRad)*radius);
        for (var k = 1; k < n; k++) {
            var rad = Math.PI*2*(k/n*j) + offsetRad;
            context.lineTo(
                x + Math.cos(rad)*radius,
                y + Math.sin(rad)*radius
                );
        }
        context.closePath();
        context.stroke();
    }

    function draw_point(j, size, text) {
        var rad = Math.PI*2*(j/n) + offsetRad;
        var x = width/2  + Math.cos(rad)*radius;
        var y = height/2 + Math.sin(rad)*radius;
        context.fillStyle = 'rgba(0,0,0, 1)';
        context.beginPath();
        context.arc(x, y, size, 0, Math.PI*2, false);
        context.stroke();
        
        context.fillStyle = 'rgba(0, 0, 0, 0.5)';
        context.textAlign = 'left';

        context.font = "bold 15px sans-serif";
        context.fillText(text, x+15, y+15);
    }

    function draw() {
        contextSize = Math.min(width, height);
        radius = contextSize / 2 * 0.8;
        
        context.fillStyle = 'rgba('+0xff+', '+0xff+', '+0xff+', 0.5)';
        context.fillRect(0, 0, width, height);

        for (var j = 1; j < n; j++) {
            if (gcm(j, n) > 1) {
                continue;
            }

            context.lineWidth = 0.5;
            context.strokeStyle = 'rgba(0,0,0, 0.1)';
            draw_one(j);
            context.strokeStyle = 'rgba(0,0,0, 1)';
            draw_point(j, 3, '');
        }
        
        var m = i % n;

        if (gcm(m, n) > 1) {
            if (ii % 10 == 0) {
                context.lineWidth = 0.5;
                context.strokeStyle = 'rgba(255,0,0, 1)';
                draw_one(m);
            }
        } else {
            context.lineWidth = 0.5;
            context.strokeStyle = 'rgba(0,0,0, 1)';
            draw_one(m);
        }
        
        draw_point(0, 10, '');
        draw_point(m, 10, m);
    }
    
    setInterval(function(){
        ii++;
        i = Math.floor(ii/10);
        offsetRad = ii*Math.PI*2/3000;
        draw();
    },100);
});


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