<commit_before><!DOCTYPE html>
<html>
<head>
<title>Plane Cutting Ellipsoid</title>
<meta charset=utf-8>
<meta name=viewport content='width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'>
<meta name=author content=''>
<style>
	body { margin: 0px; overflow: hidden; }
  
</style>
</head>

<body>

<script src=https://cdn.rawgit.com/mrdoob/three.js/r73/build/three.min.js></script>
<script src=https://cdn.rawgit.com/mrdoob/three.js/r73/examples/js/controls/OrbitControls.js></script>

<div style='margin: .25in; position: absolute; background-color: #fdd'>
Plane Euler X: <input type=range id=eulerX min=0 max=3.14 step=0.01 value=2.4
			oninput='plane.rotation.x = eulerX.value; update = true'/><br/>
Plane Euler Y: <input type=range id=eulerY min=0 max=3.14 step=0.01 value=0.9
			oninput='plane.rotation.y = eulerY.value; update = true'/><br/><br/>
<input type=button value='Toggle ellipsoid' onclick='ellipsoid.visible = !ellipsoid.visible'/>
<input type=button value='Toggle axes' onclick='axes.visible = !axes.visible'/><br/><br/>
Scale X: <input type=range id=scaleX min=1 max=3 step=0.01 value=1
			oninput='ellipsoid.scale.x = scaleX.value; update = true'/><br/>
Scale Y: <input type=range id=scaleY min=1 max=3 step=0.01 value=1.7
			oninput='ellipsoid.scale.y = scaleY.value; update = true'/><br/>
Scale Z: <input type=range id=scaleZ min=1 max=3 step=0.01 value=1
			oninput='ellipsoid.scale.z = scaleZ.value; update = true'/>
</div>

<script>

	var scene = new THREE.Scene();
	var renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.setSize( window.innerWidth, window.innerHeight );
	renderer.setClearColor( 0xffffff, 1 );
	document.body.appendChild( renderer.domElement ); 
	
	var axes = new THREE.AxisHelper( 2 );
	scene.add( axes );
	
	var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 ); 
	camera.up.set( 0, 0, 1 );
	camera.position.set( 3, 3, 3 ); 
	var controls = new THREE.OrbitControls( camera, renderer.domElement );
	
	var planeGeometry = new THREE.PlaneGeometry( 5, 5 );
	var plane = new THREE.Mesh( planeGeometry,
			new THREE.MeshBasicMaterial( { color: 0x000000, side: THREE.DoubleSide } ) );
	plane.rotation.x = eulerX.value;
	plane.rotation.y = eulerY.value;
	scene.add( plane );

	window.addEventListener( 'resize', function() {
		
		renderer.setSize( window.innerWidth, window.innerHeight );
		camera.aspect = window.innerWidth / window.innerHeight;
		camera.updateProjectionMatrix();
		
	} );
	
	// material must be double sided for raycasting from the origin
	var ellipsoidGeometry = new THREE.SphereGeometry( 1, 100, 50 );
	var ellipsoid = new THREE.Mesh( ellipsoidGeometry,
			new THREE.MeshNormalMaterial( { side: THREE.DoubleSide } ) );
	ellipsoid.scale.x = scaleX.value;
	ellipsoid.scale.y = scaleY.value;
	ellipsoid.scale.z = scaleZ.value;

	scene.add( ellipsoid );

	var raycaster = new THREE.Raycaster( );

	function drawIntersection() {

		var points = [], lastVisible = ellipsoid.visible;
		ellipsoid.visible = true // need for raycaster

		var n = new THREE.Vector3( 0, 0, 1 );
		n.applyAxisAngle( new THREE.Vector3( 0, 1, 0 ), eulerY.value );
		n.applyAxisAngle( new THREE.Vector3( 1, 0, 0 ), eulerX.value );

		var t = new THREE.Vector3( 1, 0, 0 );
		t.applyAxisAngle( new THREE.Vector3( 0, 1, 0 ), eulerY.value );
		t.applyAxisAngle( new THREE.Vector3( 1, 0, 0 ), eulerX.value );

		for ( var phi = 0 ; phi < 2*Math.PI ; phi += 2*Math.PI/50 ) {

			var v = t.clone().applyAxisAngle( n, phi );
			raycaster.ray.direction.set( v.x, v.y, v.z );

			var p = raycaster.intersectObject( ellipsoid );
			if ( p.length > 0 ) {
				var v = p[0].point;
				points.push( new THREE.Vector3().set( v.x, v.y, v.z ) );
			}

		}

		points.push( points[0] );

		var curve = new THREE.CatmullRomCurve3( points );
		var geometry = new THREE.TubeGeometry( curve, 100, .015 );
		var material = new THREE.MeshBasicMaterial( {color: 'red' } );

		var mesh =  new THREE.Mesh( geometry, material ) ;
		mesh.name = 'intersection';
		scene.remove( scene.getObjectByName( 'intersection' ) );
		scene.add( mesh );

		ellipsoid.visible = lastVisible;

	}

	var update = true;

	function render() {
		
		requestAnimationFrame( render ); 
		renderer.render( scene, camera );

		if ( update ) {
			drawIntersection();
			update = false;
		}
		
	}
	
	render();

</script>

</body>
</html><commit_msg>Improve rendering process<commit_after><!DOCTYPE html>
<html>
<head>
<title>Plane Cutting Ellipsoid</title>
<meta charset=utf-8>
<meta name=viewport content='width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'>
<meta name=author content=''>
<style>
	body { margin: 0px; overflow: hidden; }
  
