dissolution

dissolution.markdown

dissolution

Random circle division by lines.
Click anywhere for new pattern.

Forked from Tiffany Rayside's Pen dissolution.

A Pen by Michael Anthony Casey on CodePen.

License.

index.html

<canvas id="canv"></canvas>
<p>Click Anywhere For New Pattern</p>
<!--
Based on MathWorld's Circle Division By Lines: http://mathworld.wolfram.com/CircleDivisionbyLines.html
!-->

script.js

function set() {
    var c = document.getElementById("canv"),
    $ = c.getContext("2d");
    c.width = window.innerWidth;
    c.height = window.innerHeight;
    $.fillStyle = 'hsla(0,0%,0%,1)';
    $.fillRect(0, 0, c.width, c.height);
  
    var _arr = [],
    arr = [],
    y = Math.round(2 * Math.PI / (2 * Math.PI / 5)),
    _w = c.width / 2,
    _h = c.height / 2,
    rnd, g, grd, b, _pi = 0,
    u = 90;
  
    var calc = function() {
      for (b = 0; b < y; b++) {
        pi = 2 * Math.PI / 5;
        _pi < 2 * Math.PI && (_pi += (pi));
        var a = {
          x: u * Math.sin(_pi) + _w,
          y: u * Math.cos(_pi) + _h,
          s: _pi,
          rad: 5
        };
        _arr.push(a)
    }
    for (a = 0; 9 > a; a++) {
      var rnd = 2 * Math.random() + -2 * Math.random();
      pi *= .5;
      for (b = 0; b < _arr.length; b++) {
        var n = _arr[b],
           _n = _arr[b + 1];
        null == _n && (_n = _arr[0]);
        var _n = Math.sqrt(Math.pow(n.x - _n.x, 2) + Math.pow(n.y - _n.y, 2)),
          g = u + _n * rnd,
          h = n.s + pi,
          _n = {
            x: g * Math.sin(h) + _w,
            y: g * Math.cos(h) + _h,
            s: h,
            rad: _n / 20,
          };
        arr.push(n);
        arr.push(_n)
      }
      _arr = arr;
      arr = []
    }
    window.requestAnimationFrame(draw);
  }

var draw = function() {
    for (b = 0; b < _arr.length; b++)
      rnd = _arr[b],
      grd = $.createLinearGradient(rnd.x+rnd.x, rnd.y+rnd.y, rnd.x, rnd.y),
      grd.addColorStop(0,  'hsla(' + u * b + ', 90%,50%,1)'),
      grd.addColorStop(0.5, 'hsla(255, 255%,255%,1)'),
      grd.addColorStop(1,  'hsla(' + u * b + ', 90%,50%,1)'),
      $.strokeStyle = grd,
      $.lineWidth = .35,
      $.beginPath(),
      $.moveTo(rnd.x, rnd.y),
      rnd = _arr[b + 1], null == _arr[b + 1] && (rnd = _arr[0]),
      $.lineTo(rnd.x, rnd.y),
      $.stroke(),
      $.strokeStyle = grd,
      $.beginPath(),
      $.arc(rnd.x, rnd.y, rnd.rad, 0, 2 * Math.PI, false),
      $.stroke();
}
    calc();

  document.addEventListener('click', function() {
    _arr = [];
    arr = [];
    _pi = 0;
    $.fillStyle = 'hsla(0,0%,0%,1)';
    $.fillRect(0, 0, c.width, c.height);
    calc()
  }, false);
  
}
set();
window.addEventListener('resize', function(){
    c.width = window.innerWidth;
    c.height = window.innerHeight;
  },false);

style.css

@import url(https://fonts.googleapis.com/css?family=Poiret+One);
body {
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: hsla(0, 0%, 0%, 1);
  cursor: pointer;
  font-family: 'Poiret One', cursive;
  font-size: 1.2em;
}

p {
  position: absolute;
  bottom: 0;
  text-align: center;
  width: 100%;
  color: hsla(255, 255%, 255%, .7);
}