Hyper Fractals

hyper-fractals.markdown

Hyper Fractals

Details on the inside.

A Pen by Seth Bergman on CodePen.

License.

index.html

<!-- Please view in -webkit *****

*Hypotrochoid: a roulette traced by a point attached to a circle of radius r (var rad2) rolling around the inside of a fixed circle of radius R (var rad1), where the point is a distance d (var diam) from the center of the interior circle. (relate to the Spirograph)
(see: http://en.wikipedia.org/wiki/Hypotrochoid for equation)

TIPS:
* Move your mouse for objects to trail you - stop   
  suddenly to spawn something fantastic (mouse only)
* click for random awesome (mouse || touch)
* click&&hold zooming (mouse only)
* click once, keep mouse still > hit a few random keys of the keyboard (not too fast) as the shape enlarges for some real action.
* Use 'Clear Canvas' button if it gets too messy..
* The more you play, the more varied the designs become. 


<!-- <div id = 'info'>Please Read The Use Tips <br />In The HTML Editor Section. </div> -->
<canvas id="canv" width='900' height='900'></canvas>
<div>
<button id = 'clear'>Clear Canvas</button>
</div>
</body>

script.js

//I've commented everything 

//first attaching button behavior to clear canvas
window.onload = function () {
 document.getElementById('clear').onclick = clear;
};
var M = Math,  //assign math object
    update = 0,  // assign update / increment value
    win = window,  
    c = document.getElementById("canv"),
    $ = c.getContext("2d"),
    W = c.width = win.innerWidth,
    H = c.height = win.innerHeight;
    $.fillRect(0, 0, W, H);
    $.globalCompositeOperation = "lighter"; // display new image and old image 
    $.lineWidth = 0.2;
    $.lineCap = "round";
var bool = 0,  //truth value
    theta = 0; // theta

   win.requestAnimFrame = (function(callback) {
	    return win.requestAnimationFrame || win.webkitRequestAnimationFrame || win.mozRequestAnimationFrame || win.oRequestAnimationFrame || win.msRequestAnimationFrame ||
	function(callback) {
	   window.setTimeout(callback, 1000 / 60);
	};
})

  //Randomly display objects / shapes in varius sizes through mouseover:
    c.onmousemove = function (e) {
        if(win.time) {
            if(diam==9) { //our starting point
              diam=Math.random()*15; //draw at random
              f(1); //e = 1
           }
            clearTimeout(time);
        }
        X = e.pageX; // hold x,y coords
        Y = e.pageY;
        prevX=0; // previous  x
        prevY=0; // previous y
        origX = X, // assign to original x
        origY = Y; // assign to original y
        rad1=(e.pageX/W * 999>>0)/999;  //starting R (fixed point)
        rad2=(e.pageY/H * 999>>0)/999;  //starting r (inner point)
        update = e.pageX/H * 360 >>0;  //update value
        diam=9;  //size || diameter
        n = 360 * Math.PI / 180;  //even threshold value for maths
        time = setInterval(f = function (e) { // start looping function f
            $.save();  //save drawings
            $.globalCompositeOperation = "source-over";   //now draw new image over over the old
            if(e!=1) {   //function f conditional(e) 
              //if not equal to 1 - ie. not equal to 9 (see earlier mousemove function)- draw like this: 
                $.fillStyle = "rgba(0,0,0,0.02)"; //super light overlay on...
                $.fillRect(0, 0, W, H); //blank canvas > this will happen if there is no mouse movement, canvas will reset itself and move on to the following actions:
            }
            $.restore();  //restore context
            i = 25; while(i --) {   //vary sizes of objects
                $.beginPath();
                if(diam > 450 || bool) { // decrease diameter
                    if(!bool) { // has hit maximum
                        bool = 1;  //true value is 1
                    }
                    if(diam < 0.1) { // has hit minimum
                        bool = 0;   //truth value is 0
                    }
                    theta -= n; // decrease theta
                    diam -= 0.1; // decrease size
                }
                if(!bool) {     //if not true, make it big
                    theta += n; // increase theta
                    diam += 0.1; // increase size
                }
                hypo = (rad1 / rad2 - 1) * theta; // create hypotrochoid from current mouse position, and setup variables 
                x = (rad1 - rad2) * M.cos(theta) + diam * M.cos(hypo) + (origX + (X - origX) * (i / 25)) + (rad2 - rad1); // center on xy coords
                y = (rad1 - rad2) * M.sin(theta) - diam * M.sin(hypo) + (origY+ (Y - origY) * (i / 25));
                if (prevX) { // draw once two points are set
                    $.moveTo(prevX, prevY);
                    $.lineTo(x, y)
                }
                $.strokeStyle = "hsla(" + (update % 360) + ",100%,50%,0.75)"; // draw rainbowed hypotrochoid
                $.stroke();
                prevX = x; // set previous x 
                prevY = y; // set previous y 
            }
            update -= 0.5; // increment hue
            origX = X; // set origin x
            origY = Y; // set origin y
        }, 16);
    }
    document.onkeydown = function(e) {  //go wild on keyboard action
      prevX = prevY = 0;   //center
      rad1 += 0.05   //abuse the fixed circle radius (R)
    }
    c.onmousemove({   //on mouse move, trail 
      pageX:300, pageY:290
    });
 
  function clear(){
     $.clearRect(0, 0, W, H); //blank canvas 
     $.fillStyle = "rgba(0,0,0,1)"; //color it black
     $.fillRect(0, 0, W, H); 
  }
//time out function for the note to users
setTimeout(function() { 
  var info= document.getElementById('info');
  info.style.right = '-500px';
}, 5500);

style.css

@import url(https://fonts.googleapis.com/css?family=Raleway:900);
body{
  margin:0;
  width:100%;
  overflow:hidden;
}
canvas{
  width:100%;
  height:100vh;
}
#info {
  border-radius: 3px;
  margin: 0;
  position: fixed;
  top: 0;
  right: 0;
  width:15em;
  text-align:center;
  text-shadow:
               -1px 2px hsla(0,0%,0%,0.4);
  background-color: hsla(255, 255%, 255%,1);
  background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/131045/black-lozenge.png');
  color: hsla(0,0%,0%,1);
  padding: 1em;
  transition: right 0.3s cubic-bezier(.65,.18,.79,.3);
  line-height:1.5;
  font-size:1.2em;
  font-family: 'Raleway', sans-serif;
}
button{
  float:left;
  bottom:0em;
  margin-bottom:0;
  width:10em;
  position:fixed;
  border:none;
   background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/131045/black-lozenge.png');
  color: hsla(0,0%,0%,1);
  font-weight:bold;
  padding: .5em;
  text-shadow: -1px 2px hsla(0,0%,0%,0.4);
  background-color: hsla(255, 255%, 255%,1);
  user-select:none;
  outline:none;
}