This article is about a small PHP Class that I wrote this week. The idea was to create a first person website for a virtual tour or a street view functionality. So I created the First Person View Class which allows you to move in four directions with four different angles through a map matrix loaded with images.
The public methods provided by this class are:
- firstPersonView($map, $curX = 0, $curY = 0, $curAng = 0, $path = “”) – constructor, needs at least the map matrix with the images (there’s an example in the end of the post). You should also provide the X, Y position and the angle (0, 90, 180, 270). The last parameter is the path to the image files.
- checkForward() and moveForward() – check if it’s possible to move forward and the actual move method.
- checkBack() and moveBack() – same thing, but moving backwards.
- checkRight() and moveRight() – same thing, but moving right.
- checkLeft() and moveLeft() – same thing, but moving left.
- checkTurnRight() and turnRight() – same thing, but turning right – changes the angle.
- checkTurnLeft() and turnLeft() – same thing, but turning left – changes the angle.
Download the class with the example: fpv.zip
Example
To instantiate the class you need to provide a matrix variable with coordinates and angles, like this:
$map[X][Y][Angle] = "image";
So, an example with 4 positions would be:
$map[0][1][0] = "1-0.jpg"; $map[0][1][90] = "1-90.jpg"; $map[0][1][180] = "1-180.jpg"; $map[0][1][270] = "1-270.jpg"; $map[1][1][0] = "2-0.jpg"; $map[1][1][90] = "2-90.jpg"; $map[1][1][180] = "2-180.jpg"; $map[1][1][270] = "2-270.jpg"; $map[1][0][0] = "3-0.jpg"; $map[1][0][90] = "3-90.jpg"; $map[1][0][180] = "3-180.jpg"; $map[1][0][270] = "3-270.jpg"; $map[1][2][0] = "4-0.jpg"; $map[1][2][90] = "4-90.jpg"; $map[1][2][180] = "4-180.jpg"; $map[1][2][270] = "4-270.jpg";
We can put the coordinates inside a table to have a graphical description of what this code is doing:
2 | X | 4-0.jpg 4-90.jpg 4-180.jpg 4-270.jpg |
1 | 1-0.jpg 1-90.jpg 1-180.jpg 1-270.jpg |
2-0.jpg 2-90.jpg 2-180.jpg 2-270.jpg |
0 | X | 3-0.jpg 3-90.jpg 3-180.jpg 3-270.jpg |
0 | 1 |
You can see that we have only 4 positions in this example with 16 images, representing each angle of each position. You still need to create an HTML where you will have a form or some links with query strings where you can execute the class methods. Here is the HTML file that comes in the example:
<?php require_once('fpv.class.php'); // MAP MATRIX $map[0][1][0] = "1-0.jpg"; $map[0][1][90] = "1-90.jpg"; $map[0][1][180] = "1-180.jpg"; $map[0][1][270] = "1-270.jpg"; $map[1][1][0] = "2-0.jpg"; $map[1][1][90] = "2-90.jpg"; $map[1][1][180] = "2-180.jpg"; $map[1][1][270] = "2-270.jpg"; $map[1][0][0] = "3-0.jpg"; $map[1][0][90] = "3-90.jpg"; $map[1][0][180] = "3-180.jpg"; $map[1][0][270] = "3-270.jpg"; $map[1][2][0] = "4-0.jpg"; $map[1][2][90] = "4-90.jpg"; $map[1][2][180] = "4-180.jpg"; $map[1][2][270] = "4-270.jpg"; if (isset($_POST["current_angle"])) { $fpv = new firstPersonView($map, $_POST["current_x"], $_POST["current_y"], $_POST["current_angle"], "images"); } else { $fpv = new firstPersonView($map, 0, 1, 0, "images"); } if($_POST['go-forward']) { $fpv->goForward(); } else if($_POST['go-back']) { $fpv->goBack(); } else if($_POST['go-left']) { $fpv->goLeft(); } else if($_POST['go-right']) { $fpv->goRight(); } else if($_POST['turn-right']) { $fpv->turnRight(); } else if($_POST['turn-left']) { $fpv->turnLeft(); } ?> <html> <head> <title>First Person View Class - Example</title> </head> <body> <p>Please go to <a href="http://oscardias.com/php/php-class-first-person-view/">http://oscardias.com/php/php-class-first-person-view/</a> if ou need more info. </p> <form name="movements" action="example.php" method="post"> <input type="submit" name="turn-left" value="Turn Left" <?php echo ($fpv->checkTurnLeft())?"":"disabled"; ?>/> <input type="submit" name="go-left" value="Move Left" <?php echo ($fpv->checkLeft())?"":"disabled"; ?>/> <input type="submit" name="go-forward" value="Move Forward" <?php echo ($fpv->checkForward())?"":"disabled"; ?>/> <input type="submit" name="go-back" value="Move Back" <?php echo ($fpv->checkBack())?"":"disabled"; ?>/> <input type="submit" name="go-right" value="Move Right" <?php echo ($fpv->checkRight())?"":"disabled"; ?>/> <input type="submit" name="turn-right" value="Turn Right" <?php echo ($fpv->checkTurnRight())?"":"disabled"; ?>/> <!-- BEGIN IMPORTANT HIDDEN INFO --> <input type="hidden" name="current_x" value="<?php echo $fpv->currentX; ?>" /> <input type="hidden" name="current_y" value="<?php echo $fpv->currentY; ?>" /> <input type="hidden" name="current_angle" value="<?php echo $fpv->currentAngle; ?>" /> <!-- END IMPORTANT HIDDEN INFO --> </form> <img id="view" src="<?php $fpv->currentView() ?>" /> </body> </html>
Now the demo is online. You can check it in: http://oscardias.com/other/fpv/example.php
Notes
This is the first version of the class. I did’n have time to detail it too much, but if you’re interested in it, leave your comment. I’ll dedicate more time to it ;-).
This class has been approved in the PHPClasses.org website with a notable package notification. The direct link to the package is http://www.phpclasses.org/package/6460.html.