diff options
| -rw-r--r-- | env.js | 9 | ||||
| -rw-r--r-- | index.html | 6 |
2 files changed, 14 insertions, 1 deletions
@@ -42,6 +42,7 @@ var environment = (function(){ environment.build = function(){ environment.scale() environment.duration() + environment.set_intervals() snap = new Snap (window.innerWidth, window.innerHeight - $("#controls").height()) dot_grid = new DotGrid () @@ -111,6 +112,7 @@ var environment = (function(){ $("#tet").on("input", environment.scale) $("#root").on("input", environment.scale) $("#interval").on("input", environment.scale) + $("#intervals").on("input", environment.set_intervals) $("#duration").on("input", environment.duration) $("#use_scale").on("change", environment.use_scale) if (is_mobile) { @@ -134,6 +136,13 @@ var environment = (function(){ environment.use_scale = function(){ use_scale = $("#use_scale").get(0).checked } + environment.set_intervals = function(){ + scale = $("#intervals").val().split(" ").map(parseInterval).filter(function(v){ + return !! v + }).map(function(v){ + return v * root + }) + } environment.check_drawing = function(){ drawing = ! drawing $("#draw").html( drawing ? "drawing" : "playing" ) @@ -36,7 +36,9 @@ input[type=text] { width: 30px } text-align: center; line-height: 80px; } - +#intervals { + width: 200px; +} </style> </head> <body class="loading"> @@ -64,6 +66,8 @@ input[type=text] { width: 30px } <input id="interval" type="text" value="2/1"> <label for="duration">duration</label> <input id="duration" type="number" min="0" max="5000" step="50" value="1250"> + <label for="intervals">intervals</label> + <input id="intervals" type="text" value="9/8 5/4 4/3 3/2 5/3 15/8 2/1"> <label for="use_scale">use scale</label> <input id="use_scale" type="checkbox" checked> <div id="mobile_controls"> |