Changeset - 45290696a438
Parent rev.
Child rev.
[Not reviewed]
default
0 0 4
drewp@bigasterisk.com - 11 years ago 2014-04-26 17:48:21
drewp@bigasterisk.com
add new html mockups
Ignore-this: 6f4c1701a5a9f378217d513ee88368a0
4 files changed with 813 insertions and 0 deletions:
www/mockup/curveedit.html
96
www/mockup/effectmockup.svg
313
www/mockup/effectpreview.html
382
www/mockup/inputmapping.html
22
0 comments (0 inline, 0 general)
www/mockup/curveedit.html
➞
Show inline comments
 
new file 100644
 
<!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="/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>

			




        

    


    
    

    

        

                

                    www/mockup/effectmockup.svg
                

                

                  
                      
                        

                      ➞

                      
                        
                  

                  
                      
                  
                      
                  
                      
                  
                      
                  
                  
                

                

                    Show inline comments
                    
                

        

        

            



	
	
		
 
new file 100644

			




	
	
	
		
 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>

			




	
	
	
		
 
<!-- Created with Inkscape (http://www.inkscape.org/) -->

			




	
	
	
		
 

			




	
	
	
		
 
<svg

			




	
	
	
		
 
   xmlns:dc="http://purl.org/dc/elements/1.1/"

			




	
	
	
		
 
   xmlns:cc="http://creativecommons.org/ns#"

			




	
	
	
		
 
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"

			




	
	
	
		
 
   xmlns:svg="http://www.w3.org/2000/svg"

			




	
	
	
		
 
   xmlns="http://www.w3.org/2000/svg"

			




	
	
	
		
 
   xmlns:xlink="http://www.w3.org/1999/xlink"

			




	
	
	
		
 
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"

			




	
	
	
		
 
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"

			




	
	
	
		
 
   width="744.09448819"

			




	
	
	
		
 
   height="1052.3622047"

			




	
	
	
		
 
   id="svg2"

			




	
	
	
		
 
   version="1.1"

			




	
	
	
		
 
   inkscape:version="0.48.4 r9939"

			




	
	
	
		
 
   sodipodi:docname="effectmockup.svg">

			




	
	
	
		
 
  <defs

			




	
	
	
		
 
     id="defs4">

			




	
	
	
		
 
    <marker

			




	
	
	
		
 
       inkscape:stockid="Arrow2Mend"

			




	
	
	
		
 
       orient="auto"

			




	
	
	
		
 
       refY="0.0"

			




	
	
	
		
 
       refX="0.0"

			




	
	
	
		
 
       id="Arrow2Mend"

			




	
	
	
		
 
       style="overflow:visible;">

			




	
	
	
		
 
      <path

			




	
	
	
		
 
         id="path3881"

			




	
	
	
		
 
         style="fill-rule:evenodd;stroke-width:0.62500000;stroke-linejoin:round;"

			




	
	
	
		
 
         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 "

			




	
	
	
		
 
         transform="scale(0.6) rotate(180) translate(0,0)" />

			




	
	
	
		
 
    </marker>

			




	
	
	
		
 
    <marker

			




	
	
	
		
 
       inkscape:stockid="Arrow1Mend"

			




	
	
	
		
 
       orient="auto"

			




	
	
	
		
 
       refY="0.0"

			




	
	
	
		
 
       refX="0.0"

			




	
	
	
		
 
       id="Arrow1Mend"

			




	
	
	
		
 
       style="overflow:visible;">

			




	
	
	
		
 
      <path

			




	
	
	
		
 
         id="path3863"

			




	
	
	
		
 
         d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "

			




	
	
	
		
 
         style="fill-rule:evenodd;stroke:#000000;stroke-width:1.0pt;"

			




	
	
	
		
 
         transform="scale(0.4) rotate(180) translate(10,0)" />

			




	
	
	
		
 
    </marker>

			




	
	
	
		
 
    <marker

			




	
	
	
		
 
       inkscape:stockid="Arrow1Lend"

			




	
	
	
		
 
       orient="auto"

			




	
	
	
		
 
       refY="0.0"

			




	
	
	
		
 
       refX="0.0"

			




	
	
	
		
 
       id="Arrow1Lend"

			




	
	
	
		
 
       style="overflow:visible;">

			




	
	
	
		
 
      <path

			




	
	
	
		
 
         id="path3857"

			




	
	
	
		
 
         d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "

			




	
	
	
		
 
         style="fill-rule:evenodd;stroke:#000000;stroke-width:1.0pt;"

			




	
	
	
		
 
         transform="scale(0.8) rotate(180) translate(12.5,0)" />

			




	
	
	
		
 
    </marker>

			




	
	
	
		
 
    <linearGradient

			




	
	
	
		
 
       id="linearGradient3816">

			




	
	
	
		
 
      <stop

			




	
	
	
		
 
         style="stop-color:#000000;stop-opacity:1;"

			




	
	
	
		
 
         offset="0"

			




	
	
	
		
 
         id="stop3818" />

			




	
	
	
		
 
      <stop

			




	
	
	
		
 
         id="stop3824"

			




	
	
	
		
 
         offset="0.5"

			




	
	
	
		
 
         style="stop-color:#da6bd5;stop-opacity:1;" />

			




	
	
	
		
 
      <stop

			




	
	
	
		
 
         style="stop-color:#4abdc7;stop-opacity:0.875;"

			




	
	
	
		
 
         offset="0.75"

			




	
	
	
		
 
         id="stop3826" />

			




	
	
	
		
 
      <stop

			




	
	
	
		
 
         id="stop3828"

			




	
	
	
		
 
         offset="0.875"

			




	
	
	
		
 
         style="stop-color:#8ddb3f;stop-opacity:0.83620691;" />

			




	
	
	
		
 
      <stop

			




	
	
	
		
 
         style="stop-color:#000000;stop-opacity:0;"

			




	
	
	
		
 
         offset="1"

			




	
	
	
		
 
         id="stop3820" />

			




	
	
	
		
 
    </linearGradient>

			




	
	
	
		
 
    <linearGradient

			




	
	
	
		
 
       inkscape:collect="always"

			




	
	
	
		
 
       xlink:href="#linearGradient3816"

			




	
	
	
		
 
       id="linearGradient3822"

			




	
	
	
		
 
       x1="157.0838"

			




	
	
	
		
 
       y1="608.90521"

			




	
	
	
		
 
       x2="479.31232"

			




	
	
	
		
 
       y2="608.90521"

			




	
	
	
		
 
       gradientUnits="userSpaceOnUse"

			




	
	
	
		
 
       gradientTransform="translate(114.28571,172.85714)" />

			




	
	
	
		
 
  </defs>

			




	
	
	
		
 
  <sodipodi:namedview

			




	
	
	
		
 
     id="base"

			




	
	
	
		
 
     pagecolor="#ffffff"

			




	
	
	
		
 
     bordercolor="#666666"

			




	
	
	
		
 
     borderopacity="1.0"

			




	
	
	
		
 
     inkscape:pageopacity="0.0"

			




	
	
	
		
 
     inkscape:pageshadow="2"

			




	
	
	
		
 
     inkscape:zoom="0.77245895"

			




	
	
	
		
 
     inkscape:cx="400.81482"

			




	
	
	
		
 
     inkscape:cy="309.02614"

			




	
	
	
		
 
     inkscape:document-units="px"

			




	
	
	
		
 
     inkscape:current-layer="layer1"

			




	
	
	
		
 
     showgrid="false"

			




	
	
	
		
 
     inkscape:window-width="1160"

			




	
	
	
		
 
     inkscape:window-height="971"

			




	
	
	
		
 
     inkscape:window-x="1"

			




	
	
	
		
 
     inkscape:window-y="52"

			




	
	
	
		
 
     inkscape:window-maximized="0" />

			




	
	
	
		
 
  <metadata

			




	
	
	
		
 
     id="metadata7">

			




	
	
	
		
 
    <rdf:RDF>

			




	
	
	
		
 
      <cc:Work

			




	
	
	
		
 
         rdf:about="">

			




	
	
	
		
 
        <dc:format>image/svg+xml</dc:format>

			




	
	
	
		
 
        <dc:type

			




	
	
	
		
 
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />

			




	
	
	
		
 
        <dc:title></dc:title>

			




	
	
	
		
 
      </cc:Work>

			




	
	
	
		
 
    </rdf:RDF>

			




	
	
	
		
 
  </metadata>

			




	
	
	
		
 
  <g

			




	
	
	
		
 
     inkscape:label="Layer 1"

			




	
	
	
		
 
     inkscape:groupmode="layer"

			




	
	
	
		
 
     id="layer1">

			




	
	
	
		
 
    <text

			




	
	
	
		
 
       xml:space="preserve"

			




	
	
	
		
 
       style="font-size:96.21405029px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;opacity:0.26254829;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans"

			




	
	
	
		
 
       x="1460.2559"

			




	
	
	
		
 
       y="147.97874"

			




	
	
	
		
 
       id="text2997"

			




	
	
	
		
 
       sodipodi:linespacing="125%"

			




	
	
	
		
 
       transform="scale(0.20786986,4.8107023)"><tspan

			




	
	
	
		
 
         sodipodi:role="line"

			




	
	
	
		
 
         id="tspan2999"

			




	
	
	
		
 
         x="1460.2559"

			




	
	
	
		
 
         y="147.97874">|  |  |  |  |  |  |  |  |  |  |  |  </tspan></text>

			




	
	
	
		
 
    <text

			




	
	
	
		
 
       xml:space="preserve"

			




	
	
	
		
 
       style="font-size:29.29896545px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans"

			




	
	
	
		
 
       x="116.62979"

			




	
	
	
		
 
       y="293.71292"

			




	
	
	
		
 
       id="text2985"

			




	
	
	
		
 
       sodipodi:linespacing="125%"><tspan

			




	
	
	
		
 
         sodipodi:role="line"

			




	
	
	
		
 
         id="tspan2987"

			




	
	
	
		
 
         x="116.62979"

			




	
	
	
		
 
         y="293.71292">effect chase1</tspan></text>

			




	
	
	
		
 
    <text

			




	
	
	
		
 
       xml:space="preserve"

			




	
	
	
		
 
       style="font-size:20px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans"

			




	
	
	
		
 
       x="304.28571"

			




	
	
	
		
 
       y="339.50504"

			




	
	
	
		
 
       id="text2989"

			




	
	
	
		
 
       sodipodi:linespacing="125%"><tspan

			




	
	
	
		
 
         sodipodi:role="line"

			




	
	
	
		
 
         id="tspan2991"

			




	
	
	
		
 
         x="304.28571"

			




	
	
	
		
 
         y="339.50504">0  10  20  30  40  50</tspan></text>

			




	
	
	
		
 
    <text

			




	
	
	
		
 
       xml:space="preserve"

			




	
	
	
		
 
       style="font-size:20px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans;opacity:0.68725869"

			




	
	
	
		
 
       x="242.6721"

			




	
	
	
		
 
       y="371.69269"

			




	
	
	
		
 
       id="text2993"

			




	
	
	
		
 
       sodipodi:linespacing="125%"><tspan

			




	
	
	
		
 
         sodipodi:role="line"

			




	
	
	
		
 
         id="tspan2995"

			




	
	
	
		
 
         x="242.6721"

			




	
	
	
		
 
         y="371.69269">beat</tspan></text>

			




	
	
	
		
 
    <text

			




	
	
	
		
 
       xml:space="preserve"

			




	
	
	
		
 
       style="font-size:20px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans"

			




	
	
	
		
 
       x="124.10067"

			




	
	
	
		
 
       y="444.66876"

			




	
	
	
		
 
       id="text3001"

			




	
	
	
		
 
       sodipodi:linespacing="125%"><tspan

			




	
	
	
		
 
         sodipodi:role="line"

			




	
	
	
		
 
         id="tspan3003"

			




	
	
	
		
 
         x="124.10067"

			




	
	
	
		
 
         y="444.66876">hue = nsin(t * .5)</tspan></text>

			




	
	
	
		
 
    <path

			




	
	
	
		
 
       style="fill:#000000;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;color:#000000;fill-opacity:1;fill-rule:nonzero;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

			




	
	
	
		
 
       d="m 303.63794,484.95062 c -10.15825,-18.53903 28.18258,-32.21348 21.92744,-8.95423 9.81138,15.38603 19.51486,-22.69463 25.12928,0.84982 9.4897,22.23503 12.22318,-22.24126 27.30901,-6.91374 3.0461,7.09265 3.22174,24.42971 15.07276,12.40672 3.42402,-8.16123 3.81986,-28.84715 16.19008,-15.71016 -1.06924,16.00399 16.0183,29.16704 22.02438,8.59332 4.59999,-13.3056 14.29956,-6.97185 13.78929,4.0917 17.22871,21.9799 16.74817,-32.87409 31.91744,-8.52412 -2.06569,23.39567 32.27633,20.80448 32.03859,-0.37583 20.38958,-16.71462 9.12184,13.47994 16.74058,20.34532 z"

			




	
	
	
		
 
       id="path3005"

			




	
	
	
		
 
       inkscape:connector-curvature="0"

			




	
	
	
		
 
       sodipodi:nodetypes="cccccccccccc" />

			




	
	
	
		
 
    <text

			




	
	
	
		
 
       xml:space="preserve"

			




	
	
	
		
 
       style="font-size:20px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans"

			




	
	
	
		
 
       x="120.52785"

			




	
	
	
		
 
       y="751.17059"

			




	
	
	
		
 
       id="text3042"

			




	
	
	
		
 
       sodipodi:linespacing="125%"><tspan

			




	
	
	
		
 
         sodipodi:role="line"

			




	
	
	
		
 
         id="tspan3044"

			




	
	
	
		
 
         x="120.52785"

			




	
	
	
		
 
         y="751.17059">color = fromhsv(hue, 1 , val)</tspan></text>

			




	
	
	
		
 
    <rect

			




	
	
	
		
 
       style="opacity:0.66409266;color:#000000;fill:url(#linearGradient3822);fill-opacity:1;stroke:#7f7f7f;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

			




	
	
	
		
 
       id="rect3046"

			




	
	
	
		
 
       width="321.22852"

			




	
	
	
		
 
       height="30.304577"

			




	
	
	
		
 
       x="271.86951"

			




	
	
	
		
 
       y="766.61005" />

			




	
	
	
		
 
    <path

			




	
	
	
		
 
       style="fill:#000000;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"

			




	
	
	
		
 
       d="m 288.56422,695.09229 c 27.62079,-0.18655 70.8815,1.07516 73.74113,-3.03046 0.33672,0 0.70899,-0.15059 1.01015,0 0.42592,0.21296 0.58424,0.79719 1.01016,1.01015 0.40051,0.20026 2.82394,-0.20651 3.03045,0 0.2381,0.2381 -0.33671,1.01015 0,1.01015 0.4762,0 0.67344,-1.34687 1.01016,-1.01015 0.33671,0.33672 -1.34687,1.34687 -1.01016,1.01015 1.01016,-1.01015 2.29547,-1.80546 3.03046,-3.03045 0.34648,-0.57747 -0.21296,-1.38143 0,-2.02031 0.15059,-0.45175 0.7972,-0.58423 1.01016,-1.01015 0.15058,-0.30117 -0.0817,-0.68349 0,-1.01015 0.25825,-1.03301 0.80132,-1.98634 1.01015,-3.03046 0.13207,-0.66036 -0.21296,-1.38143 0,-2.02031 0.15058,-0.45175 0.79719,-0.58423 1.01015,-1.01015 0.32057,-0.64114 -0.32749,-4.72327 0,-5.05076 0.2381,-0.2381 0.77206,0.23809 1.01015,0 0.2381,-0.2381 0.33672,-1.01015 0,-1.01015 -0.47619,0 -1.48634,1.01015 -1.01015,1.01015 0.75292,0 1.26738,-1.01015 2.02031,-1.01015 0.33671,0 -0.33672,1.01015 0,1.01015 1.06479,0 1.99745,-0.7519 3.03045,-1.01015 1.18908,-0.29727 1.19246,0.1823 2.02031,1.01015 0.33672,0.33672 0.74601,0.61394 1.01015,1.01015 1.31132,1.96698 1.01015,1.85382 1.01015,4.04061 0,0.33672 -0.33671,-1.01015 0,-1.01015 0.33672,0 -0.15058,1.31132 0,1.01015 3.05054,-6.10108 -0.14561,-0.42769 1.01016,-5.05076 0.18261,-0.73044 0.82754,-1.28986 1.01015,-2.02031 0.16333,-0.65332 -0.30117,-1.41796 0,-2.0203 0.15058,-0.30117 0.67343,0 1.01015,0 0.24499,0 2.99797,-0.0325 3.03046,0 1.23035,1.23035 0.47318,2.25689 2.0203,3.03046 0.30117,0.15058 0.67344,0 1.01016,0 2.61758,0 -0.36274,-0.64742 2.0203,-3.03046 0.2381,-0.2381 0.67344,0 1.01015,0 0.33672,0 1.01016,-0.33672 1.01016,0 0,0.33672 -1.34687,0 -1.01016,0 0.67344,0 1.54412,-0.47619 2.02031,0 0.47619,0.47619 -0.30117,1.41797 0,2.0203 0.15058,0.30117 0.82337,-0.28016 1.01015,0 0.64855,0.97282 1.7958,6.39755 2.02031,7.07107 0.23809,0.71429 0.73052,1.32123 1.01015,2.02031 0.33672,1.01015 0.67343,2.0203 1.01015,3.03045 0.33672,0.33672 0.7972,0.58424 1.01015,1.01016 0.15059,0.30117 -0.18677,1.29032 0,1.01015 0.8353,-1.25294 1.24556,-2.74936 2.02031,-4.04061 0.245,-0.40833 0.79719,-0.58424 1.01015,-1.01015 0.15059,-0.30117 -0.23809,-0.77206 0,-1.01016 0.2381,-0.23809 0.8851,0.31264 1.01015,0 0.63766,-1.59412 0.53848,-3.39989 1.01016,-5.05076 0.20684,-0.72395 0.77205,-1.30602 1.01015,-2.0203 0.10648,-0.31944 -0.33672,-1.01016 0,-1.01016 0.33672,0 -0.15059,0.70899 0,1.01016 2.39386,4.78772 2.0203,1.15246 2.0203,5.05076 0,0.67343 0.67344,2.0203 0,2.0203 -0.67343,0 0,-1.34687 0,-2.0203 0,-0.33672 -0.23809,-0.77206 0,-1.01015 0.2381,-0.2381 0.85957,0.30117 1.01016,0 0,-5.7242 -0.67344,-0.33672 1.01015,-2.02031 0.47619,-0.47619 -0.67344,-2.0203 0,-2.0203 0.47619,0 0.67343,0.67343 1.01015,1.01015 0.67344,0.67343 1.49202,1.22788 2.02031,2.0203 0.18677,0.28017 -0.18678,0.72999 0,1.01016 0.52828,0.79243 1.53031,1.20364 2.0203,2.0203 0.54783,0.91306 0.41951,2.1445 1.01015,3.03046 0.79243,1.18864 2.02031,2.0203 3.03046,3.03046 1.01015,1.01015 2.23803,1.84181 3.03046,3.03045 0.18678,0.28017 -0.066,1.34034 0,1.01016 0.40168,-2.0084 0.7205,-4.03333 1.01015,-6.06092 0.0476,-0.33333 -0.15058,-0.70898 0,-1.01015 0.21296,-0.42592 0.85957,-0.5584 1.01016,-1.01015 0.42591,-1.27776 -0.60234,-2.83594 0,-4.04061 0.15058,-0.30117 0.70898,0.15058 1.01015,0 0.42592,-0.21296 0.79719,-0.58424 1.01015,-1.01016 0.15058,-0.30117 0,-0.67343 0,-1.01015 0,-1.01015 -0.31944,-2.07214 0,-3.03046 0.10648,-0.31943 0.67344,0 1.01015,0 0.33672,0 0.70899,-0.15058 1.01016,0 0.73018,0.3651 1.33496,2.03816 2.0203,1.01016 0.59064,-0.88597 0.41951,-2.1445 1.01015,-3.03046 0.18678,-0.28017 0.67344,0 1.01016,0 0,-0.33672 -0.15059,-0.70898 0,-1.01015 0.21295,-0.42592 0.79719,-1.43607 1.01015,-1.01016 5.65248,11.30498 -1.6046,0.23696 1.01015,8.08122 0.10648,0.31944 0.77206,-0.23809 1.01015,0 0.003,0.003 -0.005,2.99595 0,3.03046 0.24281,1.69967 0.53848,3.3999 1.01016,5.05076 0.20684,0.72396 0.86249,1.28201 1.01015,2.02031 0.19811,0.99054 -0.31944,2.07214 0,3.03046 0.10648,0.31944 0.77206,-0.2381 1.01015,0 0.2381,0.23809 0,1.34687 0,1.01015 0,-1.68359 -0.23809,-3.3841 0,-5.05076 0.10648,-0.74536 0.74578,-1.31532 1.01015,-2.02031 0.74775,-1.99399 1.27256,-4.06692 2.02031,-6.06091 -0.35741,-1.72417 1.47736,-1.94458 2.0203,-3.03046 0.25946,-0.51891 -0.15337,-4.89739 0,-5.05076 0.2381,-0.2381 0.77206,0.23809 1.01016,0 0.23809,-0.2381 -0.2381,-0.77206 0,-1.01016 0.23809,-0.23809 0.77205,-0.23809 1.01015,0 0.47619,0.47619 -0.21296,1.38143 0,2.02031 0.23809,0.71428 0.47775,1.48791 1.01015,2.0203 0.47619,0.47619 2.02031,-0.67343 2.02031,0 0,0.33672 -1.16074,0.30117 -1.01016,0 0.75293,-1.50584 2.16426,-2.59694 3.03046,-4.04061 0,-2.69374 -0.33672,0.33672 1.01015,-1.01015 0.2381,-0.23809 -0.33671,-1.01015 0,-1.01015 0.0948,0 -0.10967,5.51256 0,6.06091 0.41765,2.08824 1.67021,3.96031 2.02031,6.06092 0.31774,1.90645 -0.38167,4.15256 0,6.06091 0.20882,1.04412 0.80133,1.98635 1.01015,3.03046 0.13207,0.66036 -0.30117,1.41797 0,2.02031 0.15059,0.30117 0.67344,0 1.01015,0 0.33672,0 0.85957,0.30117 1.01016,0 0.95238,-1.90476 1.06792,-4.15616 2.0203,-6.06092 0.42592,-0.85183 1.59439,-1.16847 2.02031,-2.0203 0.30117,-0.60234 -0.30117,-1.41797 0,-2.02031 0.15058,-0.30117 0.85956,0.30117 1.01015,0 0.30117,-0.60234 -0.30117,-1.41796 0,-2.0203 4.5985,-4.59851 0.53396,0.41842 2.0203,-4.04061 0.41842,-2.26541 2.31618,-3.91806 3.03046,-6.06092 0.10648,-0.31944 0,-1.34687 0,-1.01015 0,5.11899 -0.30117,-1.20468 1.01015,4.04061 0.008,0.0338 -0.005,3.02509 0,3.03046 0.2381,0.23809 0.92849,-0.32667 1.01016,0 0.32666,1.30665 -0.32667,2.73395 0,4.04061 0.0817,0.32666 0.77205,0.23809 1.01015,0 0.47619,-0.47619 -0.37355,-1.45998 0,-2.02031 0.52829,-0.79243 1.34687,-1.34687 2.0203,-2.0203 0.0471,-0.0471 1.38331,-1.8595 2.02031,-1.01016 0.90351,1.20468 1.46105,2.64247 2.0203,4.04061 0.25011,0.62527 -0.47619,1.54412 0,2.02031 0.2381,0.23809 0.90368,-0.31944 1.01016,0 0.31944,0.95831 -0.19811,2.03992 0,3.03046 0.14766,0.7383 0.77205,1.30602 1.01015,2.0203 0.30305,0.90914 -0.30305,2.12132 0,3.03046 0.15058,0.45175 0.67343,0.67343 1.01015,1.01015 0.33672,0.67344 0.77206,1.30602 1.01016,2.02031 0.10647,0.31944 0,0.67343 0,1.01015 0.33671,0.33672 0.79719,0.58423 1.01015,1.01015 0.15058,0.30117 -0.2381,0.77206 0,1.01015 0.23809,0.2381 1.01015,-0.33671 1.01015,0 0,0.33672 -1.3394,0.0706 -1.01015,0 33.47997,0.15361 84.20859,2.02031 125.25891,2.02031 z"

			




	
	
	
		
 
       id="path3830"

			




	
	
	
		
 
       inkscape:connector-curvature="0"

			




	
	
	
		
 
       sodipodi:nodetypes="cccsssccscccsssssssssssssscsscsccsssssscccccccssccssscsssscssscssssscccccccssscssccsssccsscssscsscscssscccssssscscssccccssccsccsssscsssscccccsccc" />

			




	
	
	
		
 
    <path

			




	
	
	
		
 
       style="fill:#000000;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;color:#000000;fill-opacity:1;fill-rule:nonzero;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

			




	
	
	
		
 
       d="m 275.81818,583.11846 c 3.24948,-0.63421 -0.43501,-12.38728 -0.28442,-11.93552 0.30304,0.90914 -0.30305,2.12132 0,3.03046 0.23809,0.71428 0.77206,1.30602 1.01015,2.0203 0.14396,0.43188 -0.33455,4.02763 0,2.02031 0.39143,-2.34856 0.43269,-4.76121 1.01015,-7.07107 0.1155,-0.46197 0.7972,-0.58424 1.01016,-1.01015 0.47619,-0.95239 0.61469,-2.04183 1.01015,-3.03046 1.83105,-4.57762 0.0933,-0.1399 2.0203,-3.03046 0.41765,-0.62647 0.77206,-1.30602 1.01016,-2.0203 0.21296,-0.63888 -0.47619,-1.54412 0,-2.02031 0.23809,-0.23809 0.77205,-0.23809 1.01015,0 0.5324,0.5324 0.67343,1.34687 1.01015,2.02031 0.33672,0.67343 0.77206,1.30601 1.01015,2.0203 0.10648,0.31944 0,0.67344 0,1.01015 0,1.01016 -0.56033,2.18996 0,3.03046 0.37356,0.56033 1.41797,-0.30117 2.02031,0 0.39966,0.19983 -0.50247,2.02552 0,3.03046 0.15058,0.30117 0.85957,0.30117 1.01015,0 1.47824,-2.95648 2.36752,-9.75432 4.04061,-8.08122 0.2381,0.23809 -0.0925,0.68639 0,1.01015 0.58505,2.04765 1.34687,4.04061 2.02031,6.06092 0.33671,1.01015 0.5777,4.00347 1.01015,3.03045 1.69155,-3.80599 2.09393,-8.06352 3.03046,-12.12183 0.21646,-0.938 -0.43293,-2.16461 0,-3.03045 0.15058,-0.30117 0.67343,0 1.01015,0 0.33672,0 0.85957,-0.30117 1.01015,0 0.30117,0.60233 -0.13207,1.35994 0,2.0203 0.20883,1.04412 0.7519,1.99746 1.01016,3.03046 0.0817,0.32666 0,0.67343 0,1.01015 0,1 0,4.05076 0,5.05076 0,1.01016 0,2.02031 0,3.03046 0,0.33672 -0.066,1.34033 0,1.01015 0.40167,-2.0084 0.51339,-4.07389 1.01015,-6.06091 -2.10819,-4.34178 1.71913,-1.1168 2.0203,-2.02031 0.31944,-0.95831 -0.245,-2.05046 0,-3.03045 0.1155,-0.46198 0.85957,-1.46191 1.01016,-1.01016 0.12114,0.36343 0,5.83738 0,7.07107 0,0.33672 -0.10648,0.69071 0,1.01015 0.23809,0.71429 0.73052,1.32124 1.01015,2.02031 0.39545,0.98863 0.6147,2.04182 1.01015,3.03046 0.27963,0.69907 0.77206,1.30602 1.01015,2.0203 0.10648,0.31944 -0.23809,0.77206 0,1.01015 0.2381,0.2381 0.8851,0.31264 1.01016,0 0.63765,-1.59413 0.79719,-3.34709 1.01015,-5.05076 0.12529,-1.00235 -0.19811,-2.03992 0,-3.03046 0.44456,-2.22283 1.73192,-2.30922 3.03046,-4.04061 0.45175,-0.60234 0.5925,-1.39383 1.01015,-2.0203 0.26414,-0.39622 0.74601,-0.61394 1.01015,-1.01015 0.41765,-0.62647 0.33672,-2.35703 1.01015,-2.02031 0.95238,0.47619 0.67344,2.02031 1.01016,3.03046 0.33671,1.01015 0.80133,1.98634 1.01015,3.03046 0.26414,1.32071 -0.42592,2.76285 0,4.04061 0.15058,0.45175 0.74601,0.61393 1.01015,1.01015 0.41765,0.62647 0.47776,1.48791 1.01015,2.0203 0.2381,0.2381 0.8734,0.3077 1.01016,0 1.29736,-2.91906 2.0203,-6.06091 3.03045,-9.09137 0.33672,-1.01015 0.41951,-2.14449 1.01016,-3.03046 0.18677,-0.28016 0.95479,-0.33213 1.01015,0 0.33213,1.99282 0,4.04061 0,6.06092 0,2.0203 0,4.04061 0,6.06091 0,1.01016 -0.45176,2.12695 0,3.03046 0.21296,0.42592 0.7053,-0.64433 1.01015,-1.01015 1.38027,-1.65632 2.84465,-3.25683 4.04061,-5.05076 0.18678,-0.28017 0,-0.67344 0,-1.01016 0.67344,-0.33671 1.48791,-0.47775 2.02031,-1.01015 0.23809,-0.23809 -0.10648,-0.69071 0,-1.01015 0.23809,-0.71429 0.47775,-1.48791 1.01015,-2.02031 0.47619,-0.47619 1.41797,0.30117 2.0203,0 0.42592,-0.21296 0.58424,-0.79719 1.01016,-1.01015 0.30117,-0.15058 0.67343,0 1.01015,0 2.72682,0 -0.0285,0.95323 1.01015,3.03046 0.15059,0.30117 0.77206,-0.2381 1.01015,0 0.2381,0.23809 -0.23809,0.77206 0,1.01015 0.50508,0.50508 2.52539,-0.50508 3.03046,0 2.34485,4.68969 -0.66718,0.17149 3.03046,2.02031 0.60234,0.30117 -0.30117,1.41796 0,2.0203 0.21296,0.42592 0.89466,0.54818 1.01015,1.01015 0.49,1.95999 -0.63887,4.14429 0,6.06092 0.10648,0.31944 0.67344,0 1.01015,0 0.33672,0 0.82338,0.28016 1.01016,0 2.47485,-7.42457 -0.33047,-0.51446 2.0203,-4.04061 1.54765,-2.32148 0.0842,-2.02031 2.02031,-2.02031 0.67343,0 1.41796,-0.30117 2.0203,0 0.0713,0.0357 -0.53647,5.08845 2.02031,2.02031 1.44603,-1.73524 2.23735,-3.94596 3.03046,-6.06092 0.14793,-0.39449 -0.5808,-3.03045 1.01015,-3.03045 0.33672,0 0,0.67343 0,1.01015 0,0.67343 0,1.34687 0,2.0203 0,2.69374 0,5.38748 0,8.08122 0,1.01016 0,2.02031 0,3.03046 0,0.33672 0,1.34687 0,1.01015 0,-2.69374 0,-5.38748 0,-8.08122 0,-0.67343 -0.16333,-1.36697 0,-2.0203 0.11251,-0.45003 1.18016,-2.75041 2.0203,-3.03046 4.78019,-1.59339 1.75574,5.70015 2.02031,8.08122 0.0526,0.47328 0.79719,1.43607 1.01015,1.01015 0.45175,-0.9035 -0.245,-2.05046 0,-3.03045 0.18674,-0.74697 2.62092,-2.21138 3.03046,-3.03046 0.15058,-0.30117 -0.18678,-0.72999 0,-1.01015 0.52828,-0.79243 1.49202,-1.22788 2.0203,-2.02031 0.18678,-0.28017 -0.23809,-0.77206 0,-1.01015 0.2381,-0.2381 0.82338,-0.28017 1.01016,0 1.32959,1.99438 1.01015,3.8577 1.01015,6.06091 0,0.33672 0,0.67344 0,1.01016 0,0.33671 -0.33672,1.01015 0,1.01015 0.47619,0 0.84742,-0.56263 1.01015,-1.01015 1.20138,-3.30379 2.06469,-6.72136 3.03046,-10.10153 0.3814,-1.3349 0.78191,-2.67118 1.01015,-4.04061 0.11071,-0.66427 -0.30117,-1.41797 0,-2.0203 0.15059,-0.30117 0.9548,-0.33214 1.01015,0 0.33214,1.99281 0,4.04061 0,6.06091 0,3.03046 0,6.06092 0,9.09137 0,1.01016 0,4.04061 0,3.03046 0,-2.35702 -0.26029,-4.72846 0,-7.07107 0.0831,-0.74831 0.67344,-1.34687 1.01016,-2.0203 0.33671,-0.67344 0.67343,-1.34687 1.01015,-2.02031 0.33672,-0.67343 0.5925,-1.39383 1.01015,-2.0203 0.26414,-0.39622 0.76516,-1.41848 1.01015,-1.01015 1.09567,1.8261 1.50381,3.99491 2.02031,6.06091 0.14061,0.56243 -0.1744,4.87637 0,5.05076 0.23809,0.2381 0.67343,0 1.01015,0 1.01015,0 2.02031,0 3.03046,0 0.33672,0 0.85957,-0.30117 1.01015,0 0.62088,1.24176 0.78192,2.67118 1.01015,4.04061 0.11072,0.66428 -0.30117,1.41797 0,2.02031 0.33672,0.67343 1.75003,-0.30742 2.02031,-1.01015 1.52895,-3.97529 2.45879,-8.16729 4.04061,-12.12183 0.45089,-1.12722 1.29187,-2.05922 2.0203,-3.03046 0.28572,-0.38095 0.5584,-0.85957 1.01016,-1.01015 0.84922,-0.28308 2.70891,-0.27603 3.03045,1.01015 0.32667,1.30665 0,2.69374 0,4.04061 0,0.33672 -0.23809,0.77206 0,1.01015 0.2381,0.2381 0.74078,0.20203 1.01016,0 7.7658,-5.82435 -0.38962,-0.15395 4.04061,-6.06091 0.45175,-0.60234 1.48791,-0.47776 2.0203,-1.01016 0.2381,-0.23809 -0.33671,-1.01015 0,-1.01015 0.47619,0 0.89466,0.54818 1.01016,1.01015 0.24499,0.97999 0,2.02031 0,3.03046 0,1.01015 0,2.02031 0,3.03046 0,5.579 0.40833,4.12668 -1.01016,9.09137 -0.29252,1.02383 -0.41951,2.1445 -1.01015,3.03046 -0.18678,0.28016 -1.07619,0.33018 -1.01015,0 0.68943,-3.44717 1.82908,-6.79774 3.03046,-10.10153 0.16273,-0.44752 0.67343,-0.67343 1.01015,-1.01015 0.67343,-0.67343 1.49202,-1.22788 2.0203,-2.0203 0.18678,-0.28017 -0.23809,-0.77206 0,-1.01016 0.48257,-0.48257 2.59963,-1.44098 3.03046,-1.01015 0.005,0.005 -0.008,2.99157 0,3.03046 0.20882,1.04411 0.67344,2.0203 1.01015,3.03046 0.33672,1.01015 0.41951,2.14449 1.01016,3.03045 0.18677,0.28017 0.675,0.0324 1.01015,0 35.81552,-3.46601 19.6545,-3.03045 43.43656,-3.03045 3.70389,0 7.41599,-0.24638 11.11168,0 1.38524,0.0924 3.05891,0.0285 4.04061,1.01015 0.71428,0.71428 0,2.0203 0,3.03046 0,0.33671 0.23809,-0.77206 0,-1.01016 -0.2381,-0.23809 -0.67344,0 -1.01016,0 -1.68358,0 -3.36717,0 -5.05076,0 -4.13908,0 -8.47238,0.41267 -12.12183,-2.0203 -1.70405,-1.13603 -1.59738,-2.41965 -4.04061,-3.03046 -0.40674,-0.10168 -5.88317,-0.0889 -6.06092,0 -0.42591,0.21296 -0.55839,0.85957 -1.01015,1.01015 -0.63887,0.21296 -1.38143,-0.21296 -2.0203,0 -0.45176,0.15059 -0.55229,0.87934 -1.01016,1.01016 -3.62108,1.03459 -5.93228,0.44076 -9.09137,2.0203 -1.08588,0.54294 -1.86312,1.68678 -3.03046,2.02031 -1.29504,0.37001 -2.69374,0 -4.04061,0 -1.01015,0 -2.0203,0 -3.03045,0 -0.67344,0 -1.64675,0.56033 -2.02031,0 -0.56033,-0.8405 0,-2.02031 0,-3.03046 0,-0.33672 -0.15058,-1.31132 0,-1.01015 0.81092,1.62184 1.20938,3.42891 2.02031,5.05076 0.54294,1.08588 1.52723,1.92104 2.0203,3.03046 0.86491,1.94604 1.06793,4.15615 2.02031,6.06091 0.42591,0.85184 1.6666,1.13604 2.0203,2.02031 0.37516,0.9379 -0.71428,2.31617 0,3.03045 0.5324,0.5324 0.88637,-1.27762 1.01015,-2.0203 0.55632,-3.33793 0.76906,-6.72616 1.01016,-10.10153 0.096,-1.34344 -0.32667,-2.73395 0,-4.04061 0.16333,-0.65332 1.71913,0.60234 2.0203,0 0.30117,-0.60234 -0.30117,-1.41796 0,-2.0203 0.15059,-0.30117 0.77206,-0.2381 1.01015,0 0.0325,0.0325 0,2.78547 0,3.03046 0,1.8256 -0.22676,5.48374 0,7.07106 0.19634,1.37437 0.38928,2.79886 1.01016,4.04061 0.15058,0.30117 0.87751,0.3095 1.01015,0 7.08548,-4.88423 3.56924,-12.9637 6.06091,-19.19289 0.12506,-0.31264 0.96839,-0.33412 1.01016,0 0.39509,3.16073 0,8.41408 0,12.12183 0,1.01015 0,4.04061 0,3.03045 0,-1.68358 -0.46252,-3.43195 0,-5.05076 0.9681,-3.38837 2.14866,-1.38965 4.04061,-2.0203 0.45175,-0.15059 0.58423,-0.7972 1.01015,-1.01016 0.30117,-0.15058 0.77206,0.2381 1.01015,0 3.10057,-3.10056 -0.59019,-0.83991 1.01015,-4.04061 0.15059,-0.30117 0.85957,-0.30117 1.01016,0 1.01015,2.02031 -0.50508,1.51523 0,3.03046 0.23809,0.71429 0.82754,1.28986 1.01015,2.02031 0.16333,0.65332 0,1.34687 0,2.0203 0,2.02031 -0.22311,4.05297 0,6.06092 0.11759,1.05828 0.67343,2.0203 1.01015,3.03045 0.33672,1.01016 0.41951,2.1445 1.01015,3.03046 0.18678,0.28017 0.88065,0.31082 1.01016,0 1.34687,-4.04061 2.69374,-8.08122 4.04061,-12.12183 0,-1.34687 -0.32667,-2.73395 0,-4.04061 0.0817,-0.32666 0.90367,-0.31944 1.01015,0 1.41226,4.23677 1.01015,8.76545 1.01015,13.13198 0,0.33672 -0.0886,-0.6853 0,-1.01015 0.92497,-3.39156 1.91878,-6.76649 3.03046,-10.10152 0.2381,-0.71429 0.47776,-1.48791 1.01015,-2.02031 0.5324,-0.5324 1.48791,-0.47775 2.02031,-1.01015 0.23809,-0.2381 -0.2381,-0.77206 0,-1.01015 0.23809,-0.2381 0.91765,-0.32377 1.01015,0 0.6541,2.28934 0.54321,4.73635 1.01015,7.07106 0.20883,1.04412 0.85957,1.97637 1.01016,3.03046 0.19047,1.33333 -0.47292,5.30173 0,4.04061 1.46241,-3.89978 2.09392,-8.06352 3.03045,-12.12183 0.0757,-0.32809 -0.23809,-0.77206 0,-1.01015 0.2381,-0.2381 0.70899,0.15058 1.01016,0 0.26299,-0.1315 1.23064,-1.79982 2.0203,-1.01015 0.2381,0.23809 -0.15058,1.31132 0,1.01015 0.81092,-1.62185 1.08738,-3.49589 2.02031,-5.05076 0.17324,-0.28874 0.70898,0.15058 1.01015,0 0.42592,-0.21296 0.58423,-0.7972 1.01015,-1.01016 0.30117,-0.15058 0.67344,0 1.01015,0 0.91999,0 2.65888,-0.47619 3.03046,1.01016 0.32667,1.30665 0,2.69374 0,4.04061 0,0.67343 0,1.34687 0,2.0203 0,0.33672 -0.18678,1.29032 0,1.01015 1.16457,-1.74685 2.05325,-5.66928 3.03046,-4.04061 0.93292,1.55488 0.2317,5.34887 2.0203,5.05077 2.39507,-0.39918 2.48618,-4.1956 4.04061,-6.06092 0.21557,-0.25867 0.77206,0.2381 1.01016,0 0.23809,-0.23809 -0.33672,-1.01015 0,-1.01015 2.92381,0 2.0203,2.21858 2.0203,4.04061 0,1.68359 0,3.36717 0,5.05076 0,0.33672 -0.23809,0.77206 0,1.01015 0.2381,0.2381 0.79981,0.26294 1.01015,0 1.22652,-1.53314 1.94137,-3.41713 3.03046,-5.05076 0.26414,-0.39621 0.58424,-0.79719 1.01015,-1.01015 0.30117,-0.15059 0.67344,0 1.01016,0 0.33671,0 0.90367,-0.31944 1.01015,0 0.31944,0.95831 -0.64668,3.80648 0,3.03046 2.21934,-2.66321 3.26715,-6.11869 5.05076,-9.09138 0.245,-0.40833 0.58424,-0.79719 1.01015,-1.01015 0.16163,-0.0808 2.99006,-0.0808 3.03046,0 0.30117,0.60234 0,1.34687 0,2.02031 0,2.69374 0,5.38748 0,8.08122 0,1.01015 0,2.0203 0,3.03045 0,0.33672 -0.17324,1.29889 0,1.01016 1.01015,-2.02031 2.02031,-4.04061 3.03046,-6.06092 0.33672,0 0.77206,0.2381 1.01015,0 0.5324,-0.5324 0.47776,-1.48791 1.01016,-2.0203 0.23809,-0.2381 0.67343,0 1.01015,0 0.33672,0 0.94411,-0.33018 1.01015,0 0.33018,1.65089 -0.33018,3.39987 0,5.05076 0.066,0.33018 0.83691,0.28873 1.01015,0 1.93688,-3.22813 3.36718,-6.73435 5.05077,-10.10153 0.10858,-0.21716 1.86439,-4.66207 3.03045,-5.05076 0.63888,-0.21296 1.54412,-0.47619 2.02031,0 0.0891,0.0891 -0.0718,8.08122 0,8.08122 5.84675,0 3.90114,-0.94042 8.08122,-3.03046 0.30117,-0.15058 0.70898,0.15059 1.01015,0 0.42592,-0.21296 0.79719,-0.58423 1.01015,-1.01015 0.15059,-0.30117 0,-1.34687 0,-1.01015 0,2.0203 0,4.04061 0,6.06091 0,1.01016 0,2.02031 0,3.03046 0,0.33672 -0.33671,1.01015 0,1.01015 1.43607,0 3.30441,-2.29425 4.04061,-3.03045 0.33672,-0.33672 0.58424,-0.7972 1.01016,-1.01016 0.30117,-0.15058 0.67343,0 1.01015,0 1.59004,0 1.24648,-0.30117 2.0203,2.02031 0.10648,0.31944 -0.23809,0.77206 0,1.01015 0.2381,0.2381 0.67344,0 1.01016,0 0.67343,0 1.34707,0.0164 2.0203,0 13.1324,-0.3203 26.29987,0.017 39.39595,-1.01015 4.15221,-0.32567 8.00783,-2.38088 12.12183,-3.03046 2.32818,-0.36761 5.4044,-1.66667 7.07107,0 0.0825,0.0825 -6.31335,4.74768 -7.07107,5.05076 -0.62527,0.25011 -1.38143,-0.21296 -2.0203,0 -0.45176,0.15059 -0.54818,0.89466 -1.01016,1.01016 -5.44273,1.36068 -0.92721,-0.96869 -5.05076,-3.03046 -0.60234,-0.30117 -1.34687,0 -2.0203,0 -1.68359,0 -3.36718,0 -5.05077,0 -1.01015,0 -2.0203,0 -3.03045,0 -0.33672,0 -0.70899,0.15058 -1.01016,0 -0.42591,-0.21296 -0.53396,-1.01015 -1.01015,-1.01015 -0.82137,0 -4.14521,1.4166 -5.05076,2.0203 -0.39622,0.26414 -0.58424,0.79719 -1.01015,1.01015 -0.30117,0.15059 -0.67344,0 -1.01016,0 -0.67343,0 -1.34687,0 -2.0203,0 -2.02031,0 -4.0681,-0.33213 -6.06092,0 -0.74268,0.12378 -1.30602,0.77206 -2.0203,1.01016 -0.31944,0.10648 -0.70899,-0.15059 -1.01016,0 -0.4918,0.2459 -3.78433,3.83559 -4.04061,4.04061 -0.94801,0.75841 -2.08244,1.26189 -3.03045,2.0203 -2.34922,1.87937 -1.32934,2.1267 -4.04061,3.03046 -0.58516,0.19505 -3.16523,0 -4.04061,0 -0.33672,0 -0.96839,0.33412 -1.01016,0 0,-15.9248 0.65333,-2.14095 -1.01015,-12.12183 -0.11071,-0.66427 0,-1.34687 0,-2.02031 0,-0.33671 0,-1.34687 0,-1.01015 0,4.04061 0,8.08122 0,12.12183 0,0.33672 -0.274,1.20587 0,1.01015 13.82616,-9.87583 2.77662,-1.63954 9.09137,-11.11167 0.0627,-2.84433 2.27754,-0.25723 3.03046,-1.01016 0.2381,-0.23809 -0.15058,-1.31132 0,-1.01015 1.11663,2.23326 1.01015,2.31877 1.01015,4.04061 0,0.33672 -0.30116,1.16074 0,1.01015 3.44888,-1.72443 2.02031,-6.63077 2.02031,4.04061 0,1.34687 0,2.69374 0,4.04061 0,0.67344 -0.34648,2.59777 0,2.02031 2.32425,-3.87376 3.91915,-8.14427 6.06091,-12.12183 0.22577,-0.41927 0.58424,-0.7972 1.01016,-1.01015 0.30117,-0.15059 0.77205,0.23809 1.01015,0 0.2381,-0.2381 -0.2381,-0.77206 0,-1.01016 0.2381,-0.23809 0.8851,-0.31263 1.01015,0 0.63765,1.59413 0.46721,3.42194 1.01016,5.05077 1.24824,3.74474 1.01015,-1.23133 1.01015,2.0203 0,0.33672 0.33672,1.01015 0,1.01015 -0.33672,0 -0.12506,-0.69751 0,-1.01015 4.39741,-10.99353 0.27115,-0.9118 3.03046,-5.05076 0.41764,-0.62647 0.5925,-1.39384 1.01015,-2.02031 0.26414,-0.39621 0.95756,-1.48343 1.01015,-1.01015 0.37184,3.34658 0,6.73435 0,10.10153 0,1.01015 0,2.0203 0,3.03045 0,0.67344 -0.21296,2.65919 0,2.02031 0.87805,-2.63416 1.47576,-5.3585 2.02031,-8.08122 0.13207,-0.66036 -0.4207,-1.49444 0,-2.02031 1.05172,-1.31466 2.85013,-1.83998 4.04061,-3.03045 0.53239,-0.5324 0.38368,-1.60266 1.01015,-2.02031 0.56033,-0.37355 1.54411,0.47619 2.0203,0 0.47619,-0.47619 -0.67343,-2.0203 0,-2.0203 0.67344,0 0,1.34687 0,2.0203 0,0.33672 0,0.67344 0,1.01015 0,2.02031 7.12012,4.68789 7.12012,6.7082 0,1.01015 -1.61401,5.95585 -7.12012,2.38318 -0.28246,-0.18328 0.77206,0.23809 1.01016,0 0.23809,-0.2381 3.93676,14.21221 8.45732,11.8284 -149.5224,-1.85781 -202.50083,-1.95458 -328.39126,-6.96395 z"

			




	
	
	
		
 
       id="path3832"

			




	
	
	
		
 
       inkscape:connector-curvature="0"

			




	
	
	
		
 
       sodipodi:nodetypes="ccsssccscsscsssssccccssscscscsssccsscsssssscssscssssscscsscssssscsssscsscscssssscsscssssssssssscssccsssssssssscsssccsccscssccsssccssssscscsssccssscsccccsccscssscccsssssssscsssssscssccssccccssscccccsssssscccsscsscccssscsccscccssssssscssssscsssssscssssccccsccssssscccssssscsssscssscscsssscssssssscsssscssssccccscsssccccsssscssssssssssssssssccc" />

			




	
	
	
		
 
    <path

			




	
	
	
		
 
       style="fill:none;stroke:#000000;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"

			




	
	
	
		
 
       d="m 141.42857,455.21933 0,20 147.14286,0"

			




	
	
	
		
 
       id="path3834"

			




	
	
	
		
 
       inkscape:connector-curvature="0" />

			




	
	
	
		
 
    <path

			




	
	
	
		
 
       style="fill:#000000;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;color:#000000;fill-opacity:1;fill-rule:nonzero;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

			




	
	
	
		
 
       d="m 298.8627,539.46346 c 21.86648,-2.28684 55.80474,8.99265 62.74605,-19.45095 16.4407,-25.76333 56.7345,-7.60521 83.12298,-10.68066 20.79129,-8.77214 36.69572,4.05284 37.99517,25.62782 48.88594,0.28825 83.20353,1.59033 130.13024,1.68823 z"

			




	
	
	
		
 
       id="path3836"

			




	
	
	
		
 
       inkscape:connector-curvature="0"

			




	
	
	
		
 
       sodipodi:nodetypes="cccccc" />

			




	
	
	
		
 
    <path

			




	
	
	
		
 
       style="fill:none;stroke:#000000;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"

			




	
	
	
		
 
       d="m 287.14286,516.6479 -68.57143,0 0,100"

			




	
	
	
		
 
       id="path3842"

			




	
	
	
		
 
       inkscape:connector-curvature="0" />

			




	
	
	
		
 
    <path

			




	
	
	
		
 
       style="fill:none;stroke:#000000;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"

			




	
	
	
		
 
       d="m 270,570.93361 -14.28571,0 0,28.57143 85.71428,0 0,18.57143"

			




	
	
	
		
 
       id="path3844"

			




	
	
	
		
 
       inkscape:connector-curvature="0" />

			




	
	
	
		
 
    <path

			




	
	
	
		
 
       style="fill:none;stroke:#000000;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"

			




	
	
	
		
 
       d="m 135.71429,649.50504 0,35.71429 144.28571,0"

			




	
	
	
		
 
       id="path3846"

			




	
	
	
		
 
       inkscape:connector-curvature="0" />

			




	
	
	
		
 
    <path

			




	
	
	
		
 
       style="fill:none;stroke:#000000;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"

			




	
	
	
		
 
       d="m 144.28571,756.6479 0,24.28571 110,0"

			




	
	
	
		
 
       id="path3848"

			




	
	
	
		
 
       inkscape:connector-curvature="0" />

			




	
	
	
		
 
    <path

			




	
	
	
		
 
       style="fill:none;stroke:#fe0c0c;stroke-width:1.6;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"

			




	
	
	
		
 
       d="m 431.42857,350.93361 0,487.14286"

			




	
	
	
		
 
       id="path4670"

			




	
	
	
		
 
       inkscape:connector-curvature="0" />

			




	
	
	
		
 
    <rect

			




	
	
	
		
 
       style="opacity:0.65637066;color:#000000;fill:#ffffff;stroke:none;stroke-width:2.09999989999999981;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;fill-opacity:1"

			




	
	
	
		
 
       id="rect4668"

			




	
	
	
		
 
       width="344.28571"

			




	
	
	
		
 
       height="34.285713"

			




	
	
	
		
 
       x="105.71429"

			




	
	
	
		
 
       y="620.93359" />

			




	
	
	
		
 
    <text

			




	
	
	
		
 
       xml:space="preserve"

			




	
	
	
		
 
       style="font-size:20px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans"

			




	
	
	
		
 
       x="119.60709"

			




	
	
	
		
 
       y="642.13361"

			




	
	
	
		
 
       id="text3038"

			




	
	
	
		
 
       sodipodi:linespacing="125%"><tspan

			




	
	
	
		
 
         sodipodi:role="line"

			




	
	
	
		
 
         id="tspan3040"

			




	
	
	
		
 
         x="119.60709"

			




	
	
	
		
 
         y="642.13361">val = backchase * (music &gt;  .3 )</tspan></text>

			




	
	
	
		
 
    <text

			




	
	
	
		
 
       xml:space="preserve"

			




	
	
	
		
 
       style="font-size:20px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans"

			




	
	
	
		
 
       x="122.85714"

			




	
	
	
		
 
       y="845.21936"

			




	
	
	
		
 
       id="text4699"

			




	
	
	
		
 
       sodipodi:linespacing="125%"><tspan

			




	
	
	
		
 
         sodipodi:role="line"

			




	
	
	
		
 
         id="tspan4701"

			




	
	
	
		
 
         x="122.85714"

			




	
	
	
		
 
         y="845.21936">out = color</tspan></text>

			




	
	
	
		
 
    <path

			




	
	
	
		
 
       inkscape:connector-curvature="0"

			




	
	
	
		
 
       id="path4703"

			




	
	
	
		
 
       d="m 138.57143,852.36218 c 0.37491,51.70389 1.39124,62.85715 1.42857,102.85715"

			




	
	
	
		
 
       style="opacity:0.31660234;fill:none;stroke:#000000;stroke-width:2.0999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-end:url(#Arrow2Mend)"

			




	
	
	
		
 
       sodipodi:nodetypes="cc" />

			




	
	
	
		
 
    <rect

			




	
	
	
		
 
       style="opacity:0.68725866999999996;color:#000000;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:2.2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:2.2,4.4;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

			




	
	
	
		
 
       id="rect4734"

			




	
	
	
		
 
       width="37.531288"

			




	
	
	
		
 
       height="29.292711"

			




	
	
	
		
 
       x="399.11319"

			




	
	
	
		
 
       y="621.21008" />

			




	
	
	
		
 
    <rect

			




	
	
	
		
 
       y="727.75854"

			




	
	
	
		
 
       x="334.77875"

			




	
	
	
		
 
       height="29.79941"

			




	
	
	
		
 
       width="21.855896"

			




	
	
	
		
 
       id="rect4736"

			




	
	
	
		
 
       style="opacity:0.68725867;color:#000000;fill:none;stroke:#000000;stroke-width:1.69330156;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:1.69330156, 3.38660311;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

			




	
	
	
		
 
    <rect

			




	
	
	
		
 
       style="opacity:0.68725867;color:#000000;fill:none;stroke:#000000;stroke-width:1.71662986;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:1.71662985, 3.43325968;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

			




	
	
	
		
 
       id="rect4738"

			




	
	
	
		
 
       width="22.479851"

			




	
	
	
		
 
       height="29.776081"

			




	
	
	
		
 
       x="267.4729"

			




	
	
	
		
 
       y="422.89963" />

			




	
	
	
		
 
  </g>

			




	
	
	
		
 
</svg>

			




        

    


    
    

    

        

                

                    www/mockup/effectpreview.html
                

                

                  
                      
                        

                      ➞

                      
                        
                  

                  
                      
                  
                      
                  
                      
                  
                      
                  
                  
                

                

                    Show inline comments
                    
                

        

        

            



	
	
		
 
new file 100644

			




	
	
	
		
 
<!doctype html>

			




	
	
	
		
 
<html>

			




	
	
	
		
 
  <head>

			




	
	
	
		
 
    <title></title>

			




	
	
	
		
 
    <meta charset="utf-8" />

			




	
	
	
		
 
    <style>

			




	
	
	
		
 
     body {

			




	
	
	
		
 
       font-family: sans;

			




	
	
	
		
 
       font-size: 8px;

			




	
	
	
		
 
         background: black;

			




	
	
	
		
 
         color: gray;

			




	
	
	
		
 
     }

			




	
	
	
		
 
     a {

			




	
	
	
		
 
       color: #aff;

			




	
	
	
		
 
     }

			




	
	
	
		
 
     canvas {

			




	
	
	
		
 
       outline: 1px solid gray;

			




	
	
	
		
 
     }

			




	
	
	
		
 
     svg {

			




	
	
	
		
 
pointer-events: none;

			




	
	
	
		
 
     }

			




	
	
	
		
 
.markers text {

			




	
	
	
		
 
 fill: white;

			




	
	
	
		
 
    }

			




	
	
	
		
 
.timelineArea {

			




	
	
	
		
 
    display: inline-block;

			




	
	
	
		
 
    }

			




	
	
	
		
 
     .codeLine {

			




	
	
	
		
 
       margin-bottom: 3em;

			




	
	
	
		
 
       position: relative;

			




	
	
	
		
 
       border: 1px solid #dfdfdf;

			




	
	
	
		
 
         padding: 5px;

			




	
	
	
		
 
     }

			




	
	
	
		
 
     .codeLine canvas {

			




	
	
	
		
 
       display: block;

			




	
	
	
		
 
     }

			




	
	
	
		
 
     code {

			




	
	
	
		
 
       display: block;

			




	
	
	
		
 
       font-size: 14px;

			




	
	
	
		
 
       margin: 20px 0;

			




	
	
	
		
 
       padding: 5px;

			




	
	
	
		
 
         color: white;

			




	
	
	
		
 
       background: rgba(34, 34 34, 0.52);

			




	
	
	
		
 
     }

			




	
	
	
		
 
     .alignStartTime {

			




	
	
	
		
 
       margin-left: 150px;

			




	
	
	
		
 
     }

			




	
	
	
		
 
     .codeLine .inputs, .codeLine .output {

			




	
	
	
		
 
     }

			




	
	
	
		
 
     .codeLine .inputs {

			




	
	
	
		
 
     }

			




	
	
	
		
 
     .codeLine .output {

			




	
	
	
		
 
     }

			




	
	
	
		
 
     .codeLine svg.arrows {

			




	
	
	
		
 
       position: absolute;

			




	
	
	
		
 
     }

			




	
	
	
		
 
     .timelineArea {

			




	
	
	
		
 
       position: relative;

			




	
	
	
		
 
     }

			




	
	
	
		
 
     svg.markers {

			




	
	
	
		
 
       position: absolute;

			




	
	
	
		
 
       top: 0;

			




	
	
	
		
 
       left: 150px;

			




	
	
	
		
 
       right: 0;

			




	
	
	
		
 
       bottom: 0;

			




	
	
	
		
 
     }

			




	
	
	
		
 
.adjustable {

			




	
	
	
		
 
    border: 2px dashed rgb(72, 72, 252);

			




	
	
	
		
 
padding: 0 4px;

			




	
	
	
		
 
    background: rgba(109, 109, 253, 0.38);

			




	
	
	
		
 
    }

			




	
	
	
		
 
.markers path {

			




	
	
	
		
 
stroke:#ffffff;

			




	
	
	
		
 
       stroke-width:1;

			




	
	
	
		
 
       opacity:0.31660232

			




	
	
	
		
 
    }

			




	
	
	
		
 
    </style>

			




	
	
	
		
 
  </head>

			




	
	
	
		
 
  <body>

			




	
	
	
		
 
    <h1>

			




	
	
	
		
 
      Effect chase1

			




	
	
	
		
 
    </h1>

			




	
	
	
		
 
    <div>

			




	
	
	
		
 
      (&lt;--&gt; timeline adjusters)

			




	
	
	
		
 
    </div>

			




	
	
	
		
 
    <div class="timelineArea">

			




	
	
	
		
 
      <!-- times + beats + now, extends under the rest -->

			




	
	
	
		
 
      <svg class="markers">

			




	
	
	
		
 
        <text x="0" y="10"> 0sec </text><path d="m0,20 0,2000"></path>

			




	
	
	
		
 
        <text x="80" y="10"> 10 </text><path d="m30,20 0,2000"></path>

			




	
	
	
		
 
        <text x="160" y="10"> 20 </text><path d="m60,20 0,2000"></path>

			




	
	
	
		
 
        <text x="240" y="10"> 30 </text><path d="m90,20 0,2000"></path>

			




	
	
	
		
 
        <text x="320" y="10"> 40 </text><path d="m120,20 0,2000"></path>

			




	
	
	
		
 
      </svg>

			




	
	
	
		
 

			




	
	
	
		
 
      <div class="codeLine">

			




	
	
	
		
 
        <style>

			




	
	
	
		
 
          .arrows path {

			




	
	
	
		
 
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

			




	
	
	
		
 
           }

			




	
	
	
		
 
        </style>

			




	
	
	
		
 
        <svg class="arrows">

			




	
	
	
		
 
          <defs id="defs4">

			




	
	
	
		
 
            <marker orient="auto" refY="0.0" refX="0.0" id="Arrow2Mend" style="overflow:visible;">

			




	
	
	
		
 
              <path style="fill-rule:evenodd;stroke-width:0.62500000;stroke-linejoin:round;"

			




	
	
	
		
 
                    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 "

			




	
	
	
		
 
                    transform="scale(0.6) rotate(180) translate(0,0)" />

			




	
	
	
		
 
            </marker>

			




	
	
	
		
 
          </defs>

			




	
	
	
		
 
          <path class="arrow" d="m0,0"></path>

			




	
	
	
		
 
        </svg>

			




	
	
	
		
 
        <div class="inputs">

			




	
	
	
		
 
        </div>

			




	
	
	
		
 
        <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>

			




	
	
	
		
 
        <div class="alignStartTime">

			




	
	
	
		
 
          <canvas class="output" id="out1"></canvas>

			




	
	
	
		
 
        </div>

			




	
	
	
		
 
      </div>

			




	
	
	
		
 

			




	
	
	
		
 
      <div class="codeLine">

			




	
	
	
		
 
        <svg class="arrows"> <defs></defs>

			




	
	
	
		
 
          <path class="arrow" d="m0,0"></path>

			




	
	
	
		
 
          <path class="arrow" d="m0,0"></path>

			




	
	
	
		
 
          <path class="arrow" d="m0,0"></path>

			




	
	
	
		
 
        </svg>

			




	
	
	
		
 
        <div class="inputs">

			




	
	
	
		
 
          <div class="alignStartTime">

			




	
	
	
		
 
            <canvas class="input" id="in1"></canvas>

			




	
	
	
		
 
          </div>

			




	
	
	
		
 
          <div class="alignStartTime">

			




	
	
	
		
 
            <canvas class="input" id="in2"></canvas>

			




	
	
	
		
 
          </div>

			




	
	
	
		
 
        </div>

			




	
	
	
		
 
        <code><span id="out2var">val</span> = <span id="in21var">backchase</span> * (<span id="in22var">music</span> &gt; <span class="adjustable" data-param="valThresh">.3</span>)</code>

			




	
	
	
		
 
        <div class="alignStartTime">

			




	
	
	
		
 
          <canvas class="output" id="out2"></canvas>

			




	
	
	
		
 
        </div>

			




	
	
	
		
 
      </div>

			




	
	
	
		
 

			




	
	
	
		
 
      <div class="codeLine">

			




	
	
	
		
 
        <svg class="arrows"> <defs></defs><path class="arrow" d="m0,0"></path> </svg>

			




	
	
	
		
 
        <div class="inputs">

			




	
	
	
		
 
        </div>

			




	
	
	
		
 
        <code><span id="out3var">out</span> = hsv2rgb(hue, <span class="adjustable" data-param="sat">1.0</span>, val)</code>

			




	
	
	
		
 
        <div class="alignStartTime">

			




	
	
	
		
 
          <canvas class="output" id="out3"></canvas>

			




	
	
	
		
 
        </div>

			




	
	
	
		
 
      </div>

			




	
	
	
		
 
</div>

			




	
	
	
		
 
    <style>

			




	
	
	
		
 
     .dragValue {

			




	
	
	
		
 
       position: absolute;

			




	
	
	
		
 
       left: 98px;

			




	
	
	
		
 
       top: 168px;

			




	
	
	
		
 
       width: 300px;

			




	
	
	
		
 
       background: rgba(80,80,80,0.64);

			




	
	
	
		
 
       color: white;

			




	
	
	
		
 
       border: 1px solid black;

			




	
	
	
		
 
       box-shadow: 5px 5px 73px black;

			




	
	
	
		
 
       font-size: 26px;

			




	
	
	
		
 
         -webkit-user-select: none;

			




	
	
	
		
 

			




	
	
	
		
 
     }

			




	
	
	
		
 
     .dragValue table {

			




	
	
	
		
 
       width: 100%;

			




	
	
	
		
 
       border-collapse: collapse;

			




	
	
	
		
 
       }

			




	
	
	
		
 
     .dragValue table tr.current td {

			




	
	
	
		
 
         background: rgba(128, 128, 128, 0.71);

			




	
	
	
		
 
       }

			




	
	
	
		
 
     .dragValue table td {

			




	
	
	
		
 
         border-left: 1px solid black;

			




	
	
	
		
 
       height: 80px;

			




	
	
	
		
 
       }

			




	
	
	
		
 
     .dragValue table .low { }

			




	
	
	
		
 
     .dragValue table .high { text-align: right; }

			




	
	
	
		
 

			




	
	
	
		
 
     div.newValue {

			




	
	
	
		
 
       position: absolute;

			




	
	
	
		
 
display: inline-block;

			




	
	
	
		
 
border: 1px solid black;

			




	
	
	
		
 
border-radius: 50%;

			




	
	
	
		
 
padding: 3px;

			




	
	
	
		
 
         font-size: 20px;

			




	
	
	
		
 
         color: black;

			




	
	
	
		
 
background: rgb(241, 241, 144);

			




	
	
	
		
 
box-shadow: 3px 4px 12px rgba(0, 0, 0, 0.23);

			




	
	
	
		
 
                }

			




	
	
	
		
 
    </style>

			




	
	
	
		
 
    <div class="dragValue">

			




	
	
	
		
 
      Editing .5 to <span class="newValue">.5</span>

			




	
	
	
		
 
      <table>

			




	
	
	
		
 
        <tr data-bounds="0 1"><td class="low">0 ||||||||||</td><td class="high">|||||||||| 1</td></tr>

			




	
	
	
		
 
        <tr data-bounds=".4 .6"><td class="low">.4 | | | | |</td><td class="high">| | | | | .6</td></tr>

			




	
	
	
		
 
        <tr data-bounds=".49 .51"><td class="low">.49</td><td class="high">.51</td></tr>

			




	
	
	
		
 
      </table>

			




	
	
	
		
 
      <div class="newValue">.5</div>

			




	
	
	
		
 
    </div>

			




	
	
	
		
 

			




	
	
	
		
 
    <script src="/lib/jquery-2.0.3.min.js"></script>

			




	
	
	
		
 
    <script src="/lib/rickshaw/71877d994a/vendor/d3.min.js"></script>

			




	
	
	
		
 
    <script type="text/javascript">

			




	
	
	
		
 
    window.onload = function () {

			




	
	
	
		
 
        

			




	
	
	
		
 
        var _music = [];

			




	
	
	
		
 
        for (var x=0; x<1000; x++) {

			




	
	
	
		
 
            _music.push(Math.random());

			




	
	
	
		
 
        }

			




	
	
	
		
 
        function musicCurve(x) {

			




	
	
	
		
 
            return _music[Math.round(x)];

			




	
	
	
		
 
        }

			




	
	
	
		
 
        var params = {

			




	
	
	
		
 
            sinTimeCoeff: .1,

			




	
	
	
		
 
            sinTimeOffset: 0,

			




	
	
	
		
 
            valThresh: .5,

			




	
	
	
		
 
            sat: 1

			




	
	
	
		
 
        };

			




	
	
	
		
 
        

			




	
	
	
		
 
        function hue(x) { return Math.sin(x * params.sinTimeCoeff + 6.28 * params.sinTimeOffset) * .5 + .5; }

			




	
	
	
		
 
        function valFunc(x) { return (x > 100 && x < 300) * (musicCurve(x) > params.valThresh); }

			




	
	
	
		
 
        

			




	
	
	
		
 
        function drawCurve(canvas, func) {

			




	
	
	
		
 
            var ctx = canvas.getContext('2d');

			




	
	
	
		
 
            ctx.clearRect(0, 0, canvas.width, canvas.height);

			




	
	
	
		
 
            

			




	
	
	
		
 
            ctx.strokeStyle = '#ffffff';

			




	
	
	
		
 
            ctx.fillStyle = '#666';

			




	
	
	
		
 
            ctx.strokeWidth = 3;

			




	
	
	
		
 
            ctx.beginPath();

			




	
	
	
		
 
            ctx.moveTo(0, canvas.height);

			




	
	
	
		
 
            for (var x = 0; x < canvas.width; x += 2) {

			




	
	
	
		
 
                var y = func(x);

			




	
	
	
		
 
                ctx.lineTo(x, canvas.height * (1 - y));

			




	
	
	
		
 
            }

			




	
	
	
		
 
            ctx.lineTo(canvas.width, canvas.height);

			




	
	
	
		
 
            ctx.fill();

			




	
	
	
		
 
            ctx.stroke();

			




	
	
	
		
 
        }

			




	
	
	
		
 
        function drawRgb(canvas) {

			




	
	
	
		
 
            var ctx = canvas.getContext('2d');

			




	
	
	
		
 
            ctx.clearRect(0, 0, canvas.width, canvas.height);

			




	
	
	
		
 
            var step = 1;

			




	
	
	
		
 
            for (var x = 0; x < canvas.width; x+= step) {

			




	
	
	
		
 
                var vv = (valFunc(x) * .5 * 100);

			




	
	
	
		
 
                ctx.fillStyle = ('hsl('+

			




	
	
	
		
 
                                 (360 * hue(x))+','+

			




	
	
	
		
 
                                 (params.sat * 100)+'%,'+

			




	
	
	
		
 
                                 vv+'%'+

			




	
	
	
		
 
                                 ')');

			




	
	
	
		
 
                if (vv > 0) {

			




	
	
	
		
 
                    ctx.fillRect(x, 0, step, canvas.height);

			




	
	
	
		
 
                } // else leave it transparent

			




	
	
	
		
 
            }

			




	
	
	
		
 
        }

			




	
	
	
		
 

			




	
	
	
		
 
        function drawTimeCoords(svg) {

			




	
	
	
		
 
            // use KO on svg templates

			




	
	
	
		
 
        }

			




	
	
	
		
 
        function routePath(svg, src, dest) {

			




	
	
	
		
 
            var parent = $(svg).position();

			




	
	
	
		
 
            var srcPos = src.position();           

			




	
	
	
		
 
            var destPos = dest.position();

			




	
	
	
		
 
            var startDown = srcPos.left < 150;

			




	
	
	
		
 
            if (startDown) { 

			




	
	
	
		
 
                srcPos.left += src.width() / 2;

			




	
	
	
		
 
                srcPos.top += src.height();

			




	
	
	
		
 
                destPos.top += dest.height() / 2;

			




	
	
	
		
 
            } else {

			




	
	
	
		
 
                srcPos.top += src.height() / 2;

			




	
	
	
		
 
                destPos.left += dest.width() / 2;

			




	
	
	
		
 
            }

			




	
	
	
		
 
            

			




	
	
	
		
 
            var d = "";

			




	
	
	
		
 
            var px = parent.left, py = parent.top;

			




	
	
	
		
 
            d += "m" + (srcPos.left - px) + "," + (srcPos.top - py);

			




	
	
	
		
 
            if (startDown) {

			




	
	
	
		
 
                d += "L" + (srcPos.left - px) + "," + (destPos.top - py);

			




	
	
	
		
 
            } else {

			




	
	
	
		
 
                if (destPos.left < srcPos.left) {

			




	
	
	
		
 
                    d += "L" + (destPos.left - px) + "," + (srcPos.top - py);

			




	
	
	
		
 
                } else {

			




	
	
	
		
 
                    d += "L" + (srcPos.left - px - 10) + "," + (srcPos.top - py);

			




	
	
	
		
 
                    var ymid = srcPos.top + src.height() / 2 + 5;

			




	
	
	
		
 
                    d += "L" + (srcPos.left - px - 10) + "," + (ymid - py);

			




	
	
	
		
 
                    d += "L" + (destPos.left - px) + "," + (ymid - py);

			




	
	
	
		
 
                }

			




	
	
	
		
 
            }

			




	
	
	
		
 
            d += "L" + (destPos.left - px) + "," + (destPos.top - py);

			




	
	
	
		
 
            return d;

			




	
	
	
		
 
        }

			




	
	
	
		
 
        function connectElems(svg, src, dest) {

			




	
	
	
		
 
            // this is wrong; it's not a proper path object

			




	
	
	
		
 
            var path = document.createElementNS('svg', 'path');

			




	
	
	
		
 
            svg.appendChild(path);

			




	
	
	
		
 

			




	
	
	
		
 
            // workaround- use spare path nodes

			




	
	
	
		
 
            for (var i = 1; i < svg.children.length; i++) {

			




	
	
	
		
 
                path = svg.children[i];

			




	
	
	
		
 
                if (path.getAttribute('d') == 'm0,0') {

			




	
	
	
		
 
                    break;

			




	
	
	
		
 
                }

			




	
	
	
		
 
            }

			




	
	
	
		
 
            

			




	
	
	
		
 
            path.classList.add('arrow');

			




	
	
	
		
 
            path.setAttribute('d', routePath(svg, src, dest));

			




	
	
	
		
 
        }

			




	
	
	
		
 
        

			




	
	
	
		
 
        function connectVars() {

			




	
	
	
		
 
            connectElems($("#out1").closest(".codeLine").find(".arrows")[0], $("#out1var"), $("#out1"));

			




	
	
	
		
 
            connectElems($("#out2").closest(".codeLine").find(".arrows")[0], $("#out2var"), $("#out2"));

			




	
	
	
		
 
            connectElems($("#out3").closest(".codeLine").find(".arrows")[0], $("#out3var"), $("#out3"));

			




	
	
	
		
 

			




	
	
	
		
 
            connectElems($("#out2").closest(".codeLine").find(".arrows")[0], $("#in1"), $("#in21var"));

			




	
	
	
		
 
            connectElems($("#out2").closest(".codeLine").find(".arrows")[0], $("#in2"), $("#in22var"));

			




	
	
	
		
 
        }

			




	
	
	
		
 
        function redrawAll() {

			




	
	
	
		
 
            $("canvas").each(function (i, canvas) {

			




	
	
	
		
 
                canvas.width = 500;

			




	
	
	
		
 
                canvas.height = 30;

			




	
	
	
		
 
            });

			




	
	
	
		
 
            drawCurve($("#out1")[0], hue)

			




	
	
	
		
 
            drawCurve($("#in1")[0], function (x) { return x > 100 && x < 300; })

			




	
	
	
		
 
            drawCurve($("#in2")[0], function (x) { return musicCurve(x); })

			




	
	
	
		
 
            drawCurve($("#out2")[0], valFunc);

			




	
	
	
		
 
            drawRgb($("#out3")[0]);

			




	
	
	
		
 

			




	
	
	
		
 
            $("svg.arrows").each(function (i, svg) {

			




	
	
	
		
 

			




	
	
	
		
 
            });

			




	
	
	
		
 
            drawTimeCoords($(".markers"));

			




	
	
	
		
 
            connectVars();

			




	
	
	
		
 
        }

			




	
	
	
		
 
        redrawAll();

			




	
	
	
		
 
        

			




	
	
	
		
 

			




	
	
	
		
 
        var adjusting = null;

			




	
	
	
		
 
        var adjustParam = "";

			




	
	
	
		
 
        $(".dragValue").hide();

			




	
	
	
		
 
        $(".adjustable").mousedown(function (ev) {

			




	
	
	
		
 
            $(".dragValue").show();

			




	
	
	
		
 
            adjusting = $(ev.target);

			




	
	
	
		
 
            adjustParam = adjusting.attr('data-param');

			




	
	
	
		
 
            $(".dragValue").css({left: adjusting.offset().left - 150,

			




	
	
	
		
 
                                 top: adjusting.offset().top - 120});

			




	
	
	
		
 
        });

			




	
	
	
		
 
        $("body, .dragValue").mouseup(function (ev) {

			




	
	
	
		
 
            $(".dragValue").hide();

			




	
	
	
		
 
        });

			




	
	
	
		
 
        $(".dragValue").mousemove(function (ev) {

			




	
	
	
		
 
            var dv = $(".dragValue").position();

			




	
	
	
		
 
            $(".dragValue div.newValue").css({left: ev.pageX - dv.left - 15, top: ev.pageY - dv.top - 35});

			




	
	
	
		
 
            var row = $(ev.target).closest('tr');

			




	
	
	
		
 
            $(".dragValue tr").removeClass('current');

			




	
	
	
		
 
            if (!row.length) {

			




	
	
	
		
 
                // revert

			




	
	
	
		
 
                return;

			




	
	
	
		
 
            } 

			




	
	
	
		
 
            row.addClass('current');

			




	
	
	
		
 

			




	
	
	
		
 
            var rx = row.offset().left;

			




	
	
	
		
 
            var frac = (ev.pageX - rx) / row.width();

			




	
	
	
		
 

			




	
	
	
		
 
            var bounds = row.attr('data-bounds').split(" ");

			




	
	
	
		
 
            var newValue = parseFloat(bounds[0]) * (1 - frac) + parseFloat(bounds[1]) * frac;

			




	
	
	
		
 
            newValue = Math.round(newValue * 1000) / 1000;

			




	
	
	
		
 
            valueChanged(newValue);

			




	
	
	
		
 
            });

			




	
	
	
		
 
        function valueChanged(newValue) {

			




	
	
	
		
 
            if (adjusting) {

			




	
	
	
		
 
                adjusting.text(newValue);

			




	
	
	
		
 
            }

			




	
	
	
		
 
            $(".dragValue .newValue").text(newValue);

			




	
	
	
		
 
            params[adjustParam] = newValue;

			




	
	
	
		
 
            drawCurve($("#out1")[0], hue)

			




	
	
	
		
 
            drawCurve($("#out2")[0], valFunc);

			




	
	
	
		
 
            drawRgb($("#out3")[0]);

			




	
	
	
		
 
        };

			




	
	
	
		
 

			




	
	
	
		
 
    };

			




	
	
	
		
 
    </script>

			




	
	
	
		
 
  </body>

			




	
	
	
		
 
</html>

			




        

    


    
    

    

        

                

                    www/mockup/inputmapping.html
                

                

                  
                      
                        

                      ➞

                      
                        
                  

                  
                      
                  
                      
                  
                      
                  
                      
                  
                  
                

                

                    Show inline comments
                    
                

        

        

            



	
	
		
 
new file 100644

			




	
	
	
		
 
<!doctype html>

			




	
	
	
		
 
<html>

			




	
	
	
		
 
  <head>

			




	
	
	
		
 
    <title></title>

			




	
	
	
		
 
    <meta charset="utf-8" />

			




	
	
	
		
 
  </head>

			




	
	
	
		
 
  <body>

			




	
	
	
		
 

			




	
	
	
		
 

			




	
	
	
		
 
    <div class="button">chase back</div>

			




	
	
	
		
 
    <div class="button">chase overhead</div>

			




	
	
	
		
 
    chase colors

			




	
	
	
		
 
    stack front

			




	
	
	
		
 
    single color strobe

			




	
	
	
		
 
    rainbows

			




	
	
	
		
 
    blacklight

			




	
	
	
		
 
    music cyc

			




	
	
	
		
 
    music front

			




	
	
	
		
 
    

			




	
	
	
		
 
    

			




	
	
	
		
 
  </body>

			




	
	
	
		
 
</html>

			




        

    



    


    



    



      

      





    
    0 comments (0 inline, 0 general)
    





    


  

  







  


    




    








    
        Server instance: kallithea-749ff669b6-v9g5f-75
    
    
        This site is powered by
            Kallithea 0.7.0,
        which is
        © 2010–2021 by various authors & licensed under GPLv3.
            – Support