<commit_before><!DOCTYPE html>
<html lang="en">
	<head>
		<title>Tween.js / graphs</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="../src/Tween.js"></script>
		<style>
			body {
				margin: 0px;
			}

			#target {
				font-size: 13px;
				padding: 0px 32px;
			}

		</style>
		<link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div id="info" style="position: relative;">
			<h1><a href="http://github.com/sole/tween.js">tween.js</a></h1>
			<h2>03 _ graphs</h2>
			<p>The curves, visualised.</p>
		</div>

		<div id="target"></div>

		<script type="text/javascript">
			var target = document.getElementById('target');

			target.appendChild( createGraph( 'Linear.EaseNone', TWEEN.Easing.Linear.EaseNone ) );

			target.appendChild( document.createElement( 'br' ) );

			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( '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( document.createElement( 'br' ) );

			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( '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( document.createElement( 'br' ) );

			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( '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( 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';

				var canvas = document.createElement( 'canvas' );
				canvas.width = 180;
				canvas.height = 100;
<commit_msg>easing functions visualized in seperate rows<commit_after><!DOCTYPE html>
<html lang="en">
	<head>
		<title>Tween.js / graphs</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="../src/Tween.js"></script>
		<style>
			body {
				margin: 0px;
			}

			#target {
				font-size: 13px;
				padding: 0px 32px;
			}

		</style>
		<link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div id="info" style="position: relative;">
			<h1><a href="http://github.com/sole/tween.js">tween.js</a></h1>
			<h2>03 _ graphs</h2>
			<p>The curves, visualised.</p>
		</div>

		<div id="target"></div>

		<script type="text/javascript">
			var target = document.getElementById('target');

			target.appendChild( createGraph( 'Linear.EaseNone', TWEEN.Easing.Linear.EaseNone ) );

			target.appendChild( document.createElement( 'br' ) );

			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( document.createElement( 'br' ) );

			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( document.createElement( 'br' ) );

			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( document.createElement( 'br' ) );

			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( document.createElement( 'br' ) );

			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( document.createElement( 'br' ) );

			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( 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( document.createElement( 'br' ) );

			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( document.createElement( 'br' ) );

			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';

				var canvas = document.createElement( 'canvas' );
				canvas.width = 180;
				canvas.height = 100;

{'fraction_non_alphanumeric': 0.1561599631208943, 'fraction_numerical': 0.007375821136337444, 'mean_word_length': 4.566388710711995, 'pattern_counts': {'":': 0, '<': 55, '<?xml version=': 0, '>': 55, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5412932', 'n_tokens_mistral': 3462, 'n_tokens_neox': 3052, 'n_words': 454}