</style>
</head>

<body>

<script src=https://cdn.rawgit.com/mrdoob/three.js/r73/build/three.min.js></script>
<script src=https://cdn.rawgit.com/mrdoob/three.js/r73/examples/js/controls/OrbitControls.js></script>

<div style='margin: .25in; position: absolute; background-color: #fdd'>
Plane Euler X: <input type=range id=eulerX min=0 max=3.14 step=0.01 value=2.4
			oninput='plane.rotation.x = eulerX.value; drawIntersection()'/><br/>
Plane Euler Y: <input type=range id=eulerY min=0 max=3.14 step=0.01 value=0.9
			oninput='plane.rotation.y = eulerY.value; drawIntersection()'/><br/><br/>
<input type=button value='Toggle ellipsoid' onclick='ellipsoid.visible = !ellipsoid.visible'/>
<input type=button value='Toggle axes' onclick='axes.visible = !axes.visible'/><br/><br/>
Scale X: <input type=range id=scaleX min=1 max=3 step=0.01 value=1
			oninput='ellipsoid.scale.x = scaleX.value; drawIntersection()'/><br/>
Scale Y: <input type=range id=scaleY min=1 max=3 step=0.01 value=1.7
			oninput='ellipsoid.scale.y = scaleY.value; drawIntersection()'/><br/>
Scale Z: <input type=range id=scaleZ min=1 max=3 step=0.01 value=1
			oninput='ellipsoid.scale.z = scaleZ.value; drawIntersection()'/>
</div>

<script>

	var scene = new THREE.Scene();
	var renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.setSize( window.innerWidth, window.innerHeight );
	renderer.setClearColor( 0xffffff, 1 );
	document.body.appendChild( renderer.domElement ); 
	
	var axes = new THREE.AxisHelper( 2 );
	scene.add( axes );
	
	var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 ); 
	camera.up.set( 0, 0, 1 );
	camera.position.set( 3, 3, 3 ); 
	var controls = new THREE.OrbitControls( camera, renderer.domElement );
	
	var planeGeometry = new THREE.PlaneGeometry( 5, 5 );
	var plane = new THREE.Mesh( planeGeometry,
			new THREE.MeshBasicMaterial( { color: 0x000000, side: THREE.DoubleSide } ) );
	plane.rotation.x = eulerX.value;
	plane.rotation.y = eulerY.value;
	scene.add( plane );

	window.addEventListener( 'resize', function() {
		
		renderer.setSize( window.innerWidth, window.innerHeight );
		camera.aspect = window.innerWidth / window.innerHeight;
		camera.updateProjectionMatrix();
		
	} );
	
	// material must be double sided for raycasting from the origin
	var ellipsoidGeometry = new THREE.SphereGeometry( 1, 100, 50 );
	var ellipsoid = new THREE.Mesh( ellipsoidGeometry,
			new THREE.MeshNormalMaterial( { side: THREE.DoubleSide } ) );
	ellipsoid.scale.x = scaleX.value;
	ellipsoid.scale.y = scaleY.value;
	ellipsoid.scale.z = scaleZ.value;

	scene.add( ellipsoid );

	var raycaster = new THREE.Raycaster( );

	function drawIntersection() {

		ellipsoid.updateMatrixWorld(); // updates geometry after scaling

		var points = [], lastVisible = ellipsoid.visible;
		ellipsoid.visible = true // need for raycaster

		var n = new THREE.Vector3( 0, 0, 1 );
		n.applyAxisAngle( new THREE.Vector3( 0, 1, 0 ), eulerY.value );
		n.applyAxisAngle( new THREE.Vector3( 1, 0, 0 ), eulerX.value );

		var t = new THREE.Vector3( 1, 0, 0 );
		t.applyAxisAngle( new THREE.Vector3( 0, 1, 0 ), eulerY.value );
		t.applyAxisAngle( new THREE.Vector3( 1, 0, 0 ), eulerX.value );

		for ( var phi = 0 ; phi < 2*Math.PI ; phi += 2*Math.PI/50 ) {

			var v = t.clone().applyAxisAngle( n, phi );
			raycaster.ray.direction.set( v.x, v.y, v.z );

			var p = raycaster.intersectObject( ellipsoid );
			if ( p.length > 0 ) {
				var v = p[0].point;
				points.push( new THREE.Vector3().set( v.x, v.y, v.z ) );
			}

		}

		points.push( points[0] );

		var curve = new THREE.CatmullRomCurve3( points );
		var geometry = new THREE.TubeGeometry( curve, 100, .015 );
		var material = new THREE.MeshBasicMaterial( {color: 'red' } );

		var mesh =  new THREE.Mesh( geometry, material ) ;
		mesh.name = 'intersection';
		scene.remove( scene.getObjectByName( 'intersection' ) );
		scene.add( mesh );

		ellipsoid.visible = lastVisible;

	}

	function render() {
		
		requestAnimationFrame( render ); 
		renderer.render( scene, camera );

	}
	
	drawIntersection();
	render();

</script>

</body>
</html>
{'fraction_non_alphanumeric': 0.15493435943866002, 'fraction_numerical': 0.027387958352195565, 'mean_word_length': 4.015323496027242, 'pattern_counts': {'":': 0, '<': 77, '<?xml version=': 0, '>': 77, 'https://': 4, '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': '1090746', 'n_tokens_mistral': 3582, 'n_tokens_neox': 3143, 'n_words': 750}