|
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
|
|
|
200 <script src="/lib/jquery-2.0.3.min.js"></script>
|
|
|
201 <script src="/lib/rickshaw/71877d994a/vendor/d3.min.js"></script>
|
|
|
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>
|
