Spiral art using recursive circles

index.html

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

<p>Degree Change
<input type="range" id="degreeInput" min="-40.01" value="-25.57" max="40.01" step="0.01"/> <span id="degreeLabel">-25.57</span>
</p>

<p>Radius Change
<input type="range" id="radiusInput" min="0.01" value="1" max="2" step="0.01"/><span id="radiusLabel">1</span>
</p>

<a href="http://www.mikedoesweb.com/2014/recursive-spiral-art-with-canvasjavascript/">View on mikedoesweb.com</a>

script.js

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.strokeStyle = '#000';
context.lineWidth = 1.5;
degreeIncrement = -25.57;
radiusIncrement = 1;
var stopDrawing = false;

var loop = 100;

var circle = function(x, y, r){
  context.beginPath();
  context.arc(x, y, r, 0, 2 * Math.PI, false);
  context.fillStyle = 'rgba(0,102,255,0.01)';
      context.fill();
  context.closePath();  
  context.stroke(); 
};

var draw = function(x, y, r, d){ 
  if(loop > 0 && !stopDrawing){
    circle(x,y,r);
    var x1 = x + (r * Math.cos(d / 180 * Math.PI));
    var y1 = y + (r * Math.sin(d / 180 * Math.PI));
    d += degreeIncrement;
    r += radiusIncrement; 
    loop -= 1; 
    draw(x1,y1,r,d)
  }
}

var start = function(){
  loop = 1000;
  context.clearRect ( 0 , 0 , canvas.width, canvas.height );
  var x = canvas.width / 2;
  var y = canvas.height / 2;
  var radius = canvas.height / 2;  
  stopDrawing = false;
  draw (x, y, 5, 0);
}

start();

document.getElementById("degreeInput").addEventListener("input", function(){
  stopDrawing = true;
  var newDegrees = parseFloat(this.value);
  document.getElementById("degreeLabel").innerText = newDegrees;
  degreeIncrement = newDegrees;
  start()
},false);

document.getElementById("radiusInput").addEventListener("input", function(){ 
  stopDrawing = true;
  var newRadius = parseFloat(this.value);
  document.getElementById("radiusLabel").innerText = newRadius;
  radiusIncrement = newRadius; 
  start()
},false);

var loop = function(){
  stopDrawing = true;
  degreeIncrement += 0.01;
  document.getElementById("degreeInput").value = degreeIncrement;
  document.getElementById("degreeLabel").innerHTML = degreeIncrement;
  start();
}
var animation;
 
var animate = function(time){
  
  window.animation = window.setInterval(loop, 50)
}

animate(50);

Spiral-art-using-recursive-circles.markdown

Spiral art using recursive circles

Spiral art

A Pen by Michael Jasper on CodePen.

License.

style.css

#canvas{
  border:1px solid #000;
  width:800px;
  height:800px;
}