Skip to content

Commit

Permalink
Fixed graphs example (graphs weren't floating properly in Firefox/Ope…
Browse files Browse the repository at this point in the history 
…ra).
  • Loading branch information
Mr.doob committed Aug 26, 2011
1 parent 20cb80c commit 073fcd8
Showing 1 changed file with 46 additions and 35 deletions.
81 changes: 46 additions & 35 deletions examples/03_graphs.html
View file
Expand Up @@ -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)";
Expand Down Expand Up @@ -122,6 +129,10 @@ <h2>03 _ graphs</h2>

}).start();

div.appendChild( document.createTextNode( t ) );
div.appendChild( document.createElement( 'br' ) );
div.appendChild( canvas );

return div;
}

Expand Down

0 comments on commit 073fcd8

Please sign in to comment.