Files
@ 3368aeaded44
Branch filter:
Location: light9/www/mockup/curveedit.html - annotation
3368aeaded44
2.7 KiB
text/html
fix note update
Ignore-this: 213c42b10be25b0fd59c68d5ba3bdda3
Ignore-this: 213c42b10be25b0fd59c68d5ba3bdda3
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>
|