circle-rectangle intersection

by 蔡 育曄

HTML

<h1 style="text-align:center">
  Homework 4
</h1><hr>
<div id="container" style="float:left;width:45vw;height:45vw;background-color:pink">
  <canvas id="mycanvas"></canvas>
</div>
Radius<input type=range min=5 max=20  id='radius' value="10"><br>
Sound <input type="checkbox" id='sound' > <br>
 <button id='switch'>Start/Pause</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

CSS

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

body {
  overflow: hidden;
}

JavaScript

class Circle {
	constructor(radius) {
  	this.pos = new THREE.Vector3();
    this.vel = new THREE.Vector3();
    this.force = new THREE.Vector3();
    this.mesh = this.initCircle(radius);  
  } 
  
  initCircle(radius) {
  	this.vel.set ( -5 + Math.random() * 10,-5 + Math.random() *10, 0);
    this.radius =radius;
  	let circle =  new THREE.Mesh(new THREE.CylinderGeometry(radius,radius,2,64),new THREE.MeshBasicMaterial({color:0x005bef}));
  	circle.rotation.x = Math.PI/2;
  	circle.position.set(Math.random()*80 - 40,Math.random()*80 - 40,0);
    scene.add(circle);
    return circle;
     
  }
  
  update(dt) {
  	this.pos.add (this.vel.clone().multiplyScalar(dt));
    this.collidingWalls ();
    
    this.mesh.position.copy (this.pos)
  }
  
  collidingWalls() {
  	if(Math.abs(this.pos.x)>50-2-this.radius){
    	this.vel.x *= -1;
    }
    if(Math.abs(this.pos.y)>50-2-this.radius){
    	this.vel.y *= -1;
    }
  }
  
}

var camera, scene, renderer;
var rec, circle;
var raycaster, pickables = [];
var mouse = new THREE.Vector2();
var isOn = true;

init();
animate();

$('#switch').click(function() {
  isOn = !isOn; 
});

$('#radius').change ( function() {
  scene.remove(circle.mesh);
	circle.mesh = circle.initCircle($('#radius').val());
})

function init() {

	 var ww = $("#container").innerWidth();
  var hh = $("#container").innerHeight();
  var cc = document.getElementById('mycanvas');
  renderer = new THREE.WebGLRenderer({
    canvas: cc,
    antialias: true
  });
  renderer.setSize(ww, hh);
  renderer.setClearColor(0xffffff);
  //document.body.appendChild(renderer.domElement);
  
  scene = new THREE.Scene();
  camera = new THREE.OrthographicCamera(-50, 50, 50, -50, -10, 100);
  camera.position.z = 10;

	let grid = new THREE.GridHelper (200,20, 'red','white');
	//scene.add (grid)
  //grid.rotation.x = Math.PI/2
  
  rec = new THREE.Mesh(new THREE.BoxGeometry(20,10,2),new THREE.MeshBasicMaterial({color:0xc8a633}));
  scene.add(rec)
  
  raycaster = new...