baseball project

buttons

by Alvin Chen

HTML

<div id="info">Pitching
<br> Modify the code so that
<br> one can change the release angle
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r76/three.min.js"></script>

CSS

#info {
  position: absolute;
  top: 2%;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffff00
}

body {
  overflow: hidden;
}

JavaScript

// 2D version: assume origin at pitching rubber
// Facts:
// 1.home plate to pitching rubber: 60'6" (18.44 meters)
// 2. weight of baseball (http://www.funtrivia.com/askft/Question9763.html)
//    144 grams, 2.9 inches (7.36cm) in diameter
// 3. g: 9.8 m/s^2
// 4. release velocity: assume 150 km/h (41.6 m/s)
//    Hr (release height): 2 meters
//    Xr (relase position): 2 meters

var scene, renderer, camera;
var ball;
var pos, vel, force;
var clock = new THREE.Clock();

init();
animate();

function init() {

	scene = new THREE.Scene();
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0xaaaaaa);
  document.body.appendChild(renderer.domElement);

  camera = new THREE.OrthographicCamera(-5, 25, 15, -15, -10,10);
  camera.position.z = 5;

	var ground = new THREE.Mesh (new THREE.PlaneGeometry (30,15), new THREE.MeshBasicMaterial({color:0x444444}));
  ground.position.set (10,-15,0);
  scene.add (ground);
  
  var geometry = new THREE.CircleGeometry(0.37,20);
  var material = new THREE.MeshBasicMaterial({
    wireframe: true
  });

  ball = new THREE.Mesh(geometry, material);
  scene.add(ball);

	// 2D ball state variables: pos, vel, force
	pos = new THREE.Vector2 (2, 2);  // xr = 2.0, lr = 2.0
  vel = new THREE.Vector2 (41.6, 0); // vr = 41.6
  force = new THREE.Vector2(0, -9.8);
  
  window.addEventListener('resize', onWindowResize, false);
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

function update (dt) {

  if (pos.x > 24)
  	return;

	vel.add (force.clone().multiplyScalar (dt/0.144));
  pos.add (vel.clone().multiplyScalar(dt));
    
  ball.position.set (pos.x, pos.y, 0);
}

function animate() {

	var dt = clock.getDelta ();
  update(dt);
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}