PHP

PHP Class: First Person View

PHP 7 Comments

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.

  • David

    It’s a great project, I loved it.

  • Monotoba

    Hi Oscar,

    What would be really cool is if you could provide hot-spot methods. That way you could make things like switches operate. The other feature that would be nice would be to add a [Z] height parameter. That way one could go up and down stairs. But all in all it is cool!

    A simple map builder would be a nice added feature as well.

    • Hi Monotoba,

      I already have the map builder in my to-do list. Now I’m certainly going to add the hot-spot and height parameter! Great ideas!

      Thanks!

  • Awesome stuff, going to play with it over the weekend. I might port this to Ruby eventually, will let you know.

    Good job

  • Is there a demo somewhere? I’d like to see what it looks like in practice.

  • Pingback: PHP Class: First Person View | caching proxy|anonymous browsing()