JSFiddle - React, Tailwind, and code Playground

by Andrea Guerzoni

HTML

<div id="canvas-wrap">
  <canvas id="c" width="582" height="620"></canvas>
</div>

JavaScript

function spiral_render(){
	var c = document.getElementById('c');
	var context = c.getContext("2d");
	var centerx = (context.canvas.width / 2)+5;
	var centery = (context.canvas.height / 2)+100;
	context.clearRect(0, 0, 582, 620);
	context.moveTo(centerx, centery);
	context.beginPath();
	
	var dots_coordinates = [];
	
	a = parseFloat(0.41);
	b = parseFloat(0.23);
	var dots = 20;	//How many dots
	rounds = parseFloat(180);
	strength = parseFloat(30);
	
	sample = strength * 360;
	start = -rounds*(3.14);
	end = rounds*(3.14);
	step = (end - start) / sample;
			
	var distance = parseInt((sample/dots)/2.6);    //Distance between dots
	
	k = 0;
    //Draw the golden spiral
	for (var i = 1; i <= sample; i++) {
		r = start+i*step;
		t = (1/b)*Math.log(r/a);    //Phi angle of spiral
		
		x = centerx + r* Math.cos(t);
		y = centery + r* Math.sin(t);

		if (i % distance == 0 && k <=dots && i > 5600) {
			if(x && y){
				dots_coordinates.push([x,y]);
				k++;
			}
		}
		context.lineTo(x, y);
	}
	context.lineWidth = 0.5;
	context.strokeStyle = "#000";
	context.stroke();

    //Draw the dots in sequential mode
    context.moveTo(centerx, centery);
    var i = 0;
    inter = setInterval(function() {

        xp = Math.floor( dots_coordinates[i][0] );
        yp = Math.floor( dots_coordinates[i][1] );
        
        context.beginPath();
        context.lineTo(xp, yp);
        context.arc(xp, yp, 4, 0, 2 * Math.PI , false);
        context.fillStyle = '#C4071A';
        context.fill();
        
        i++;
        
        if (i == (dots_coordinates.length)) {
            clearInterval(inter);
        }
        
    }, 50);
}
spiral_render();