Campus Party 2013 - WebGL Tutorial
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
lesson06-original
lesson06a
lesson06b
lesson06c
lesson06d
README.md

README.md

campuspartyeurope2013webgl

More info and accompanying slides can be found here

http://blog.softwareispoetry.com/2013/09/campus-party-europe-getting-into-3d-and.html

To run the code, you'll need to serve the files from a server.

In the talk I was serving the files from a xampp installation of Apache.

http://www.apachefriends.org/en/xampp.html

You can find the full set of tutorials at the learningwebgl.com website.

The lesson we covered was lesson 6.

lesson6a

Rather than rotate the cube, we use yRot to make the cube go up and down.

mat4.translate(mvMatrix, [xRot, yRot, z]);

//mat4.rotate(mvMatrix, degToRad(xRot), [1, 0, 0]);
//mat4.rotate(mvMatrix, degToRad(yRot), [0, 1, 0]);

lesson6b

We move the cube back in the negative z plane, and restrict it's movement to the edges of the screen.

var speedDelta = 1000.0;

if( yPos > 20 )
{
    if( ySpeed < 0 )
    {
        yPos += (ySpeed * elapsed) / speedDelta;
    }
}
else if( yPos < -20 )
{
    if( ySpeed > 0 )
    {
        yPos += (ySpeed * elapsed) / speedDelta;
    }
}
else
{
    yPos += (ySpeed * elapsed) / speedDelta;
}

if( xPos > 20 )
{
    if( xSpeed < 0 )
    {
        xPos += (xSpeed * elapsed) / speedDelta;
    }
}
else if( xPos < -20 )
{
    if( xSpeed > 0 )
    {
        xPos += (xSpeed * elapsed) / speedDelta;
    }
}
else
{
    xPos += (xSpeed * elapsed) / speedDelta;
}

lesson 6c

Here we attempted to draw multiple cubes by creating a Player class and putting xPos and yPos variables inside.

for( var i=0; i<players.length; ++i )
{
	drawPlayer( player[i] );
}
```
Note: I've left two lines of code in the drawPlayer function commented out. If you comment them in, you'll see how the push/pop matrix stack operations affect the drawing states.



lesson 6d
---------
Some collision code is introduced to block intersections.
```
function canMove(player)
{
	var playerSize = 1.5;
	var minX = player.xPos - playerSize;
	var maxX = player.xPos + playerSize;
	var minY = player.yPos - playerSize;
	var maxY = player.yPos + playerSize;

	for( var i=0; i<players.length; ++i )
	{
	    var opponent = players[i];
	    if( player !== opponent )
	    {
	        var oppMinX = opponent.xPos - playerSize;
	        var oppMaxX = opponent.xPos + playerSize;
	        var oppMinY = opponent.yPos - playerSize;
	        var oppMaxY = opponent.yPos + playerSize;

	        if( maxX >= oppMinX && minX <= oppMaxX )
	        {
	            if( maxY >= oppMinY && minY <= oppMaxY )
	            {
	                return false;
	            }
	        }
	    }
	}
	return true;
}
```
BONUS: See if you can improve on the code to allow for movement away after a collision is made.