Mercurial > code > home > repos > light9
annotate www/mockup/effectpreview.html @ 2438:f2b3cfcc23d3
comment
| author | drewp@bigasterisk.com |
|---|---|
| date | Wed, 29 May 2024 17:28:25 -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 background: black; | |
| 11 color: gray; | |
| 12 } | |
| 13 a { | |
| 14 color: #aff; | |
| 15 } | |
| 16 canvas { | |
| 17 outline: 1px solid gray; | |
| 18 } | |
| 19 svg { | |
| 20 pointer-events: none; | |
| 21 } | |
| 22 .markers text { | |
| 23 fill: white; | |
| 24 } | |
| 25 .timelineArea { | |
| 26 display: inline-block; | |
| 27 } | |
| 28 .codeLine { | |
| 29 margin-bottom: 3em; | |
| 30 position: relative; | |
| 31 border: 1px solid #dfdfdf; | |
| 32 padding: 5px; | |
| 33 } | |
| 34 .codeLine canvas { | |
| 35 display: block; | |
| 36 } | |
| 37 code { | |
| 38 display: block; | |
| 39 font-size: 14px; | |
| 40 margin: 20px 0; | |
| 41 padding: 5px; | |
| 42 color: white; | |
| 43 background: rgba(34, 34 34, 0.52); | |
| 44 } | |
| 45 .alignStartTime { | |
| 46 margin-left: 150px; | |
| 47 } | |
| 48 .codeLine .inputs, .codeLine .output { | |
| 49 } | |
| 50 .codeLine .inputs { | |
| 51 } | |
| 52 .codeLine .output { | |
| 53 } | |
| 54 .codeLine svg.arrows { | |
| 55 position: absolute; | |
| 56 } | |
| 57 .timelineArea { | |
| 58 position: relative; | |
| 59 } | |
| 60 svg.markers { | |
| 61 position: absolute; | |
| 62 top: 0; | |
| 63 left: 150px; | |
| 64 right: 0; | |
| 65 bottom: 0; | |
| 66 } | |
| 67 .adjustable { | |
| 68 border: 2px dashed rgb(72, 72, 252); | |
| 69 padding: 0 4px; | |
| 70 background: rgba(109, 109, 253, 0.38); | |
| 71 } | |
| 72 .markers path { | |
| 73 stroke:#ffffff; | |
| 74 stroke-width:1; | |
| 75 opacity:0.31660232 | |
| 76 } | |
| 77 </style> | |
| 78 </head> | |
| 79 <body> | |
| 80 <h1> | |
| 81 Effect chase1 | |
| 82 </h1> | |
| 83 <div> | |
| 84 (<--> timeline adjusters) | |
| 85 </div> | |
| 86 <div class="timelineArea"> | |
| 87 <!-- times + beats + now, extends under the rest --> | |
| 88 <svg class="markers"> | |
| 89 <text x="0" y="10"> 0sec </text><path d="m0,20 0,2000"></path> | |
| 90 <text x="80" y="10"> 10 </text><path d="m30,20 0,2000"></path> | |
| 91 <text x="160" y="10"> 20 </text><path d="m60,20 0,2000"></path> | |
| 92 <text x="240" y="10"> 30 </text><path d="m90,20 0,2000"></path> | |
| 93 <text x="320" y="10"> 40 </text><path d="m120,20 0,2000"></path> | |
| 94 </svg> | |
| 95 | |
| 96 <div class="codeLine"> | |
| 97 <style> | |
| 98 .arrows path { | |
| 99 fill:none;stroke:#ffffff;stroke-width:2.10000000000000009;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none;marker-end:url(#Arrow2Mend);opacity:0.31660232 | |
| 100 } | |
| 101 </style> | |
| 102 <svg class="arrows"> | |
| 103 <defs id="defs4"> | |
| 104 <marker orient="auto" refY="0.0" refX="0.0" id="Arrow2Mend" style="overflow:visible;"> | |
| 105 <path style="fill-rule:evenodd;stroke-width:0.62500000;stroke-linejoin:round;" | |
| 106 d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z " | |
| 107 transform="scale(0.6) rotate(180) translate(0,0)" /> | |
| 108 </marker> | |
| 109 </defs> | |
| 110 <path class="arrow" d="m0,0"></path> | |
| 111 </svg> | |
| 112 <div class="inputs"> | |
| 113 </div> | |
| 114 <code><span class="out" id="out1var">hue</span> = nsin(t * <span class="adjustable" data-param="sinTimeCoeff">.5</span> + 2pi * <span class="adjustable" data-param="sinTimeOffset">0</span>)</code> | |
| 115 <div class="alignStartTime"> | |
| 116 <canvas class="output" id="out1"></canvas> | |
| 117 </div> | |
| 118 </div> | |
| 119 | |
| 120 <div class="codeLine"> | |
| 121 <svg class="arrows"> <defs></defs> | |
| 122 <path class="arrow" d="m0,0"></path> | |
| 123 <path class="arrow" d="m0,0"></path> | |
| 124 <path class="arrow" d="m0,0"></path> | |
| 125 </svg> | |
| 126 <div class="inputs"> | |
| 127 <div class="alignStartTime"> | |
| 128 <canvas class="input" id="in1"></canvas> | |
| 129 </div> | |
| 130 <div class="alignStartTime"> | |
| 131 <canvas class="input" id="in2"></canvas> | |
| 132 </div> | |
| 133 </div> | |
| 134 <code><span id="out2var">val</span> = <span id="in21var">backchase</span> * (<span id="in22var">music</span> > <span class="adjustable" data-param="valThresh">.3</span>)</code> | |
| 135 <div class="alignStartTime"> | |
| 136 <canvas class="output" id="out2"></canvas> | |
| 137 </div> | |
| 138 </div> | |
| 139 | |
| 140 <div class="codeLine"> | |
| 141 <svg class="arrows"> <defs></defs><path class="arrow" d="m0,0"></path> </svg> | |
| 142 <div class="inputs"> | |
| 143 </div> | |
| 144 <code><span id="out3var">out</span> = hsv2rgb(hue, <span class="adjustable" data-param="sat">1.0</span>, val)</code> | |
| 145 <div class="alignStartTime"> | |
| 146 <canvas class="output" id="out3"></canvas> | |
| 147 </div> | |
| 148 </div> | |
| 149 </div> | |
| 150 <style> | |
| 151 .dragValue { | |
| 152 position: absolute; | |
| 153 left: 98px; | |
| 154 top: 168px; | |
| 155 width: 300px; | |
| 156 background: rgba(80,80,80,0.64); | |
| 157 color: white; | |
| 158 border: 1px solid black; | |
| 159 box-shadow: 5px 5px 73px black; | |
| 160 font-size: 26px; | |
| 161 -webkit-user-select: none; | |
| 162 | |
| 163 } | |
| 164 .dragValue table { | |
| 165 width: 100%; | |
| 166 border-collapse: collapse; | |
| 167 } | |
| 168 .dragValue table tr.current td { | |
| 169 background: rgba(128, 128, 128, 0.71); | |
| 170 } | |
| 171 .dragValue table td { | |
| 172 border-left: 1px solid black; | |
| 173 height: 80px; | |
| 174 } | |
| 175 .dragValue table .low { } | |
| 176 .dragValue table .high { text-align: right; } | |
| 177 | |
| 178 div.newValue { | |
| 179 position: absolute; | |
| 180 display: inline-block; | |
| 181 border: 1px solid black; | |
| 182 border-radius: 50%; | |
| 183 padding: 3px; | |
| 184 font-size: 20px; | |
| 185 color: black; | |
| 186 background: rgb(241, 241, 144); | |
| 187 box-shadow: 3px 4px 12px rgba(0, 0, 0, 0.23); | |
| 188 } | |
| 189 </style> | |
| 190 <div class="dragValue"> | |
| 191 Editing .5 to <span class="newValue">.5</span> | |
| 192 <table> | |
| 193 <tr data-bounds="0 1"><td class="low">0 ||||||||||</td><td class="high">|||||||||| 1</td></tr> | |
| 194 <tr data-bounds=".4 .6"><td class="low">.4 | | | | |</td><td class="high">| | | | | .6</td></tr> | |
| 195 <tr data-bounds=".49 .51"><td class="low">.49</td><td class="high">.51</td></tr> | |
| 196 </table> | |
| 197 <div class="newValue">.5</div> | |
| 198 </div> | |
| 199 | |
|
1023
bdbf9f3acc6b
fix some demo js paths
Drew Perttula <drewp@bigasterisk.com>
parents:
1010
diff
changeset
|
200 <script src="//bigasterisk.com/lib/jquery-2.0.3.min.js"></script> |
|
bdbf9f3acc6b
fix some demo js paths
Drew Perttula <drewp@bigasterisk.com>
parents:
1010
diff
changeset
|
201 <script src="//bigasterisk.com/lib/rickshaw/71877d994a/vendor/d3.min.js"></script> |
| 1010 | 202 <script type="text/javascript"> |
| 203 window.onload = function () { | |
| 204 | |
| 205 var _music = []; | |
| 206 for (var x=0; x<1000; x++) { | |
| 207 _music.push(Math.random()); | |
| 208 } | |
| 209 function musicCurve(x) { | |
| 210 return _music[Math.round(x)]; | |
| 211 } | |
| 212 var params = { | |
| 213 sinTimeCoeff: .1, | |
| 214 sinTimeOffset: 0, | |
| 215 valThresh: .5, | |
| 216 sat: 1 | |
| 217 }; | |
| 218 | |
| 219 function hue(x) { return Math.sin(x * params.sinTimeCoeff + 6.28 * params.sinTimeOffset) * .5 + .5; } | |
| 220 function valFunc(x) { return (x > 100 && x < 300) * (musicCurve(x) > params.valThresh); } | |
| 221 | |
| 222 function drawCurve(canvas, func) { | |
| 223 var ctx = canvas.getContext('2d'); | |
| 224 ctx.clearRect(0, 0, canvas.width, canvas.height); | |
| 225 | |
| 226 ctx.strokeStyle = '#ffffff'; | |
| 227 ctx.fillStyle = '#666'; | |
| 228 ctx.strokeWidth = 3; | |
| 229 ctx.beginPath(); | |
| 230 ctx.moveTo(0, canvas.height); | |
| 231 for (var x = 0; x < canvas.width; x += 2) { | |
| 232 var y = func(x); | |
| 233 ctx.lineTo(x, canvas.height * (1 - y)); | |
| 234 } | |
| 235 ctx.lineTo(canvas.width, canvas.height); | |
| 236 ctx.fill(); | |
| 237 ctx.stroke(); | |
| 238 } | |
| 239 function drawRgb(canvas) { | |
| 240 var ctx = canvas.getContext('2d'); | |
| 241 ctx.clearRect(0, 0, canvas.width, canvas.height); | |
| 242 var step = 1; | |
| 243 for (var x = 0; x < canvas.width; x+= step) { | |
| 244 var vv = (valFunc(x) * .5 * 100); | |
| 245 ctx.fillStyle = ('hsl('+ | |
| 246 (360 * hue(x))+','+ | |
| 247 (params.sat * 100)+'%,'+ | |
| 248 vv+'%'+ | |
| 249 ')'); | |
| 250 if (vv > 0) { | |
| 251 ctx.fillRect(x, 0, step, canvas.height); | |
| 252 } // else leave it transparent | |
| 253 } | |
| 254 } | |
| 255 | |
| 256 function drawTimeCoords(svg) { | |
| 257 // use KO on svg templates | |
| 258 } | |
| 259 function routePath(svg, src, dest) { | |
| 260 var parent = $(svg).position(); | |
| 261 var srcPos = src.position(); | |
| 262 var destPos = dest.position(); | |
| 263 var startDown = srcPos.left < 150; | |
| 264 if (startDown) { | |
| 265 srcPos.left += src.width() / 2; | |
| 266 srcPos.top += src.height(); | |
| 267 destPos.top += dest.height() / 2; | |
| 268 } else { | |
| 269 srcPos.top += src.height() / 2; | |
| 270 destPos.left += dest.width() / 2; | |
| 271 } | |
| 272 | |
| 273 var d = ""; | |
| 274 var px = parent.left, py = parent.top; | |
| 275 d += "m" + (srcPos.left - px) + "," + (srcPos.top - py); | |
| 276 if (startDown) { | |
| 277 d += "L" + (srcPos.left - px) + "," + (destPos.top - py); | |
| 278 } else { | |
| 279 if (destPos.left < srcPos.left) { | |
| 280 d += "L" + (destPos.left - px) + "," + (srcPos.top - py); | |
| 281 } else { | |
| 282 d += "L" + (srcPos.left - px - 10) + "," + (srcPos.top - py); | |
| 283 var ymid = srcPos.top + src.height() / 2 + 5; | |
| 284 d += "L" + (srcPos.left - px - 10) + "," + (ymid - py); | |
| 285 d += "L" + (destPos.left - px) + "," + (ymid - py); | |
| 286 } | |
| 287 } | |
| 288 d += "L" + (destPos.left - px) + "," + (destPos.top - py); | |
| 289 return d; | |
| 290 } | |
| 291 function connectElems(svg, src, dest) { | |
| 292 // this is wrong; it's not a proper path object | |
| 293 var path = document.createElementNS('svg', 'path'); | |
| 294 svg.appendChild(path); | |
| 295 | |
| 296 // workaround- use spare path nodes | |
| 297 for (var i = 1; i < svg.children.length; i++) { | |
| 298 path = svg.children[i]; | |
| 299 if (path.getAttribute('d') == 'm0,0') { | |
| 300 break; | |
| 301 } | |
| 302 } | |
| 303 | |
| 304 path.classList.add('arrow'); | |
| 305 path.setAttribute('d', routePath(svg, src, dest)); | |
| 306 } | |
| 307 | |
| 308 function connectVars() { | |
| 309 connectElems($("#out1").closest(".codeLine").find(".arrows")[0], $("#out1var"), $("#out1")); | |
| 310 connectElems($("#out2").closest(".codeLine").find(".arrows")[0], $("#out2var"), $("#out2")); | |
| 311 connectElems($("#out3").closest(".codeLine").find(".arrows")[0], $("#out3var"), $("#out3")); | |
| 312 | |
| 313 connectElems($("#out2").closest(".codeLine").find(".arrows")[0], $("#in1"), $("#in21var")); | |
| 314 connectElems($("#out2").closest(".codeLine").find(".arrows")[0], $("#in2"), $("#in22var")); | |
| 315 } | |
| 316 function redrawAll() { | |
| 317 $("canvas").each(function (i, canvas) { | |
| 318 canvas.width = 500; | |
| 319 canvas.height = 30; | |
| 320 }); | |
| 321 drawCurve($("#out1")[0], hue) | |
| 322 drawCurve($("#in1")[0], function (x) { return x > 100 && x < 300; }) | |
| 323 drawCurve($("#in2")[0], function (x) { return musicCurve(x); }) | |
| 324 drawCurve($("#out2")[0], valFunc); | |
| 325 drawRgb($("#out3")[0]); | |
| 326 | |
| 327 $("svg.arrows").each(function (i, svg) { | |
| 328 | |
| 329 }); | |
| 330 drawTimeCoords($(".markers")); | |
| 331 connectVars(); | |
| 332 } | |
| 333 redrawAll(); | |
| 334 | |
| 335 | |
| 336 var adjusting = null; | |
| 337 var adjustParam = ""; | |
| 338 $(".dragValue").hide(); | |
| 339 $(".adjustable").mousedown(function (ev) { | |
| 340 $(".dragValue").show(); | |
| 341 adjusting = $(ev.target); | |
| 342 adjustParam = adjusting.attr('data-param'); | |
| 343 $(".dragValue").css({left: adjusting.offset().left - 150, | |
| 344 top: adjusting.offset().top - 120}); | |
| 345 }); | |
| 346 $("body, .dragValue").mouseup(function (ev) { | |
| 347 $(".dragValue").hide(); | |
| 348 }); | |
| 349 $(".dragValue").mousemove(function (ev) { | |
| 350 var dv = $(".dragValue").position(); | |
| 351 $(".dragValue div.newValue").css({left: ev.pageX - dv.left - 15, top: ev.pageY - dv.top - 35}); | |
| 352 var row = $(ev.target).closest('tr'); | |
| 353 $(".dragValue tr").removeClass('current'); | |
| 354 if (!row.length) { | |
| 355 // revert | |
| 356 return; | |
| 357 } | |
| 358 row.addClass('current'); | |
| 359 | |
| 360 var rx = row.offset().left; | |
| 361 var frac = (ev.pageX - rx) / row.width(); | |
| 362 | |
| 363 var bounds = row.attr('data-bounds').split(" "); | |
| 364 var newValue = parseFloat(bounds[0]) * (1 - frac) + parseFloat(bounds[1]) * frac; | |
| 365 newValue = Math.round(newValue * 1000) / 1000; | |
| 366 valueChanged(newValue); | |
| 367 }); | |
| 368 function valueChanged(newValue) { | |
| 369 if (adjusting) { | |
| 370 adjusting.text(newValue); | |
| 371 } | |
| 372 $(".dragValue .newValue").text(newValue); | |
| 373 params[adjustParam] = newValue; | |
| 374 drawCurve($("#out1")[0], hue) | |
| 375 drawCurve($("#out2")[0], valFunc); | |
| 376 drawRgb($("#out3")[0]); | |
| 377 }; | |
| 378 | |
| 379 }; | |
| 380 </script> | |
| 381 </body> | |
| 382 </html> |