Breathing Spiral Fractal

Relaxing animated spiral fractal, generated using function based on Golden Ratio. Made with Processing.js

by Christopher O

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.16/processing.min.js"></script>
<canvas id="fractal"></canvas>

JavaScript

var PHI = 2; //1.61803398875 

function sketchProc(processing) {
	var startX;
  var startY;
  var direction;
  var length;
  var dChange;
  var weight;
  var j = 0;
  
  function reset() {
    startX = -30;
    startY = 30;
    direction = 0.5;
    length = direction * 1600;
  }
  
  function semiClear() {
  	processing.noStroke();
    processing.fill( 92,116,118, 25);
    processing.rect(0, 0, 800, 800);
  }
  
  processing.setup = function() {
    processing.size(800, 800);
    processing.background(92,116,118);
  };
  
  processing.draw = function() {
  	semiClear();
  	reset();
  	dChange = 0.19 + (Math.sin(j) * 0.012);
    weight = 16 + (-Math.sin(j) * 8);
    processing.stroke(255 + (-Math.sin(j) * 80),130,120);
    for (i = 0; i < 48; i++){
    	processing.strokeWeight(weight);
      drawLine(startX,startY,length,direction);
      startX = sinX(startX,length * (0.465 * PHI),direction);
      startY = cosY(startY,length * (0.465 * PHI),direction);
      weight /= 1.085;
      direction -= dChange;
      length /= 0.89 + dChange;
    }
    j+=0.01;
  }

  function drawLine(startX,startY,length,direction) {
    processing.line(
    	startX,
      startY,
      sinX(startX,length,direction),
      cosY(startY,length,direction)
    );
  }
  
  function sinX(startX,length,direction) {
  	return startX + Math.sin(direction * 2 * Math.PI) * length;
  }
  
  function cosY(startY,length,direction) {
  	return startY - Math.cos(direction * 2 * Math.PI) * length;
  }
}

var canvas = document.getElementById("fractal");
var processingInstance = new Processing(canvas, sketchProc);