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

Improved rendering on number curves

Browse Source
This commit is contained in:
George Michael Brower 2011-02-14 16:04:20 -05:00
parent 6152bdb728
commit fd300fb9ea
2 changed files with 57 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@ -23,8 +23,7 @@
//<![CDATA[ //<![CDATA[
var timer; var timer;
window.onload = function() { window.onload = function() {
GUI.loadJSON({"guis":[{"open":true,"width":280,"openHeight":319,"scroll":1,"values":["time",1.35,8.5602,0.2792,0.0871,46.3269,false,null,0,null],"timer":{"windowMin":8617.568021757952,"windowWidth":11596,"playhead":10000,"snapIncrement":250,"useSnap":true,"scrubbers":[{"points":[{"value":"gui-dat","time":-3250},{"value":"over","time":5500},{"value":"time","time":9750}]},{"points":[{"value":1.3499999999999999,"time":644.1387},{"value":1.3499999999999999,"time":9750,"tween":"CircularEaseIn"}]},{"points":[{"value":0,"time":-2750,"tween":"SinusoidalEaseInOut"},{"value":7,"time":659.1556},{"value":7,"time":2211.2348},{"value":5.525,"time":5500},{"value":8.955,"time":6413.8663},{"value":8.339963195382083,"time":12000,"tween":"SinusoidalEaseInOut"},{"value":0,"time":16500}]},{"points":[{"value":0.5049,"time":-532.8902,"tween":"Hold"},{"value":0.5544,"time":1666.4321},{"value":0.01,"time":3382.0743,"tween":"Hold"},{"value":0.9900000000000001,"time":5500},{"value":0.18810000000000002,"time":9500,"tween":"Hold"},{"value":0.3069,"time":9750},{"value":0.1683,"time":11000},{"value":0.0495,"time":11750}]},{"points":[{"value":0.39899999999999997,"time":1652.5592,"tween":"SinusoidalEaseInOut"},{"value":7.6000000000000005,"time":3471.5432,"tween":"Hold"},{"value":0.8,"time":5500},{"value":1.3,"time":6000},{"value":0.1,"time":9750},{"value":0.01,"time":11500,"tween":"SinusoidalEaseInOut"},{"value":1.9000000000000001,"time":15250}]},{"points":[{"value":10,"time":795.5192,"tween":"Hold"},{"value":10,"time":5500},{"value":75,"time":5500,"tween":"CircularEaseOut"},{"value":45,"time":9750}]},{"points":[]},{"points":[{"time":9750}]},{"points":[{"value":0,"time":250,"tween":"Hold"}]},{"points":[{"time":18250}]}]}},{"open":true,"width":280,"openHeight":127,"scroll":0,"values":[null,true,250,null]}]}); GUI.loadJSON({"guis":[{"open":true,"width":280,"openHeight":319,"scroll":0,"values":["gui-dat",1.35,7,0.5425,0.4132,10,false,null,0,null],"timer":{"windowMin":-4225.189783755155,"windowWidth":11596,"playhead":1704,"snapIncrement":250,"useSnap":true,"scrubbers":[{"points":[{"value":"gui-dat","time":-3250},{"value":"over","time":5500},{"value":"time","time":9750}]},{"points":[{"value":1.3499999999999999,"time":644.1387},{"value":1.3499999999999999,"time":9750,"tween":"CircularEaseIn"}]},{"points":[{"value":0,"time":-2750,"tween":"SinusoidalEaseInOut"},{"value":7,"time":659.1556},{"value":7,"time":2211.2348},{"value":5.525,"time":5500},{"value":8.955,"time":6413.8663},{"value":8.339963195382083,"time":12000,"tween":"SinusoidalEaseInOut"},{"value":0,"time":16500}]},{"points":[{"value":0.5049,"time":-532.8902,"tween":"Hold"},{"value":0.5544,"time":1666.4321},{"value":0.01,"time":3382.0743,"tween":"Hold"},{"value":0.9900000000000001,"time":5500},{"value":0.18810000000000002,"time":9500,"tween":"Hold"},{"value":0.3069,"time":9750},{"value":0.1683,"time":11000},{"value":0.0495,"time":11750}]},{"points":[{"value":0.39899999999999997,"time":1652.5592,"tween":"SinusoidalEaseInOut"},{"value":7.6000000000000005,"time":3471.5432,"tween":"Hold"},{"value":0.8,"time":5500},{"value":1.3,"time":6000},{"value":0.1,"time":9750},{"value":0.01,"time":11500,"tween":"SinusoidalEaseInOut"},{"value":1.9000000000000001,"time":15250}]},{"points":[{"value":10,"time":795.5192,"tween":"Hold"},{"value":10,"time":5500},{"value":75,"time":5500,"tween":"CircularEaseOut"},{"value":45,"time":9750}]},{"points":[]},{"points":[{"time":9750}]},{"points":[{"value":0,"time":250,"tween":"Hold"}]},{"points":[{"time":18250}]}]}},{"open":true,"width":280,"openHeight":127,"scroll":0,"values":[null,true,250,null]}]});
var fizzyText = new FizzyText("gui-dat"); var fizzyText = new FizzyText("gui-dat");
var gui = new GUI(); var gui = new GUI();
@ -75,7 +74,7 @@
gui.add(thing, 'loop'); gui.add(thing, 'loop');
GUI.hide(); //GUI.hide();
timer.playhead = 0; timer.playhead = 0;
timer.play(); timer.play();

61
time/scrubber.js
View File

@ -443,8 +443,14 @@ GUI.ScrubberPoint = function(scrubber, time, value) {
if (type == 'number') { if (type == 'number') {
timer.showTweenSelector(); timer.showTweenSelector();
timer.tweenSelector.value = 'al';
positionTweenSelector(); positionTweenSelector();
var tweenName;
for (var i in GUI.Easing) {
if (this.tween == GUI.Easing[i]) {
tweenName = i;
}
}
timer.tweenSelector.value = tweenName;
} }
@ -510,6 +516,20 @@ GUI.ScrubberPoint = function(scrubber, time, value) {
}); });
this.__defineGetter__('prev', function() {
if (scrubber.points.length <= 1) {
return null;
}
var i = scrubber.points.indexOf(this);
if (i - 1 < 0) {
return null;
}
return scrubber.points[i-1];
});
this.__defineGetter__('time', function() { this.__defineGetter__('time', function() {
return time; return time;
}); });
@ -581,28 +601,57 @@ GUI.ScrubberPoint = function(scrubber, time, value) {
case 'number': case 'number':
g.save(); g.save();
var p = this.prev;
g.lineWidth = 3;
g.strokeStyle='#222';
if (p != null && p.time < timer.windowMin) {
console.log(p.time, timer.windowMin);
var t = GUI.map(timer.windowMin, p.time, this.time, 0, 1);
var yy = GUI.map(p.tween(t), 0, 1, p.y, y);
g.beginPath();
g.moveTo(0, yy);
if (p.tween == GUI.Easing.Linear) {
g.lineTo(x, y);
} else {
for (var i = t; i < 1; i+=0.01) {
var tx = GUI.map(i, 0, 1, p.x, x);
var ty = p.tween(i);
ty = GUI.map(ty, 0, 1, p.y, y);
g.lineTo(tx, ty);
}
}
g.stroke();
}
var n = this.next; var n = this.next;
if (n != null) { if (n != null) {
g.lineWidth = 2;
g.strokeStyle='#222';
g.beginPath(); g.beginPath();
g.moveTo(x, y); g.moveTo(x, y);
// TODO: Lines from points that may be outside of the window's scope.
if (_this.tween == GUI.Easing.Linear) { if (_this.tween == GUI.Easing.Linear) {
g.lineTo(n.x, n.y); g.lineTo(n.x, n.y);
} else { } else {
for (var i = 0; i < 1; i+=0.01) { for (var i = 0; i < 1; i+=0.01) {
var tx = GUI.map(i, 0, 1, x, n.x); var tx = GUI.map(i, 0, 1, x, n.x);
var ty = _this.tween(i); var ty = _this.tween(i);
ty = GUI.map(ty, 0, 1, y, n.y); ty = GUI.map(ty, 0, 1, y, n.y);
g.lineTo(tx, ty); g.lineTo(tx, ty);
} }
} }
g.stroke(); g.stroke();