Mercurial > code > home > repos > light9
annotate www/mockup/curveedit.html @ 2450:a4052905ca7d default tip
notes about how rdfdb syncs, or should sync
| author | drewp@bigasterisk.com |
|---|---|
| date | Mon, 03 Jun 2024 23:01:54 -0700 |
| parents | bdbf9f3acc6b |
| children |
| rev | line source |
|---|---|
| 1010 | 1 <!doctype html> |
| 2 <html> | |
| 3 <head> | |
| 4 <title></title> | |
| 5 <meta charset="utf-8" /> | |
| 6 <style> | |
| 7 body { | |
| 8 font-family: sans; | |
| 9 font-size: 8px; | |
| 10 } | |
| 11 a { | |
| 12 color: #aff; | |
| 13 } | |
| 14 canvas { | |
| 15 | |
| 16 } | |
| 17 .curveRow { | |
| 18 border-top: 1px solid rgb(185, 185, 185); | |
| 19 background: rgb(75, 75, 75); | |
| 20 } | |
| 21 </style> | |
| 22 </head> | |
| 23 <body> | |
| 24 | |
| 25 <div> | |
| 26 Editing song: [song1] unlink Player is on song [song2] [x] follow player | |
| 27 </div> | |
| 28 | |
| 29 <div> | |
| 30 timeline | |
| 31 <div> | |
| 32 0 10 20 30 40 50 60 70 80 90 100 110 120 | |
| 33 </div> | |
| 34 | |
| 35 <div id="sampleCurveRow"> | |
| 36 <div class="curveRow"> <a href="#">curve1</a> <canvas></canvas> </div> | |
| 37 </div> | |
|
1023
bdbf9f3acc6b
fix some demo js paths
Drew Perttula <drewp@bigasterisk.com>
parents:
1010
diff
changeset
|
38 <script src="//bigasterisk.com/lib/jquery-2.0.3.min.js"></script> |
| 1010 | 39 <script type="text/javascript"> |
| 40 window.onload = function () { | |
| 41 var row = $("#sampleCurveRow"); | |
| 42 for (var i=0; i<50; i++) { | |
| 43 row.parent().append(row.clone()); | |
| 44 } | |
| 45 var expandNear = 0; | |
| 46 var animating = false; | |
| 47 function redrawAll() { | |
| 48 $("canvas").each(function (i, canvas) { | |
| 49 canvas.width = 900; | |
| 50 var near = Math.abs(Math.round(expandNear / 20) - i); | |
| 51 canvas.height = Math.max(10, Math.min(150, 30 / near )); | |
| 52 | |
| 53 var ctx = canvas.getContext('2d'); | |
| 54 ctx.strokeStyle = 'white'; | |
| 55 ctx.strokeWidth = 3; | |
| 56 var _rand = i * 13763; | |
| 57 var rand = function() { | |
| 58 _rand = (_rand * 64874) % 7646; | |
| 59 return (_rand % 1000) / 1000; | |
| 60 }; | |
| 61 var ww = Math.pow(rand(), 3) * 900; | |
| 62 var t = (+new Date() / 1000); | |
| 63 var pts = []; | |
| 64 var zoom = animating ? (.6 + 4 * (Math.sin(t) + 1)) : 1; | |
| 65 for (var x = 0; x < 900; x += Math.max(1, ww * Math.pow(rand(), 2))) { | |
| 66 var x2 = x * zoom; | |
| 67 | |
| 68 var y = rand(); | |
| 69 if (rand() > .8) { | |
| 70 y = 0; | |
| 71 } | |
| 72 pts.push([x2, canvas.height * (1 - y)]); | |
| 73 } | |
| 74 ctx.beginPath(); | |
| 75 ctx.moveTo(0, canvas.height); | |
| 76 pts.forEach(function (pt) { | |
| 77 ctx.lineTo(pt[0], pt[1]); | |
| 78 }); | |
| 79 ctx.lineTo(canvas.width, canvas.height); | |
| 80 ctx.fill(); | |
| 81 }); | |
| 82 } | |
| 83 var loop = function () { | |
| 84 redrawAll(); | |
| 85 setTimeout(loop, 50); | |
| 86 }; | |
| 87 redrawAll(); | |
| 88 $('body').click(function() { animating = true; loop(); }); | |
| 89 $('body').mousemove(function (ev) { | |
| 90 expandNear = ev.pageY; | |
| 91 redrawAll(); | |
| 92 }); | |
| 93 }; | |
| 94 </script> | |
| 95 </body> | |
| 96 </html> |