# ashcairo/campuspartyeurope2013webgl

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

# campuspartyeurope2013webgl

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]);

``````

## 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.
``````