zzandy · December 14, 2016 14:25
diff --git a/phyllotaxis.html b/phyllotaxis.html
 <!DOCTYPE html>
 <html>

 <head>
 </head>

 <body>
    <!-- loop -->
    <script type="text/javascript">
    "use strict";

    function loop(fixedDelta, fixedUpdate, update, sheduleFunction) {
        var then;
        var acc = 0;
     
        var next = function() {
            var now = new Date().getTime();
            var delta = now - then;
            then = now;

            if (delta === undefined || isNaN(delta)) {
                delta = fixedDelta;
            }

            acc += delta;

            while (acc >= fixedDelta) {
                fixedUpdate(fixedDelta);
                acc -= fixedDelta;
            }

            update(delta);

            sheduleFunction(next);
        }

        next();
    }
 </script>
    <!-- color -->
    <script type="text/javascript">
        
            // hue Chroma luma
            function hcy2rgb(h, c, y, a) {
                // 601
                var r = .3;
                var g = .59;
                var b = .11;

                var h0 = h;
                h /= 60;

                var k = (1 - Math.abs((h % 2) - 1));

                var K = h < 1 ? r + k * g
                    : h < 2 ? g + k * r
                    : h < 3 ? g + k * b
                    : h < 4 ? b + k * g
                    : h < 5 ? b + k * r
                    : r + k * b;

                var cmax = 1;

                if (y <= 0 || y >= 1) cmax = 0;
                else cmax *= K < y ? (y - 1) / (K - 1) : K > y ? y / K : 1;
                //c *= cmax;
                c = Math.min(c, cmax);

                var x = c * k;
                var rgb = h < 1 ? [c, x, 0]
                    : h < 2 ? [x, c, 0]
                    : h < 3 ? [0, c, x]
                    : h < 4 ? [0, x, c]
                    : h < 5 ? [x, 0, c]
                    : [c, 0, x];

                var m = y - (r * rgb[0] + g * rgb[1] + b * rgb[2]);

                var rgbdata = [rgb[0] + m, rgb[1] + m, rgb[2] + m];
                return 'rgba(' + (rgbdata[0] * 255).toFixed(0) + ',' + (rgbdata[1] * 255).toFixed(0) + ',' + (rgbdata[2] * 255).toFixed(0) + ', ' + (a || 1) + ')';
            }

        </script>


    <!-- canvas -->
    <script type="text/javascript">
    "use strict";

    function fullscreenCanvas() {

        var c = document.createElement('canvas');
        var ctx = c.getContext('2d');

        ctx.canvas.width = window.innerWidth;
        ctx.canvas.height = window.innerHeight;
        ctx.canvas.style.position = 'absolute';
        ctx.canvas.style.top = 0;
        ctx.canvas.style.left = 0;

        ctx.clear = function() {
            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        };

        var q = 1 / Math.sqrt(3);

        ctx.makePath = function(vertices) {
            this.beginPath();
            this.moveTo(vertices[0], vertices[1]);
            for (var i = 2; i < vertices.length; i += 2) {
                this.lineTo(vertices[i], vertices[i + 1]);
            }
            this.closePath();
        }

        ctx.strokeCircle = function(x, y, r){
            ctx.beginPath();
            ctx.arc(x, y, r, 0, 2*Math.PI, true);
            ctx.closePath();
            ctx.stroke();
        }

        ctx.fillCircle = function(x, y, r){
            ctx.beginPath();
            ctx.arc(x, y, r, 0, 2*Math.PI, true);
            ctx.closePath();
            ctx.fill();
        }

        document.body.appendChild(c);
        return ctx;
    }
 </script>

    <script type="text/javascript">
    "use strict";

    var ctx = fullscreenCanvas();

    var w = ctx.canvas.width;
    var h = ctx.canvas.height;

    var sqrt = Math.sqrt;
    var sin = Math.sin;
    var cos = Math.cos;

    var a = Math.PI*(3-Math.sqrt(5));
    var ba = Math.random()*Math.PI*2;
    var c = .8;
    var primes = [];

    ctx.save();
    ctx.translate(w/2, h/2);

    var targetR = sqrt(w*w+h*h) / 2;

    function getr (n, c){
        return c * sqrt(n);
    }

    var nf = 1;
    var np=nf;

    while(getr(nf, c) < targetR){
        np=nf;
        nf*=2;
    }

    console.log(targetR, getr(np, c), getr(nf, c))

    var n = find(np, nf, function(n){
        var r = getr(n, c);
        return r > targetR 
            ? -1
            : r < targetR
            ?1:0; 
    });

    console.log(n)

    for(var i=0;i<n;++i){
        var prime = i == 1 || i == 2 || i == 3 || !!(i%2);
        var s = sqrt(i)
        if(prime){
            for(var k = 3; k< s;k+=2){
                if(primes[k] && !(i % k))
                {
                    prime = false;
                    break;
                }
            }

            if(prime)
                primes[i]=true;
        } 


    }


    function find(min, max, fn){

        if(max<min)
            throw new Error(min, max);

        if(Math.abs(max-min)<2)
            return max; 

        var t = ((min+max)/2)|0;
        switch(fn(t)){
            case 0:
                return t;
            case 1:
                return find(t, max, fn);
            case -1:
                return find(min, t, fn);
        }    
    }

    split(n, 1000, function(i){render(i)});

    function split(n, m, fn){

        function frame(k){

            for(var i=0;i<m;++i){
                var j = k + i * m;
                if(j>n)
                    break;
                fn(j);
            }

            if(k <m-1)
            window.requestAnimationFrame(function(){frame(k+1)});

            console.log((100*k/m).toFixed(2)+'%');
        }

        frame(0);
    }


    function render(i){
        

            var p = pos(i, a, c);

        var prime  =isPrime(i);
            ctx.fillStyle = prime ? 'black' : 'silver'
            ctx.fillCircle(p[0], p[1], (prime? 1.3:.7)*c);
    }

    function pos(n, a, c){
        var r = c * sqrt(n);
        var p = n * a + ba;

        return [r*cos(p), r*sin(p)];
    }

    function isPrime(n){
        return primes[n]

        var s = sqrt(n);

        var prime = (n%2);

        if(prime)
            for(var i=3;i<s;i+=2)
                if(!(n%i))return false;

                
        return prime;
    }

 </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html>

	<head>
	</head>

	<body>
	<!-- loop -->
	<script type="text/javascript">
	"use strict";

	function loop(fixedDelta, fixedUpdate, update, sheduleFunction) {
	var then;
	var acc = 0;

	var next = function() {
	var now = new Date().getTime();
	var delta = now - then;
	then = now;

	if (delta === undefined \|\| isNaN(delta)) {
	delta = fixedDelta;
	}

	acc += delta;

	while (acc >= fixedDelta) {
	fixedUpdate(fixedDelta);
	acc -= fixedDelta;
	}

	update(delta);

	sheduleFunction(next);
	}

	next();
	}
	</script>
	<!-- color -->
	<script type="text/javascript">

	// hue Chroma luma
	function hcy2rgb(h, c, y, a) {
	// 601
	var r = .3;
	var g = .59;
	var b = .11;

	var h0 = h;
	h /= 60;

	var k = (1 - Math.abs((h % 2) - 1));

	var K = h < 1 ? r + k * g
	: h < 2 ? g + k * r
	: h < 3 ? g + k * b
	: h < 4 ? b + k * g
	: h < 5 ? b + k * r
	: r + k * b;

	var cmax = 1;

	if (y <= 0 \|\| y >= 1) cmax = 0;
	else cmax *= K < y ? (y - 1) / (K - 1) : K > y ? y / K : 1;
	//c *= cmax;
	c = Math.min(c, cmax);

	var x = c * k;
	var rgb = h < 1 ? [c, x, 0]
	: h < 2 ? [x, c, 0]
	: h < 3 ? [0, c, x]
	: h < 4 ? [0, x, c]
	: h < 5 ? [x, 0, c]
	: [c, 0, x];

	var m = y - (r * rgb[0] + g * rgb[1] + b * rgb[2]);

	var rgbdata = [rgb[0] + m, rgb[1] + m, rgb[2] + m];
	return 'rgba(' + (rgbdata[0] * 255).toFixed(0) + ',' + (rgbdata[1] * 255).toFixed(0) + ',' + (rgbdata[2] * 255).toFixed(0) + ', ' + (a \|\| 1) + ')';
	}

	</script>


	<!-- canvas -->
	<script type="text/javascript">
	"use strict";

	function fullscreenCanvas() {

	var c = document.createElement('canvas');
	var ctx = c.getContext('2d');

	ctx.canvas.width = window.innerWidth;
	ctx.canvas.height = window.innerHeight;
	ctx.canvas.style.position = 'absolute';
	ctx.canvas.style.top = 0;
	ctx.canvas.style.left = 0;

	ctx.clear = function() {
	ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
	};

	var q = 1 / Math.sqrt(3);

	ctx.makePath = function(vertices) {
	this.beginPath();
	this.moveTo(vertices[0], vertices[1]);
	for (var i = 2; i < vertices.length; i += 2) {
	this.lineTo(vertices[i], vertices[i + 1]);
	}
	this.closePath();
	}

	ctx.strokeCircle = function(x, y, r){
	ctx.beginPath();
	ctx.arc(x, y, r, 0, 2*Math.PI, true);
	ctx.closePath();
	ctx.stroke();
	}

	ctx.fillCircle = function(x, y, r){
	ctx.beginPath();
	ctx.arc(x, y, r, 0, 2*Math.PI, true);
	ctx.closePath();
	ctx.fill();
	}

	document.body.appendChild(c);
	return ctx;
	}
	</script>

	<script type="text/javascript">
	"use strict";

	var ctx = fullscreenCanvas();

	var w = ctx.canvas.width;
	var h = ctx.canvas.height;

	var sqrt = Math.sqrt;
	var sin = Math.sin;
	var cos = Math.cos;

	var a = Math.PI*(3-Math.sqrt(5));
	var ba = Math.random()Math.PI2;
	var c = .8;
	var primes = [];

	ctx.save();
	ctx.translate(w/2, h/2);

	var targetR = sqrt(ww+hh) / 2;

	function getr (n, c){
	return c * sqrt(n);
	}

	var nf = 1;
	var np=nf;

	while(getr(nf, c) < targetR){
	np=nf;
	nf*=2;
	}

	console.log(targetR, getr(np, c), getr(nf, c))

	var n = find(np, nf, function(n){
	var r = getr(n, c);
	return r > targetR
	? -1
	: r < targetR
	?1:0;
	});

	console.log(n)

	for(var i=0;i<n;++i){
	var prime = i == 1 \|\| i == 2 \|\| i == 3 \|\| !!(i%2);
	var s = sqrt(i)
	if(prime){
	for(var k = 3; k< s;k+=2){
	if(primes[k] && !(i % k))
	{
	prime = false;
	break;
	}
	}

	if(prime)
	primes[i]=true;
	}


	}


	function find(min, max, fn){

	if(max<min)
	throw new Error(min, max);

	if(Math.abs(max-min)<2)
	return max;

	var t = ((min+max)/2)\|0;
	switch(fn(t)){
	case 0:
	return t;
	case 1:
	return find(t, max, fn);
	case -1:
	return find(min, t, fn);
	}
	}

	split(n, 1000, function(i){render(i)});

	function split(n, m, fn){

	function frame(k){

	for(var i=0;i<m;++i){
	var j = k + i * m;
	if(j>n)
	break;
	fn(j);
	}

	if(k <m-1)
	window.requestAnimationFrame(function(){frame(k+1)});

	console.log((100*k/m).toFixed(2)+'%');
	}

	frame(0);
	}


	function render(i){


	var p = pos(i, a, c);

	var prime =isPrime(i);
	ctx.fillStyle = prime ? 'black' : 'silver'
	ctx.fillCircle(p[0], p[1], (prime? 1.3:.7)*c);
	}

	function pos(n, a, c){
	var r = c * sqrt(n);
	var p = n * a + ba;

	return [rcos(p), rsin(p)];
	}

	function isPrime(n){
	return primes[n]

	var s = sqrt(n);

	var prime = (n%2);

	if(prime)
	for(var i=3;i<s;i+=2)
	if(!(n%i))return false;


	return prime;
	}

	</script>
	</body>

	</html>