From 263fcbc677e8a38ff2058d5b91806cb25a4882cb Mon Sep 17 00:00:00 2001 From: George Michael Brower Date: Wed, 2 Feb 2011 14:43:49 -0500 Subject: [PATCH] We've got tweening in between numbers. Next up, actual mouse and keyboard interaction --- controllers/controller.function.js | 2 +- controllers/controller.number.js | 15 +- controllers/scrubber.js | 273 +++++++++++++---------------- controllers/timer.js | 110 ++++++++++++ index.html | 20 ++- 5 files changed, 254 insertions(+), 166 deletions(-) create mode 100644 controllers/timer.js diff --git a/controllers/controller.function.js b/controllers/controller.function.js index bf17507..73e2f58 100644 --- a/controllers/controller.function.js +++ b/controllers/controller.function.js @@ -2,7 +2,7 @@ GUI.FunctionController = function() { this.type = "function"; var that = this; GUI.Controller.apply(this, arguments); - this.domElement.addEventListener('click', function() { + this.domElement.addEventListener('mousedown', function() { that.object[that.propertyName].call(that.object); }, false); this.domElement.style.cursor = "pointer"; diff --git a/controllers/controller.number.js b/controllers/controller.number.js index 4c8dcaa..fec3d84 100644 --- a/controllers/controller.number.js +++ b/controllers/controller.number.js @@ -23,15 +23,12 @@ GUI.NumberController = function() { return this; } - this.min = function(s) { - min = s; - return this; - } - - this.max = function(s) { - max = s; - return this; - } + this.__defineGetter__("min", function() { + return min; + }); + this.__defineGetter__("max", function() { + return max; + }); if (!step) { if (min != undefined && max != undefined) { diff --git a/controllers/scrubber.js b/controllers/scrubber.js index 8ea11cc..bea770a 100644 --- a/controllers/scrubber.js +++ b/controllers/scrubber.js @@ -1,18 +1,16 @@ // Would really love to make it so that as FEW changes as possible are required to gui.js in order to make this work. Would love to make it so you simply include gui.scrubber.min.js in addition to gui.min.js. GUI.Controller.prototype.at = function(when, what, tween) { - - this.scrubber.addPoint(new GUI.ScrubberPoint(this.scrubber, when, what)); + new GUI.ScrubberPoint(this.scrubber, when, what); this.scrubber.render(); return this; - } GUI.Scrubber = function(controller, timer) { var _this = this; - var points = []; + this.points = []; this.timer = timer; this.controller = controller; this.controller.scrubber = this; @@ -39,28 +37,20 @@ GUI.Scrubber = function(controller, timer) { controller.domElement.insertBefore(this.domElement, controller.propertyNameElement.nextSibling); - - this.addPoint = function(point) { - points.push(point); - points.sort(function(a,b) { - return a.time - b.time; - }); - } - - this.render = function() { // TODO: if visible ... _this.g.clearRect(0, 0, width, height); - for (var i in points) { - points[i].render(); + for (var i in _this.points) { + _this.points[i].render(); } // Draw playhead _this.g.strokeStyle = "red"; + _this.g.lineWidth = 1; var t = Math.round(GUI.map(_this.timer.playhead, _this.timer.windowMin, _this.timer.windowMin+_this.timer.windowWidth, 0, width))+0.5; _this.g.beginPath(); _this.g.moveTo(t, 0); @@ -89,18 +79,48 @@ GUI.Scrubber = function(controller, timer) { // This assumes a SORTED point array // And a PROGRESSING/INCREASING/GROWING playhead - for (var i = 0; i < points.length; i++) { - var cur = points[i]; - - if (cur.time < prevTime) { - continue; + + if (_this.controller.type == "number") { + + var closestToLeft = null; + for (var i = 0; i < _this.points.length; i++) { + var cur = _this.points[i]; + if (cur.time >= curTime && i > 0) { + closestToLeft = _this.points[i-1]; + } } - if (cur.time >= prevTime && cur.time <= curTime) { - pointHandlers[_this.controller.type].call(_this, cur); - } - } + if (closestToLeft == null || closestToLeft.time > curTime) return; + + var n = closestToLeft.next; + if (n != null) { + + // Interpolate. + var t = GUI.map(curTime, closestToLeft.time, n.time, 0, 1); + t = closestToLeft.tween(t); + var val = GUI.map(t, 0, 1, closestToLeft.value, n.value); + _this.controller.setValue(val); + + } + + + } else { + + for (var i = 0; i < _this.points.length; i++) { + var cur = _this.points[i]; + + if (cur.time < prevTime) { + continue; + } + + if (cur.time >= prevTime && cur.time <= curTime) { + pointHandlers[_this.controller.type].call(_this, cur); + } + + } + + } }; @@ -118,10 +138,6 @@ GUI.Scrubber = function(controller, timer) { this.controller.setValue(point.value); }, - 'number': function(point) { - // - } - } this.timer.addPlayListener(onPlayChange); @@ -135,10 +151,42 @@ GUI.ScrubberPoint = function(scrubber, time, value) { var _this = this; + scrubber.points.push(this); + scrubber.points.sort(function(a,b) { + return a.time - b.time; + }); + var g = scrubber.g; var timer = scrubber.timer; + var type = scrubber.controller.type; + + this.tween = function(t) { + return t; + }; + + this.hold = false; + + this.__defineGetter__("next", function() { + if (scrubber.points.length <= 1) { + return null; + } + + var i = scrubber.points.indexOf(this); + if (i + 1 >= scrubber.points.length) { + return null; + } + + return scrubber.points[i+1]; + }); + + + this.value = value; - var rectSize = 4; + var barSize = 4; + var rectSize = 7; + + var c1 = "#ffd800"; + var c2 = "#ff9000"; this.__defineGetter__("time", function() { return time; @@ -146,133 +194,60 @@ GUI.ScrubberPoint = function(scrubber, time, value) { this.render = function() { + + var x = GUI.map(time, timer.windowMin, timer.windowMin+timer.windowWidth, 0, 1); if (x >= 0 && x <= 1) { x = Math.round(GUI.map(x, 0, 1, 0, scrubber.width)); } - g.save(); - g.translate(x-rectSize/2, 0); - g.fillStyle = "#ffd800"; - g.fillRect(0, 0, rectSize/2, scrubber.height-1); - g.fillStyle = "#ff9000"; - g.fillRect(rectSize/2, 0, rectSize/2, scrubber.height-1); - g.restore(); + switch (type) { + + case "number": + + g.save(); + var y = scrubber.height/2; + + var n = this.next; + + if (n != null) { + + var nx = GUI.constrain(GUI.map(n.time, timer.windowMin, timer.windowMin+timer.windowWidth, 0, 1)); + + if (nx >= 0 && nx <= 1) { + nx = Math.round(GUI.map(nx, 0, 1, 0, scrubber.width)); + } + + g.lineWidth = rectSize/2 + g.strokeStyle="#222"; + g.beginPath(); + g.moveTo(nx, y); + g.lineTo(x, y); + g.stroke(); + + + } + + g.translate(x, y); + g.rotate(Math.PI/4); + g.fillStyle = c1; + g.fillRect(-rectSize/2, -rectSize/2, rectSize, rectSize); + g.restore(); + + break; + + default: + g.save(); + g.translate(x-barSize/2, 0); + g.fillStyle = c1; + g.fillRect(0, 0, barSize/2, scrubber.height-1); + g.fillStyle = c2; + g.fillRect(barSize/2, 0, barSize/2, scrubber.height-1); + g.restore(); + + } } } - -GUI.Timer = function(gui) { - - var _this = this; - - this.gui = gui; - this.gui.timer = this; - - var playhead = 0; - var lastPlayhead = 0; - var playListeners = []; - var windowListeners = []; - - var windowMin = 0; - var windowWidth = 10000; - - var thisTime; - var lastTime; - - var playInterval = -1; - var playResolution = 1000/60; - - var playing = false; - - var millis = function() { - var d = new Date(); - return d.getTime(); - } - - this.__defineGetter__("windowMin", function() { - return windowMin; - }); - - this.__defineSetter__("windowMin", function(v) { - windowMin = v; - for (var i in windowListeners) { - windowListeners[i].call(windowListeners[i]); - } - }); - - this.__defineGetter__("windowWidth", function() { - return windowWidth; - }); - - - this.__defineSetter__("windowWidth", function(v) { - windowWidth = v; - for (var i in windowListeners) { - windowListeners[i].call(windowListeners[i]); - } - }); - - this.__defineGetter__("playhead", function() { - return playhead; - }); - - this.__defineSetter__("playhead", function(t) { - lastPlayhead = playhead; - playhead = t; - for (var i = 0; i < playListeners.length; i++) { - playListeners[i].call(this, playhead, lastPlayhead); - } - }); - - this.__defineGetter__("playing", function() { - return playing; - }); - - this.play = function() { - playing = true; - lastTime = millis(); - if (playInterval == -1) { - playInterval = setInterval(this.update, playResolution); - } - }; - - this.update = function() { - thisTime = millis(); - _this.playhead = _this.playhead + (thisTime - lastTime); - lastTime = thisTime; - }; - - this.pause = function() { - playing = false; - clearInterval(playInterval); - playInterval = -1; - }; - - this.playPause = function() { - if (playing) { - this.pause(); - } else { - this.play(); - } - } - - - this.stop = function() { - this.pause(); - this.playhead = 0; - }; - - this.addPlayListener = function(fnc) { - playListeners.push(fnc); - }; - - this.addWindowListener = function(fnc) { - windowListeners.push(fnc); - }; - - - -} \ No newline at end of file diff --git a/controllers/timer.js b/controllers/timer.js new file mode 100644 index 0000000..020329d --- /dev/null +++ b/controllers/timer.js @@ -0,0 +1,110 @@ +GUI.Timer = function(gui) { + + var _this = this; + + this.gui = gui; + this.gui.timer = this; + + var playhead = 0; + var lastPlayhead = 0; + var playListeners = []; + var windowListeners = []; + + var windowMin = 0; + var windowWidth = 10000; + + var thisTime; + var lastTime; + + var playInterval = -1; + var playResolution = 1000/60; + + var playing = false; + + var millis = function() { + var d = new Date(); + return d.getTime(); + } + + this.__defineGetter__("windowMin", function() { + return windowMin; + }); + + this.__defineSetter__("windowMin", function(v) { + windowMin = v; + for (var i in windowListeners) { + windowListeners[i].call(windowListeners[i]); + } + }); + + this.__defineGetter__("windowWidth", function() { + return windowWidth; + }); + + + this.__defineSetter__("windowWidth", function(v) { + windowWidth = v; + for (var i in windowListeners) { + windowListeners[i].call(windowListeners[i]); + } + }); + + this.__defineGetter__("playhead", function() { + return playhead; + }); + + this.__defineSetter__("playhead", function(t) { + lastPlayhead = playhead; + playhead = t; + for (var i = 0; i < playListeners.length; i++) { + playListeners[i].call(this, playhead, lastPlayhead); + } + }); + + this.__defineGetter__("playing", function() { + return playing; + }); + + this.play = function() { + playing = true; + lastTime = millis(); + if (playInterval == -1) { + playInterval = setInterval(this.update, playResolution); + } + }; + + this.update = function() { + thisTime = millis(); + _this.playhead = _this.playhead + (thisTime - lastTime); + lastTime = thisTime; + }; + + this.pause = function() { + playing = false; + clearInterval(playInterval); + playInterval = -1; + }; + + this.playPause = function() { + if (playing) { + this.pause(); + } else { + this.play(); + } + } + + + this.stop = function() { + this.pause(); + this.playhead = 0; + }; + + this.addPlayListener = function(fnc) { + playListeners.push(fnc); + }; + + this.addWindowListener = function(fnc) { + windowListeners.push(fnc); + }; + +} \ No newline at end of file diff --git a/index.html b/index.html index c115756..323b2b4 100644 --- a/index.html +++ b/index.html @@ -22,6 +22,8 @@ + @@ -47,25 +49,29 @@ .at(3000, "shit"); // Sliders with min and max - gui.add(fizzyText, "maxSize", 0.5, 7); - gui.add(fizzyText, "growthSpeed", 0.01, 1); - gui.add(fizzyText, "speed", 0.1, 2); + // gui.add(fizzyText, "maxSize", 0.5, 7); + //gui.add(fizzyText, "growthSpeed", 0.01, 1); + //gui.add(fizzyText, "speed", 0.1, 2); // Sliders with min, max and increment. - gui.add(fizzyText, "noiseStrength", 10, 100, 5); + gui.add(fizzyText, "noiseStrength", 10, 100, 5). + at(1000, 30). + at(4500, 20); // Boolean checkbox - gui.add(fizzyText, "displayOutline"); + gui.add(fizzyText, "displayOutline") + .at(50, true) + .at(250, false); // Fires a function called "explode" gui.add(fizzyText, "explode") .at(1000) .at(2000) - .at(3000); // Specify a custom name. + .at(3000); gui.divider(); - // gui.add(timer, "playhead").step(100).listen(); + // gui.add(timer, "playhead").step(100).listen(); gui.add(timer, "playPause"); /* gui.add(timer, "windowMin").listen();