Onedayitwillmake

NYC Programmer Mario Gonzalez's blog

Video of 2.5D Javascript/WebGL PortalGun

I’m in the middle of adding a Portal gun to chuclone - There are still a few kinks in it, namely related to determining the side of the object the Portal gun hits, and converting the 3D position of your shot into 2D cordinates so that it shoots exactly where you aimed. However I have it far along enough to show a video of it in action!

Here you can see me messing around with the gun, as well as trying out a couple of simple level ideas that come with it.
Mostly the momentum based puzzles, as those were my favorite in Portal. However I kind of wonder if i should add switches as well – that might be kind of cool.

Getting the angle between two 3D vectors

Another short post related to a question I was asked, that I figure might be helpful to others.
Getting the angle between two vectors in 2D is as simple as:

var angle = Math.atan2(vectorA.y - vectorB.y, vectorA.x - vectorB.x)

However that does not work in 3D space, however the angle between any two vectors (2D or 3D) is defined as the

cosine theta = (A dot B) / Normalized-A * Normalized-B

Where theta is the angle between them. To find theta, we can inverse the equation:

theta = acos( (A dot B) / Normalized-A * Normalized-B )

In code getting the angle between two vectors in 3D space translates to:

// Make up two vectors
var vectorA = new Vector3(5, -20, -14);
var vectorB = new Vector3(-1, 3, 2);
 
// Store some information about them for below
var dot = vectorA.dot(vectorB);
var lengthA = vectorA.length();
var lengthB = vectorB.length();
 
// Now to find the angle
var theta = Math.acos( dot / (lengthA * lengthB) ); // Theta = 3.06 radians or 175.87 degrees

Rotate vector / line-segment / polygon around arbitrary point

Someone asked me this earlier today, and i made this code snippet and I figured i might as well share it and save it for myself.

To rotate a vector, or for that matter a linesegment (which is just two vectors), and again a polygon (which is just n linesegments). All you have to do is first translate the points so that their origin is at zero. Using a linesegment as an example, that means finding the midpoint between A and B, which is (A + B)/2 then subtracting A and B by -midpoint. Then applying cosine/sine for the x/y components respectively.

Here is an example of that – it’s in javascript but you get the idea.

rotateLinesegment: function(pointA, pointB, angle, center) {
 
	// Find the mid-point between A and B - i make a copy of pointA just to be safe
        if( !center ) {
	    var center = pointA.Copy();
           center.Add( pointB );
	   center.Multiply( 0.5 );
        }
 
	var na = pointA.Copy();
	na.Subtract(center);
 
	var nb = pointB.Copy();
	nb.Subtract(center);
 
	// Rotate each component in the vector by angle
	var rotateVector = function( v, angle ) {
		var s = Math.sin(angle);
		var c = Math.cos(angle);
 
		var nx = c * v.x - s * v.y;
		var ny = s * v.x + c * v.y;
 
		v.x = nx;
		v.y = ny;
	};
 
	// Rotate, then untranslate it back to center
	rotateVector(na, angle);
	na.Add( center );
 
	// Rotate, then untranslate it back to center
	rotateVector(nb, angle);
	nb.Add( center );
 
	pointA = na;
	pointB = nb;
 
	return {pointA: pointA, pointB: pointB}
}

That’s for rotating a linesegment.

To rotate a polygon you have to make a single tiny change.
Instead of calculating the center by finding the midpoint between line AB, pass the center of the polygon.

How do you find the barycenter/centroid of the polygon. It’s actually pretty simple. The barycenter for a polygon with N points, is found by simply adding up all the points, and dividing by the number of points.
For example pointA.x + pointB.x + pointC.x / 3 = center.x, repeat for Y

Once you have the barycenter, pass that as the value for center, and rotate as shown above, and then add all points by that value. If you want to rotate around an arbitrary point in the polygon simple subtract all the points by that value instead.

var center = new Vector2d(0,0);
 
// Each polygon is made up of N linesegments, each linesegment is made up of 2 points
for(var i = 0; i < polygon.linesegments.length; i++) {
    center.x += polygon.linesegments[i].a.x;
    center.y += polygon.linesegments[i].a.y;
 
    center.x += polygon.linesegments[i].b.x;
    center.y += polygon.linesegments[i].b.y;
}
// averaging it out, will give us the center of the polygon - (note multiplying length by 2 because we did it twice for each linesegment)
center.x /= polygon.linesegments.length*2;
center.y /= polygon.linesegments.length*2;
 
// Rotate each linesegment
var angle = 45 * Math.PI/180; // 45 degrees in radians
for(i = 0; i < polygon.linesegments.length; i++) {
    var line = polygon.linesegments[i];
    var newAB = this.rotateLine(line.a, line.b, angle, center);
 
    line.a = newAB.a;
    line.b = newAB.b;
}