Files
@ 9d6c7cab31b0
Branch filter:
Location: light9/www/mockup/curveedit.html - annotation
9d6c7cab31b0
2.7 KiB
text/html
refactor, though i think i want to remove this since it's redundant with metrics
45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 bdbf9f3acc6b 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 45290696a438 | <!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>
|