light9 Files · www/mockup/curveedit.html

Files @ e9caffe926df
Branch filter:
Location: light9/www/mockup/curveedit.html

e9caffe926df 2.7 KiB text/html Show Annotation Show as Raw Download as Raw
drewp@bigasterisk.com
attribute 'nounlink' to save space
<!doctype html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8" />
    <style>
    body {
 font-family: sans;
        font-size: 8px;
        }
a {
    color: #aff;
    }
      canvas {
       
     }
.curveRow {
border-top: 1px solid rgb(185, 185, 185);
background: rgb(75, 75, 75);
    }
    </style>
  </head>
  <body>

    <div>
    Editing song: [song1] unlink Player is on song [song2] [x] follow player
    </div>

    <div>
    timeline
      <div>
  0 10 20 30 40 50 60 70 80 90 100 110 120
      </div>

      <div id="sampleCurveRow">
        <div class="curveRow"> <a href="#">curve1</a> <canvas></canvas> </div>
      </div>
      <script src="//bigasterisk.com/lib/jquery-2.0.3.min.js"></script>
      <script type="text/javascript">
    window.onload = function () {
        var row = $("#sampleCurveRow");
        for (var i=0; i<50; i++) {
            row.parent().append(row.clone());
        }
        var expandNear = 0;
        var animating = false;
        function redrawAll() {
            $("canvas").each(function (i, canvas) {
                canvas.width = 900;
                var near = Math.abs(Math.round(expandNear / 20) - i);
                canvas.height = Math.max(10, Math.min(150, 30 / near ));
                
                var ctx = canvas.getContext('2d');
                ctx.strokeStyle = 'white';
                ctx.strokeWidth = 3;
                var _rand = i * 13763;
                var rand = function() {
                    _rand = (_rand * 64874) % 7646;
                    return (_rand % 1000) / 1000;
                };
                var ww = Math.pow(rand(), 3) * 900;
                var t = (+new Date() / 1000);
                var pts = [];
                var zoom = animating ? (.6 + 4 * (Math.sin(t) + 1)) : 1;
                for (var x = 0; x < 900; x += Math.max(1, ww * Math.pow(rand(), 2))) {
                    var x2 = x * zoom;

                    var y = rand();
                    if (rand() > .8) {
                        y = 0;
                    }
                    pts.push([x2, canvas.height * (1 - y)]);
                }
                ctx.beginPath();
                ctx.moveTo(0, canvas.height);
                pts.forEach(function (pt) {
                    ctx.lineTo(pt[0], pt[1]);
                });
                ctx.lineTo(canvas.width, canvas.height);
                ctx.fill();
            });
        }
        var loop = function () {
            redrawAll();
            setTimeout(loop, 50);
        };
        redrawAll();
        $('body').click(function() { animating = true; loop(); });
        $('body').mousemove(function (ev) {
            expandNear = ev.pageY;
            redrawAll();
        });
    };
    </script>
  </body>
</html>