Permalink
Browse files

Fixed graphs example (graphs weren't floating properly in Firefox/Ope…

…ra).
  • Loading branch information...
1 parent 20cb80c commit 073fcd84440cbb73e3bb52309e292c9ad4f41f54 @mrdoob mrdoob committed Aug 26, 2011
Showing with 46 additions and 35 deletions.
  1. +46 −35 examples/03_graphs.html
View
@@ -29,63 +29,70 @@ <h2>03 _ graphs</h2>
<script type="text/javascript">
var target = document.getElementById('target');
- target.appendChild( createGraph( "Linear.EaseNone", TWEEN.Easing.Linear.EaseNone, false ) );
+ target.appendChild( createGraph( 'Linear.EaseNone', TWEEN.Easing.Linear.EaseNone ) );
- target.appendChild( createGraph( "Quadratic.EaseIn", TWEEN.Easing.Quadratic.EaseIn, true ) );
- target.appendChild( createGraph( "Quadratic.EaseOut", TWEEN.Easing.Quadratic.EaseOut, false ) );
- target.appendChild( createGraph( "Quadratic.EaseInOut", TWEEN.Easing.Quadratic.EaseInOut, false ) );
+ target.appendChild( document.createElement( 'br' ) );
- target.appendChild( createGraph( "Cubic.EaseIn", TWEEN.Easing.Cubic.EaseIn, false ) );
- target.appendChild( createGraph( "Cubic.EaseOut", TWEEN.Easing.Cubic.EaseOut, false ) );
- target.appendChild( createGraph( "Cubic.EaseInOut", TWEEN.Easing.Cubic.EaseInOut, false ) );
+ target.appendChild( createGraph( 'Quadratic.EaseIn', TWEEN.Easing.Quadratic.EaseIn ) );
+ target.appendChild( createGraph( 'Quadratic.EaseOut', TWEEN.Easing.Quadratic.EaseOut ) );
+ target.appendChild( createGraph( 'Quadratic.EaseInOut', TWEEN.Easing.Quadratic.EaseInOut ) );
- target.appendChild( createGraph( "Quartic.EaseIn", TWEEN.Easing.Quartic.EaseIn, true ) );
- target.appendChild( createGraph( "Quartic.EaseOut", TWEEN.Easing.Quartic.EaseOut, false ) );
- target.appendChild( createGraph( "Quartic.EaseInOut", TWEEN.Easing.Quartic.EaseInOut, false ) );
+ target.appendChild( createGraph( 'Cubic.EaseIn', TWEEN.Easing.Cubic.EaseIn ) );
+ target.appendChild( createGraph( 'Cubic.EaseOut', TWEEN.Easing.Cubic.EaseOut ) );
+ target.appendChild( createGraph( 'Cubic.EaseInOut', TWEEN.Easing.Cubic.EaseInOut ) );
- target.appendChild( createGraph( "Quintic.EaseIn", TWEEN.Easing.Quintic.EaseIn, false ) );
- target.appendChild( createGraph( "Quintic.EaseOut", TWEEN.Easing.Quintic.EaseOut, false ) );
- target.appendChild( createGraph( "Quintic.EaseInOut", TWEEN.Easing.Quintic.EaseInOut, false ) );
+ target.appendChild( document.createElement( 'br' ) );
- target.appendChild( createGraph( "Sinusoidal.EaseIn", TWEEN.Easing.Sinusoidal.EaseIn, true ) );
- target.appendChild( createGraph( "Sinusoidal.EaseOut", TWEEN.Easing.Sinusoidal.EaseOut, false ) );
- target.appendChild( createGraph( "Sinusoidal.EaseInOut", TWEEN.Easing.Sinusoidal.EaseInOut, false ) );
+ target.appendChild( createGraph( 'Quartic.EaseIn', TWEEN.Easing.Quartic.EaseIn ) );
+ target.appendChild( createGraph( 'Quartic.EaseOut', TWEEN.Easing.Quartic.EaseOut ) );
+ target.appendChild( createGraph( 'Quartic.EaseInOut', TWEEN.Easing.Quartic.EaseInOut ) );
- target.appendChild( createGraph( "Exponential.EaseIn", TWEEN.Easing.Exponential.EaseIn, false ) );
- target.appendChild( createGraph( "Exponential.EaseOut", TWEEN.Easing.Exponential.EaseOut, false ) );
- target.appendChild( createGraph( "Exponential.EaseInOut", TWEEN.Easing.Exponential.EaseInOut, false ) );
+ target.appendChild( createGraph( 'Quintic.EaseIn', TWEEN.Easing.Quintic.EaseIn ) );
+ target.appendChild( createGraph( 'Quintic.EaseOut', TWEEN.Easing.Quintic.EaseOut ) );
+ target.appendChild( createGraph( 'Quintic.EaseInOut', TWEEN.Easing.Quintic.EaseInOut ) );
- target.appendChild( createGraph( "Circular.EaseIn", TWEEN.Easing.Circular.EaseIn, true ) );
- target.appendChild( createGraph( "Circular.EaseOut", TWEEN.Easing.Circular.EaseOut, false ) );
- target.appendChild( createGraph( "Circular.EaseInOut", TWEEN.Easing.Circular.EaseInOut, false ) );
+ target.appendChild( document.createElement( 'br' ) );
- target.appendChild( createGraph( "Elastic.EaseIn", TWEEN.Easing.Elastic.EaseIn, false ) );
- target.appendChild( createGraph( "Elastic.EaseOut", TWEEN.Easing.Elastic.EaseOut, false ) );
- target.appendChild( createGraph( "Elastic.EaseInOut", TWEEN.Easing.Elastic.EaseInOut, false ) );
+ target.appendChild( createGraph( 'Sinusoidal.EaseIn', TWEEN.Easing.Sinusoidal.EaseIn ) );
+ target.appendChild( createGraph( 'Sinusoidal.EaseOut', TWEEN.Easing.Sinusoidal.EaseOut ) );
+ target.appendChild( createGraph( 'Sinusoidal.EaseInOut', TWEEN.Easing.Sinusoidal.EaseInOut ) );
- target.appendChild( createGraph( "Back.EaseIn", TWEEN.Easing.Back.EaseIn, true ) );
- target.appendChild( createGraph( "Back.EaseOut", TWEEN.Easing.Back.EaseOut, false ) );
- target.appendChild( createGraph( "Back.EaseInOut", TWEEN.Easing.Back.EaseInOut, false ) );
+ target.appendChild( createGraph( 'Exponential.EaseIn', TWEEN.Easing.Exponential.EaseIn ) );
+ target.appendChild( createGraph( 'Exponential.EaseOut', TWEEN.Easing.Exponential.EaseOut ) );
+ target.appendChild( createGraph( 'Exponential.EaseInOut', TWEEN.Easing.Exponential.EaseInOut ) );
- target.appendChild( createGraph( "Bounce.EaseIn", TWEEN.Easing.Bounce.EaseIn, false ) );
- target.appendChild( createGraph( "Bounce.EaseOut", TWEEN.Easing.Bounce.EaseOut, false ) );
- target.appendChild( createGraph( "Bounce.EaseInOut", TWEEN.Easing.Bounce.EaseInOut, false ) );
+ target.appendChild( document.createElement( 'br' ) );
+
+ target.appendChild( createGraph( 'Circular.EaseIn', TWEEN.Easing.Circular.EaseIn ) );
+ target.appendChild( createGraph( 'Circular.EaseOut', TWEEN.Easing.Circular.EaseOut ) );
+ target.appendChild( createGraph( 'Circular.EaseInOut', TWEEN.Easing.Circular.EaseInOut ) );
+
+ target.appendChild( createGraph( 'Elastic.EaseIn', TWEEN.Easing.Elastic.EaseIn ) );
+ target.appendChild( createGraph( 'Elastic.EaseOut', TWEEN.Easing.Elastic.EaseOut ) );
+ target.appendChild( createGraph( 'Elastic.EaseInOut', TWEEN.Easing.Elastic.EaseInOut ) );
+
+ target.appendChild( document.createElement( 'br' ) );
+
+ target.appendChild( createGraph( 'Back.EaseIn', TWEEN.Easing.Back.EaseIn ) );
+ target.appendChild( createGraph( 'Back.EaseOut', TWEEN.Easing.Back.EaseOut ) );
+ target.appendChild( createGraph( 'Back.EaseInOut', TWEEN.Easing.Back.EaseInOut ) );
+
+ target.appendChild( createGraph( 'Bounce.EaseIn', TWEEN.Easing.Bounce.EaseIn ) );
+ target.appendChild( createGraph( 'Bounce.EaseOut', TWEEN.Easing.Bounce.EaseOut ) );
+ target.appendChild( createGraph( 'Bounce.EaseInOut', TWEEN.Easing.Bounce.EaseInOut ) );
setInterval( loop, 1000 / 120 );
function createGraph( t, f, c ) {
var div = document.createElement( 'div' );
+ div.style.display = 'inline-block';
div.style.width = '200px';
div.style.height = '120px';
- div.style.float = 'left';
- if ( c ) div.style.clear = 'both';
- div.appendChild( document.createTextNode( t ) );
var canvas = document.createElement( 'canvas' );
canvas.width = 180;
canvas.height = 100;
- div.appendChild( canvas );
var context = canvas.getContext( '2d' );
context.fillStyle = "rgb(250,250,250)";
@@ -122,6 +129,10 @@ <h2>03 _ graphs</h2>
}).start();
+ div.appendChild( document.createTextNode( t ) );
+ div.appendChild( document.createElement( 'br' ) );
+ div.appendChild( canvas );
+
return div;
}

0 comments on commit 073fcd8

Please sign in to comment.