API tools faq
paste
nyk0r

Koch Curve - CSS3 Transform

nyk0r
Nov 24th, 2012
56
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 6.38 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.    <title>Koch Curve</title>
  5.    <style type="text/css">
  6.       body {
  7.          background: #000;
  8.          height: 100%;
  9.          overflow: hidden;
  10.          margin:0;
  11.          padding: 0;
  12.       }
  13.      
  14.       #old-navigator {
  15.          position: absolute;
  16.          top: 50%;
  17.          margin-top: -0.5em;
  18.          color: #F78FE5;
  19.          font: 24px sans-serif;
  20.          text-align: center;
  21.          width: 100%;
  22.       }
  23.      
  24.       .x-line {
  25.          position: absolute;
  26.          height: 2px;
  27.          background: #FFF;
  28.          
  29.          -webkit-transform-origin: 0 100%;
  30.          -o-transform-origin: 0 100%;
  31.          -moz-transform-origin: 0 100%;
  32.          -ms-transform-origin: 0 100%;
  33.          transform-origin: 0 100%;
  34.       }
  35.    </style>
  36.    <script type="text/javascript">
  37.       function Line(ax, ay, bx, by) {
  38.          this.ax = ax;
  39.          this.ay = ay;
  40.          
  41.          this.bx = bx;
  42.          this.by = by;
  43.       }
  44.      
  45.       Line.prototype = {
  46.          transformProperty: function getTransformProperty() {
  47.             if (!document.body) {
  48.                document.addEventListener("DOMContentLoaded", function () {
  49.                   Line.prototype.transformProperty = getTransformProperty();
  50.                });
  51.                return;
  52.             }
  53.            
  54.             var style = document.body.style, properties = {
  55.                'transform': 'transform',
  56.                'mozTransform': '-moz-transform',
  57.                'oTransform': '-o-transform',
  58.                'msTransform': '-ms-transform',
  59.                'webkitTransform': '-webkit-transform'
  60.             }, property;
  61.            
  62.             for (property in properties) {
  63.                if (property in style) {
  64.                   return properties[property];
  65.                }
  66.             }
  67.            
  68.             throw new Error('WTF?');
  69.          }(),
  70.          
  71.          getA: function () {
  72.             return {
  73.                x: this.ax,
  74.                y: this.ay
  75.             };
  76.          },
  77.          
  78.          getB: function () {
  79.             return {
  80.                x: this.bx,
  81.                y: this.by
  82.             };
  83.          },
  84.          
  85.          getLength: function () {
  86.             var ax = this.ax, ay = this.ay, bx = this.bx, by = this.by;
  87.             return Math.sqrt((bx-ax)*(bx-ax) + (by-ay)*(by-ay));
  88.          },
  89.          
  90.          getAngle: function () {
  91.             var ax = this.ax, ay = this.ay, bx = this.bx, by = this.by;
  92.             return Math.atan2(by - ay, bx - ax);
  93.          },
  94.          
  95.          getDegAngle: function () {
  96.             return this.getAngle() * 180 / Math.PI;
  97.          },
  98.          
  99.          create: function () {
  100.             var result = document.createElement('div');
  101.            
  102.             result.className = 'x-line';
  103.            
  104.             result.style.width = this.getLength() + 'px';
  105.             result.style.left = this.ax + 'px';
  106.             result.style.top = this.ay + 'px';
  107.             result.style[this.transformProperty ] = 'rotate(' + this.getDegAngle() +'deg)';
  108.            
  109.             return result;
  110.          }
  111.       };
  112.      
  113.       function byte2Hex(n) {
  114.          var nybHexString = "0123456789ABCDEF";
  115.          return String(nybHexString.substr((n >> 4) & 0x0F,1)) + nybHexString.substr(n & 0x0F,1);
  116.       }
  117.      
  118.       function RGB2Color(r,g,b) {
  119.          return '#' + byte2Hex(r) + byte2Hex(g) + byte2Hex(b);
  120.       }
  121.      
  122.       function makeColorGradient(len, redPhase, greenPhase, bluePhase) {        
  123.          var amplitude = 128, center = 127,
  124.              i, step = 2*Math.PI/len, colors = [],
  125.              red, green, blue;
  126.          
  127.          redPhase = redPhase || 0;
  128.          greenPhase = greenPhase || Math.PI/2;
  129.          bluePhase = bluePhase || 4*Math.PI/3;
  130.      
  131.          for (var i = 0; i < len; i++) {
  132.            red = Math.sin(step*i + redPhase)*amplitude + center;
  133.            green = Math.sin(step*i + greenPhase)*amplitude + center;
  134.            blue = Math.sin(step*i + bluePhase)*amplitude + center;
  135.            colors.push(RGB2Color(red, green, blue));
  136.         }
  137.        
  138.         return colors;
  139.      }
  140.      
  141.      function drawCurve(ax, ay, bx, by, depth, container) {
  142.         var colors = makeColorGradient(100),
  143.             linesAmount = Math.pow(4, depth),
  144.             linesPerColor = linesAmount / colors.length,
  145.             currentLine = 0,
  146.             currentInterval = 0;
  147.            
  148.         function nexColor() {
  149.            if (currentLine > currentInterval * linesPerColor) {
  150.                currentInterval++;
  151.             }
  152.            
  153.             return colors[Math.floor(++currentLine / linesPerColor)];
  154.          }
  155.          
  156.          function draw(line, iter) {
  157.             if (!iter) {
  158.                var line = container.appendChild(line.create());
  159.                line.style.backgroundColor = nexColor();
  160.                container.appendChild(line);
  161.             } else {
  162.                var part = line.getLength() / 3,
  163.                    bias = line.getAngle(),
  164.                    ax = line.ax, ay = line.ay, bx = line.bx, by = line.by,
  165.                    a, b, c, d;
  166.                a = new Line(ax, ay, ax + Math.cos(bias) * part, ay + Math.sin(bias) * part);
  167.                b = new Line(a.bx, a.by, a.bx + Math.cos(bias + Math.PI/3) * part, a.by + Math.sin(bias + Math.PI/3) * part);
  168.                c = new Line(b.bx, b.by, ax + Math.cos(bias) * part * 2, ay + Math.sin(bias) * part * 2);
  169.                d = new Line(c.bx, c.by, bx, by);
  170.                
  171.                draw(a, iter - 1);
  172.                draw(b, iter - 1);
  173.                draw(c, iter - 1);
  174.                draw(d, iter - 1);
  175.             }
  176.          }
  177.          
  178.          draw(new Line(ax, ay, bx, by), depth);
  179.       }
  180.      
  181.       function launch () {
  182.          var body = document.body;  
  183.          
  184.          body.removeChild(document.getElementById('old-navigator'));        
  185.          /*body.appendChild((new Line(10, 5, 100, 5)).create());  
  186.          body.appendChild((new Line(100, 5, 50, 100)).create());
  187.          body.appendChild((new Line(10, 5, 50, 100)).create());*/
  188.          drawCurve(0, 0, window.innerWidth, 0, 5, body);    
  189.       }
  190.      
  191.       document.addEventListener("DOMContentLoaded", launch, false);
  192.    </script>
  193. </head>
  194. <body>
  195.    <div id="old-navigator">
  196.       Upgrade Your Browser! ;]
  197.    </div>
  198. </body>
  199. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!