Example of Ray casting against OBB
HTML
<!DOCTYPE html><html><head><title>raycast</title></head><body><canvas id="canvas" width="500" height="500" style="border:1px solid #d3d3d3;"></canvas></body></html>
JavaScript
function convertYUp(v){
return v * -1.0;
}
function toRadians (angle) {
return angle * (Math.PI / 180);
}
class Vector{
constructor(x, y){
this.x = x ;
this.y = y;
}
subtract(vec){
return new Vector(this.x-vec.x, this.y-vec.y);
}
add(vec){
return new Vector(this.x+vec.x, this.y+vec.y);
}
multiply(value){
return new Vector(this.x*value, this.y*value);
}
dot(vec){
return this.x*vec.x + this.y*vec.y;
}
dividedBy(value) {
return new Vector(this.x / value, this.y / value, this.z / value);
}
length() {
return Math.sqrt(this.dot(this));
}
unit() {
return this.dividedBy(this.length());
}
}
class RotatingRectangle{
constructor(pos, size){
this.size = size;
this.pos = pos;
this.xAxis = new Vector(1, 0);
this.yAxis = new Vector(0, convertYUp(1));
this.rotatedXAxis = null;
this.rotatedYAxis = null;
this._angle = 0;
this._cos = 0;
this._sin = 0;
}
get angle(){
return this._angle;
}
addAngle(value){
this._angle += value;
this._cos = Math.cos(toRadians(this._angle));
this._sin = Math.sin(toRadians(this._angle));
this.rotatedXAxis = this.rotatePointAroundCenter(this.xAxis, new Vector(0, 0));
this.rotatedYAxis = this.rotatePointAroundCenter(this.yAxis, new Vector(0, 0));
}
get left(){
return this.pos.x - this.size.x;
}
get right(){
return this.pos.x + this.size.x;
}
get top(){
return this.pos.y - this.size.y;
}
get bottom(){
return this.pos.y + this.size.y;
}
rotatePointAroundCenter(point, center){
center = center || this.pos;
let temp = point.subtract(center);
let x = temp.x * this._cos - temp.y * this._sin;
let y = temp.x * this._sin + temp.y * this._cos;
return new Vector(x + center.x,...