library-mirrors/dat.gui
1
0
Fork 0
mirror of https://github.com/dataarts/dat.gui.git synced 2024-12-12 04:08:27 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Multiple normal panels and a time panels now live together in beautiful harmony

Browse Source
This commit is contained in:
George Michael Brower 2011-02-08 15:56:00 -05:00
parent f96b1f2e9a
commit e42a7848cd
6 changed files with 347 additions and 320 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
gui.css
View File

@ -1,18 +1,19 @@
#guidat { #guidat {
position: fixed; position: fixed;
bottom: 0;
width: 100%; width: 100%;
height: 100%;
left: 0; left: 0;
top: 0;
z-index: 1001; z-index: 1001;
} }
.guidat * { .guidat {
float: right;
padding: 0px; padding: 0px;
margin: 0px; margin: 0px 20px 0px 0px;
} }
.guidat-time { .guidat-scrubber {
width: 75%; width: 75%;
float: right; float: right;
margin-top: -3px; margin-top: -3px;
@ -40,11 +41,6 @@
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
background-color: rgba(0,0,0,0.1); background-color: rgba(0,0,0,0.1);
/*
-moz-transition: height .2s ease-out;
-webkit-transition: height .2s ease-out;
transition: height .2s ease-out;
*/
} }
.guidat-controllers hr { .guidat-controllers hr {
@ -116,9 +112,9 @@ a.guidat-toggle:hover {
.guidat-controller.string input { .guidat-controller.string input {
border: 0; border: 0;
width: 125px;
color: #1ed36f; color: #1ed36f;
margin-right: 2px; margin-right: 2px;
width: 10.5%;
} }
.guidat-controller.boolean { .guidat-controller.boolean {
@ -130,10 +126,10 @@ a.guidat-toggle:hover {
} }
.guidat-controller.number input[type=text] { .guidat-controller.number input[type=text] {
width: 3%;
margin-left: 5px; margin-left: 5px;
margin-right: 2px; margin-right: 2px;
color: #00aeff; color: #00aeff;
width: 35px;
} }
.guidat .guidat-controller.boolean input { .guidat .guidat-controller.boolean input {
@ -170,7 +166,7 @@ a.guidat-toggle:hover {
.guidat-slider-bg { .guidat-slider-bg {
background-color: #222; background-color: #222;
cursor: ew-resize; cursor: ew-resize;
width: 7%; width: 85px;
margin-top: 2px; margin-top: 2px;
float: right; float: right;
height: 21px; height: 21px;
@ -180,3 +176,24 @@ a.guidat-toggle:hover {
background-color: #00aeff; background-color: #00aeff;
height: 20px; height: 20px;
} }
/* Styles for timed GUI */
.guidat.time {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
}
.time .guidat-slider-bg {
width: 7%;
}
.time .guidat-controller.string input {
width: 10.6%;
}
.time .guidat-controller.number input[type=text] {
width: 3%;
}

55
gui.js
View File

@ -1,6 +1,8 @@
var GUI = function() { var GUI = function() {
var _this = this; var _this = this;
// For use with GUIScrubber
this.timer = null;
var MIN_WIDTH = 240; var MIN_WIDTH = 240;
var MAX_WIDTH = 500; var MAX_WIDTH = 500;
@ -33,15 +35,15 @@ var GUI = function() {
var resizeTo = 0; var resizeTo = 0;
var resizeTimeout; var resizeTimeout;
var width = 280;
this.domElement = document.createElement('div'); this.domElement = document.createElement('div');
this.domElement.setAttribute('class', 'guidat'); this.domElement.setAttribute('class', 'guidat');
this.domElement.style.width = "100%";//width+'px'; this.domElement.style.width = width+'px';
var controllerContainer = document.createElement('div'); var controllerContainer = document.createElement('div');
controllerContainer.setAttribute('class', 'guidat-controllers'); controllerContainer.setAttribute('class', 'guidat-controllers');
// For use with GUIScrubber
this.timer = null;
// Firefox hack to prevent horizontal scrolling // Firefox hack to prevent horizontal scrolling
controllerContainer.addEventListener('DOMMouseScroll', function(e) { controllerContainer.addEventListener('DOMMouseScroll', function(e) {
@ -82,7 +84,7 @@ var GUI = function() {
my = e.pageY; my = e.pageY;
mx = e.pageX; mx = e.pageX;
var dmy = pmy-my; var dmy = _this.timer ? pmy - my : my - pmy;
if (!open) { if (!open) {
if (dmy < 0) { if (dmy < 0) {
@ -94,7 +96,7 @@ var GUI = function() {
} }
} }
// TODO: Flip this if you want to resize to the left. // TODO: Flip this if you want to resize to the right.
var dmx = pmx - mx; var dmx = pmx - mx;
if (dmy > 0 && if (dmy > 0 &&
@ -107,11 +109,16 @@ var GUI = function() {
dragDisplacementY += dmy; dragDisplacementY += dmy;
dragDisplacementX += dmx; dragDisplacementX += dmx;
openHeight += dmy; openHeight += dmy;
//width += dmx;
curControllerContainerHeight += dmy; curControllerContainerHeight += dmy;
controllerContainer.style.height = openHeight+'px'; controllerContainer.style.height = openHeight+'px';
if (!_this.timer) {
width += dmx;
width = GUI.constrain(width, MIN_WIDTH, MAX_WIDTH); width = GUI.constrain(width, MIN_WIDTH, MAX_WIDTH);
//_this.domElement.style.width = width+'px'; _this.domElement.style.width = width+'px';
}
checkForOverflow(); checkForOverflow();
}; };
@ -134,28 +141,30 @@ var GUI = function() {
}, false); }, false);
var correctWidth = function() {
// Clears lingering slider column
_this.domElement.style.width = (width+1)+'px';
setTimeout(function() {
_this.domElement.style.width = width+'px';
}, 1);
};
document.addEventListener('mouseup', function(e) { document.addEventListener('mouseup', function(e) {
if (togglePressed && !toggleDragged) { if (togglePressed && !toggleDragged) {
_this.toggle(); _this.toggle();
// Clears lingering slider column if (!_this.timer) {
// _this.domElement.style.width = (width+1)+'px'; correctWidth();
setTimeout(function() { }
// _this.domElement.style.width = width+'px';
}, 1);
} }
if (togglePressed && toggleDragged) { if (togglePressed && toggleDragged) {
if (dragDisplacementX == 0) { if (dragDisplacementX == 0 && !_this.timer) {
// Clears lingering slider column correctWidth();
_this.domElement.style.width = (width+1)+'px';
setTimeout(function() {
_this.domElement.style.width = width+'px';
}, 1);
} }
@ -180,11 +189,8 @@ var GUI = function() {
} }
} }
} }
document.removeEventListener('mousemove', resize, false); document.removeEventListener('mousemove', resize, false);
e.preventDefault(); e.preventDefault();
toggleDragged = false; toggleDragged = false;
@ -194,8 +200,8 @@ var GUI = function() {
}, false); }, false);
this.domElement.appendChild(toggleButton);
this.domElement.appendChild(controllerContainer); this.domElement.appendChild(controllerContainer);
this.domElement.appendChild(toggleButton);
if (GUI.autoPlace) { if (GUI.autoPlace) {
if(GUI.autoPlaceContainer == null) { if(GUI.autoPlaceContainer == null) {
@ -297,8 +303,8 @@ var GUI = function() {
// Have we already added this? // Have we already added this?
if (alreadyControlled(object, propertyName)) { if (alreadyControlled(object, propertyName)) {
// GUI.error("Controller for \"" + propertyName+"\" already added."); GUI.error("Controller for \"" + propertyName+"\" already added.");
// return; return;
} }
var value = object[propertyName]; var value = object[propertyName];
@ -450,7 +456,6 @@ var GUI = function() {
if (GUI.guiIndex < GUI.savedAppearanceVars.length) { if (GUI.guiIndex < GUI.savedAppearanceVars.length) {
width = parseInt(GUI.savedAppearanceVars[GUI.guiIndex][1]); width = parseInt(GUI.savedAppearanceVars[GUI.guiIndex][1]);
//_this.domElement.style.width = width+"px"; //_this.domElement.style.width = width+"px";

31
index.html
View File

@ -21,9 +21,11 @@
</script> </script>
<script type="text/javascript" src="controllers/controller.string.js"> <script type="text/javascript" src="controllers/controller.string.js">
</script> </script>
<script type="text/javascript" src="controllers/scrubber.js"> <script type="text/javascript" src="time/scrubber.js">
</script> </script>
<script type="text/javascript" src="controllers/timer.js"> <script type="text/javascript" src="time/timer.js">
</script>
<script type="text/javascript" src="time/easing.js">
</script> </script>
<script type="text/javascript" src="demo/improvedNoise.js"> <script type="text/javascript" src="demo/improvedNoise.js">
</script> </script>
@ -34,11 +36,16 @@
<script type="text/javascript"> <script type="text/javascript">
//<![CDATA[ //<![CDATA[
var timer; var timer;
this.blabla = "ldkjflkdjf";
window.onload = function() { window.onload = function() {
var fizzyText = new FizzyText("gui-dat"); var fizzyText = new FizzyText("gui-dat");
var gui = new GUI(); var gui = new GUI();
var gui2 = new GUI();
var gui3 = new GUI();
timer = new GUI.Timer(gui); timer = new GUI.Timer(gui);
@ -68,17 +75,19 @@
.at(2000) .at(2000)
.at(3000); .at(3000);
gui.divider();
// gui.add(timer, "playhead").step(100).listen();
// gui.add(timer, "playPause");
gui.add(timer, "snapIncrement");
gui.add(timer, "useSnap");
/*
gui.add(timer, "windowMin").listen();
gui.add(timer, "windowWidth").listen();
*/
gui2.add(timer, "playhead").step(125).listen();
gui2.add(timer, "playPause");
gui2.add(timer, "snapIncrement");
gui2.add(timer, "useSnap");
gui3.add(timer, "windowMin").listen();
gui3.add(timer, "windowWidth",0, 20000).listen();
gui3.add(this, "blabla");
//gui.add(timer, "pause"); //gui.add(timer, "pause");

249
time/easing.js
View File

@ -1,249 +0,0 @@
TWEEN.Easing = { Linear: {}, Quadratic: {}, Cubic: {}, Quartic: {}, Quintic: {}, Sinusoidal: {}, Exponential: {}, Circular: {}, Elastic: {}, Back: {}, Bounce: {} };
TWEEN.Easing.Linear.EaseNone = function ( k ) {
return k;
};
//
TWEEN.Easing.Quadratic.EaseIn = function ( k ) {
return k * k;
};
TWEEN.Easing.Quadratic.EaseOut = function ( k ) {
return - k * ( k - 2 );
};
TWEEN.Easing.Quadratic.EaseInOut = function ( k ) {
if ( ( k *= 2 ) < 1 ) return 0.5 * k * k;
return - 0.5 * ( --k * ( k - 2 ) - 1 );
};
//
TWEEN.Easing.Cubic.EaseIn = function ( k ) {
return k * k * k;
};
TWEEN.Easing.Cubic.EaseOut = function ( k ) {
return --k * k * k + 1;
};
TWEEN.Easing.Cubic.EaseInOut = function ( k ) {
if ( ( k *= 2 ) < 1 ) return 0.5 * k * k * k;
return 0.5 * ( ( k -= 2 ) * k * k + 2 );
};
//
TWEEN.Easing.Quartic.EaseIn = function ( k ) {
return k * k * k * k;
};
TWEEN.Easing.Quartic.EaseOut = function ( k ) {
return - ( --k * k * k * k - 1 );
}
TWEEN.Easing.Quartic.EaseInOut = function ( k ) {
if ( ( k *= 2 ) < 1) return 0.5 * k * k * k * k;
return - 0.5 * ( ( k -= 2 ) * k * k * k - 2 );
};
//
TWEEN.Easing.Quintic.EaseIn = function ( k ) {
return k * k * k * k * k;
};
TWEEN.Easing.Quintic.EaseOut = function ( k ) {
return ( k = k - 1 ) * k * k * k * k + 1;
};
TWEEN.Easing.Quintic.EaseInOut = function ( k ) {
if ( ( k *= 2 ) < 1 ) return 0.5 * k * k * k * k * k;
return 0.5 * ( ( k -= 2 ) * k * k * k * k + 2 );
};
//
TWEEN.Easing.Sinusoidal.EaseIn = function ( k ) {
return - Math.cos( k * Math.PI / 2 ) + 1;
};
TWEEN.Easing.Sinusoidal.EaseOut = function ( k ) {
return Math.sin( k * Math.PI / 2 );
};
TWEEN.Easing.Sinusoidal.EaseInOut = function ( k ) {
return - 0.5 * ( Math.cos( Math.PI * k ) - 1 );
};
//
TWEEN.Easing.Exponential.EaseIn = function ( k ) {
return k == 0 ? 0 : Math.pow( 2, 10 * ( k - 1 ) );
};
TWEEN.Easing.Exponential.EaseOut = function ( k ) {
return k == 1 ? 1 : - Math.pow( 2, - 10 * k ) + 1;
};
TWEEN.Easing.Exponential.EaseInOut = function ( k ) {
if ( k == 0 ) return 0;
if ( k == 1 ) return 1;
if ( ( k *= 2 ) < 1 ) return 0.5 * Math.pow( 2, 10 * ( k - 1 ) );
return 0.5 * ( - Math.pow( 2, - 10 * ( k - 1 ) ) + 2 );
};
//
TWEEN.Easing.Circular.EaseIn = function ( k ) {
return - ( Math.sqrt( 1 - k * k ) - 1);
};
TWEEN.Easing.Circular.EaseOut = function ( k ) {
return Math.sqrt( 1 - --k * k );
};
TWEEN.Easing.Circular.EaseInOut = function ( k ) {
if ( ( k /= 0.5 ) < 1) return - 0.5 * ( Math.sqrt( 1 - k * k) - 1);
return 0.5 * ( Math.sqrt( 1 - ( k -= 2) * k) + 1);
};
//
TWEEN.Easing.Elastic.EaseIn = function( k ) {
var s, a = 0.1, p = 0.4;
if ( k == 0 ) return 0; if ( k == 1 ) return 1; if ( !p ) p = 0.3;
if ( !a || a < 1 ) { a = 1; s = p / 4; }
else s = p / ( 2 * Math.PI ) * Math.asin( 1 / a );
return - ( a * Math.pow( 2, 10 * ( k -= 1 ) ) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) );
};
TWEEN.Easing.Elastic.EaseOut = function( k ) {
var s, a = 0.1, p = 0.4;
if ( k == 0 ) return 0; if ( k == 1 ) return 1; if ( !p ) p = 0.3;
if ( !a || a < 1 ) { a = 1; s = p / 4; }
else s = p / ( 2 * Math.PI ) * Math.asin( 1 / a );
return ( a * Math.pow( 2, - 10 * k) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) + 1 );
};
TWEEN.Easing.Elastic.EaseInOut = function( k ) {
var s, a = 0.1, p = 0.4;
if ( k == 0 ) return 0; if ( k == 1 ) return 1; if ( !p ) p = 0.3;
if ( !a || a < 1 ) { a = 1; s = p / 4; }
else s = p / ( 2 * Math.PI ) * Math.asin( 1 / a );
if ( ( k *= 2 ) < 1 ) return - 0.5 * ( a * Math.pow( 2, 10 * ( k -= 1 ) ) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) );
return a * Math.pow( 2, -10 * ( k -= 1 ) ) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) * 0.5 + 1;
};
//
TWEEN.Easing.Back.EaseIn = function( k ) {
var s = 1.70158;
return k * k * ( ( s + 1 ) * k - s );
};
TWEEN.Easing.Back.EaseOut = function( k ) {
var s = 1.70158;
return ( k = k - 1 ) * k * ( ( s + 1 ) * k + s ) + 1;
};
TWEEN.Easing.Back.EaseInOut = function( k ) {
var s = 1.70158 * 1.525;
if ( ( k *= 2 ) < 1 ) return 0.5 * ( k * k * ( ( s + 1 ) * k - s ) );
return 0.5 * ( ( k -= 2 ) * k * ( ( s + 1 ) * k + s ) + 2 );
};
//
TWEEN.Easing.Bounce.EaseIn = function( k ) {
return 1 - TWEEN.Easing.Bounce.EaseOut( 1 - k );
};
TWEEN.Easing.Bounce.EaseOut = function( k ) {
if ( ( k /= 1 ) < ( 1 / 2.75 ) ) {
return 7.5625 * k * k;
} else if ( k < ( 2 / 2.75 ) ) {
return 7.5625 * ( k -= ( 1.5 / 2.75 ) ) * k + 0.75;
} else if ( k < ( 2.5 / 2.75 ) ) {
return 7.5625 * ( k -= ( 2.25 / 2.75 ) ) * k + 0.9375;
} else {
return 7.5625 * ( k -= ( 2.625 / 2.75 ) ) * k + 0.984375;
}
};
TWEEN.Easing.Bounce.EaseInOut = function( k ) {
if ( k < 0.5 ) return TWEEN.Easing.Bounce.EaseIn( k * 2 ) * 0.5;
return TWEEN.Easing.Bounce.EaseOut( k * 2 - 1 ) * 0.5 + 0.5;
};

267
time/scrubber.js
View File

@ -1,5 +1,8 @@
GUI.Controller.prototype.at = function(when, what, tween) { GUI.Controller.prototype.at = function(when, what, tween) {
// TODO: tween if (!this.scrubber) {
GUI.error("You must create a new Timer for this GUI in order to define events.");
return this;
}
this.scrubber.add(new GUI.ScrubberPoint(this.scrubber, when, what)); this.scrubber.add(new GUI.ScrubberPoint(this.scrubber, when, what));
this.scrubber.render(); this.scrubber.render();
return this; return this;
@ -65,7 +68,7 @@ GUI.Scrubber = function(controller, timer) {
}); });
this.domElement = document.createElement('div'); this.domElement = document.createElement('div');
this.domElement.setAttribute('class', 'guidat-time'); this.domElement.setAttribute('class', 'guidat-scrubber');
var canvas = document.createElement('canvas'); var canvas = document.createElement('canvas');
this.domElement.appendChild(canvas); this.domElement.appendChild(canvas);
@ -152,6 +155,7 @@ GUI.Scrubber = function(controller, timer) {
var scrubPan = function() { var scrubPan = function() {
var t = _this.timer.playhead; var t = _this.timer.playhead;
var tmin = _this.timer.windowMin + _this.timer.windowWidth/5; var tmin = _this.timer.windowMin + _this.timer.windowWidth/5;
var tmax = _this.timer.windowMin + _this.timer.windowWidth - _this.timer.windowWidth/5; var tmax = _this.timer.windowMin + _this.timer.windowWidth - _this.timer.windowWidth/5;
@ -162,7 +166,6 @@ GUI.Scrubber = function(controller, timer) {
if (t > tmax) { if (t > tmax) {
_this.timer.windowMin += 0; _this.timer.windowMin += 0;
_this.timer.windowMin += GUI.map(t, tmax, _this.timer.windowMin+_this.timer.windowWidth, 0,_this.timer.windowWidth/50); _this.timer.windowMin += GUI.map(t, tmax, _this.timer.windowMin+_this.timer.windowWidth, 0,_this.timer.windowWidth/50);
} }
@ -182,7 +185,6 @@ GUI.Scrubber = function(controller, timer) {
} }
var dragActive = function(e) { var dragActive = function(e) {
var t = GUI.map(e.pageX, position.left, position.left+width, _this.timer.windowMin, _this.timer.windowMin+_this.timer.windowWidth); var t = GUI.map(e.pageX, position.left, position.left+width, _this.timer.windowMin, _this.timer.windowMin+_this.timer.windowWidth);
_this.timer.activePoint.time = _this.timer.snap(t); _this.timer.activePoint.time = _this.timer.snap(t);
_this.timer.playhead = _this.timer.snap(t); _this.timer.playhead = _this.timer.snap(t);
@ -241,7 +243,7 @@ GUI.Scrubber = function(controller, timer) {
var dy = e.wheelDeltaY*4; var dy = e.wheelDeltaY*4;
_this.timer.windowWidth -= dy; _this.timer.windowWidth -= dy;
_this.timer.windowMin += dy/2 + dx; _this.timer.windowMin += dy/2 - dx;
return false; return false;
@ -331,7 +333,6 @@ GUI.Scrubber = function(controller, timer) {
next = null; next = null;
} }
console.log(next, prev);
if (next != null & prev != null) { if (next != null & prev != null) {
@ -393,6 +394,14 @@ GUI.ScrubberPoint = function(scrubber, time, value) {
return val; return val;
}); });
this.__defineGetter__("x", function() {
return x;
});
this.__defineGetter__("y", function() {
return y;
});
var barSize = 4; var barSize = 4;
var rectSize = 7; var rectSize = 7;
@ -402,10 +411,6 @@ GUI.ScrubberPoint = function(scrubber, time, value) {
this.getSaveObject = function() { this.getSaveObject = function() {
var obj = { 'value': _this.value, 'time': time }; var obj = { 'value': _this.value, 'time': time };
if (this.hold) {
obj.hold = true;
}
// TODO: save tweens // TODO: save tweens
return obj; return obj;
@ -458,6 +463,10 @@ GUI.ScrubberPoint = function(scrubber, time, value) {
y = scrubber.height/2; y = scrubber.height/2;
if (scrubber.controller.type == 'number') {
y = GUI.map(_this.value, scrubber.controller.min, scrubber.controller.max, scrubber.height, 0);
}
if (scrubber.timer.activePoint == this) { if (scrubber.timer.activePoint == this) {
g.fillStyle = '#ffd800'; // g.fillStyle = '#ffd800'; //
} else if (scrubber.timer.hoverPoint == this) { } else if (scrubber.timer.hoverPoint == this) {
@ -500,14 +509,12 @@ GUI.ScrubberPoint = function(scrubber, time, value) {
if (n != null) { if (n != null) {
var nx = GUI.constrain(GUI.map(n.time, timer.windowMin, timer.windowMin+timer.windowWidth, 0, 1)); console.log(n.x, n.y);
nx = GUI.constrain(GUI.map(nx, 0, 1, 0, scrubber.width)); g.lineWidth = rectSize/2;
g.lineWidth = rectSize/2
g.strokeStyle='#222'; g.strokeStyle='#222';
g.beginPath(); g.beginPath();
g.moveTo(nx, y); g.moveTo(n.x, n.y);
g.lineTo(x, y); g.lineTo(x, y);
g.stroke(); g.stroke();
@ -535,3 +542,233 @@ GUI.ScrubberPoint = function(scrubber, time, value) {
} }
} }
GUI.Easing = {}
GUI.Easing.Linear = function ( k ) {
return k;
};
GUI.Easing.QuadraticEaseIn = function ( k ) {
return k * k;
};
GUI.Easing.QuadraticEaseOut = function ( k ) {
return - k * ( k - 2 );
};
GUI.Easing.QuadraticEaseInOut = function ( k ) {
if ( ( k *= 2 ) < 1 ) return 0.5 * k * k;
return - 0.5 * ( --k * ( k - 2 ) - 1 );
};
GUI.Easing.CubicEaseIn = function ( k ) {
return k * k * k;
};
GUI.Easing.CubicEaseOut = function ( k ) {
return --k * k * k + 1;
};
GUI.Easing.CubicEaseInOut = function ( k ) {
if ( ( k *= 2 ) < 1 ) return 0.5 * k * k * k;
return 0.5 * ( ( k -= 2 ) * k * k + 2 );
};
GUI.Easing.QuarticEaseIn = function ( k ) {
return k * k * k * k;
};
GUI.Easing.QuarticEaseOut = function ( k ) {
return - ( --k * k * k * k - 1 );
}
GUI.Easing.QuarticEaseInOut = function ( k ) {
if ( ( k *= 2 ) < 1) return 0.5 * k * k * k * k;
return - 0.5 * ( ( k -= 2 ) * k * k * k - 2 );
};
//
GUI.Easing.QuinticEaseIn = function ( k ) {
return k * k * k * k * k;
};
GUI.Easing.QuinticEaseOut = function ( k ) {
return ( k = k - 1 ) * k * k * k * k + 1;
};
GUI.Easing.QuinticEaseInOut = function ( k ) {
if ( ( k *= 2 ) < 1 ) return 0.5 * k * k * k * k * k;
return 0.5 * ( ( k -= 2 ) * k * k * k * k + 2 );
};
GUI.Easing.SinusoidalEaseIn = function ( k ) {
return - Math.cos( k * Math.PI / 2 ) + 1;
};
GUI.Easing.SinusoidalEaseOut = function ( k ) {
return Math.sin( k * Math.PI / 2 );
};
GUI.Easing.SinusoidalEaseInOut = function ( k ) {
return - 0.5 * ( Math.cos( Math.PI * k ) - 1 );
};
GUI.Easing.ExponentialEaseIn = function ( k ) {
return k == 0 ? 0 : Math.pow( 2, 10 * ( k - 1 ) );
};
GUI.Easing.ExponentialEaseOut = function ( k ) {
return k == 1 ? 1 : - Math.pow( 2, - 10 * k ) + 1;
};
GUI.Easing.ExponentialEaseInOut = function ( k ) {
if ( k == 0 ) return 0;
if ( k == 1 ) return 1;
if ( ( k *= 2 ) < 1 ) return 0.5 * Math.pow( 2, 10 * ( k - 1 ) );
return 0.5 * ( - Math.pow( 2, - 10 * ( k - 1 ) ) + 2 );
};
GUI.Easing.CircularEaseIn = function ( k ) {
return - ( Math.sqrt( 1 - k * k ) - 1);
};
GUI.Easing.CircularEaseOut = function ( k ) {
return Math.sqrt( 1 - --k * k );
};
GUI.Easing.CircularEaseInOut = function ( k ) {
if ( ( k /= 0.5 ) < 1) return - 0.5 * ( Math.sqrt( 1 - k * k) - 1);
return 0.5 * ( Math.sqrt( 1 - ( k -= 2) * k) + 1);
};
GUI.Easing.ElasticEaseIn = function( k ) {
var s, a = 0.1, p = 0.4;
if ( k == 0 ) return 0; if ( k == 1 ) return 1; if ( !p ) p = 0.3;
if ( !a || a < 1 ) { a = 1; s = p / 4; }
else s = p / ( 2 * Math.PI ) * Math.asin( 1 / a );
return - ( a * Math.pow( 2, 10 * ( k -= 1 ) ) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) );
};
GUI.Easing.ElasticEaseOut = function( k ) {
var s, a = 0.1, p = 0.4;
if ( k == 0 ) return 0; if ( k == 1 ) return 1; if ( !p ) p = 0.3;
if ( !a || a < 1 ) { a = 1; s = p / 4; }
else s = p / ( 2 * Math.PI ) * Math.asin( 1 / a );
return ( a * Math.pow( 2, - 10 * k) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) + 1 );
};
GUI.Easing.ElasticEaseInOut = function( k ) {
var s, a = 0.1, p = 0.4;
if ( k == 0 ) return 0; if ( k == 1 ) return 1; if ( !p ) p = 0.3;
if ( !a || a < 1 ) { a = 1; s = p / 4; }
else s = p / ( 2 * Math.PI ) * Math.asin( 1 / a );
if ( ( k *= 2 ) < 1 ) return - 0.5 * ( a * Math.pow( 2, 10 * ( k -= 1 ) ) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) );
return a * Math.pow( 2, -10 * ( k -= 1 ) ) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) * 0.5 + 1;
};
GUI.Easing.BackEaseIn = function( k ) {
var s = 1.70158;
return k * k * ( ( s + 1 ) * k - s );
};
GUI.Easing.BackEaseOut = function( k ) {
var s = 1.70158;
return ( k = k - 1 ) * k * ( ( s + 1 ) * k + s ) + 1;
};
GUI.Easing.BackEaseInOut = function( k ) {
var s = 1.70158 * 1.525;
if ( ( k *= 2 ) < 1 ) return 0.5 * ( k * k * ( ( s + 1 ) * k - s ) );
return 0.5 * ( ( k -= 2 ) * k * ( ( s + 1 ) * k + s ) + 2 );
};
GUI.Easing.BounceEaseIn = function( k ) {
return 1 - GUI.Easing.Bounce.EaseOut( 1 - k );
};
GUI.Easing.BounceEaseOut = function( k ) {
if ( ( k /= 1 ) < ( 1 / 2.75 ) ) {
return 7.5625 * k * k;
} else if ( k < ( 2 / 2.75 ) ) {
return 7.5625 * ( k -= ( 1.5 / 2.75 ) ) * k + 0.75;
} else if ( k < ( 2.5 / 2.75 ) ) {
return 7.5625 * ( k -= ( 2.25 / 2.75 ) ) * k + 0.9375;
} else {
return 7.5625 * ( k -= ( 2.625 / 2.75 ) ) * k + 0.984375;
}
};
GUI.Easing.BounceEaseInOut = function( k ) {
if ( k < 0.5 ) return GUI.Easing.Bounce.EaseIn( k * 2 ) * 0.5;
return GUI.Easing.Bounce.EaseOut( k * 2 - 1 ) * 0.5 + 0.5;
};

8
time/timer.js
View File

@ -13,6 +13,14 @@ GUI.Timer = function(gui) {
this.gui = gui; this.gui = gui;
this.gui.timer = this; this.gui.timer = this;
this.gui.domElement.setAttribute('class', 'guidat time');
this.gui.domElement.style.width = "100%";
// Put toggle button on top.
var toggleButton = this.gui.domElement.lastChild;
this.gui.domElement.removeChild(toggleButton);
this.gui.domElement.insertBefore(toggleButton, this.gui.domElement.firstChild);
var playhead = 0; var playhead = 0;
var lastPlayhead = 0; var lastPlayhead = 0;