Home/ Questions/Q 4339376
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T11:12:29+00:00

I need some math advice… Or, at least I think i do. I have

  • 0

I need some math advice… Or, at least I think i do.

I have a set of elements in my database which represents objects (like phyisical objects) with a position (x,y,z). These positions can be totally random, like object A has a position of 1532,3512,1500 and B has a position of 2421,4612,1234.

I’m trying to create a graphical map (using CSS) of the objects in 2D. So only the X and Y coords are being used. The map I want to draw on has a specific width and height. Now here’s the tricky part: I want the map to scale with the size of the map. Like, when there are 2 objects where one is at coord: 1,1 and the other on coord 3,3, I want object one to be in the top left corner of the map and the other in the bottom right.

So, here’s an example of my elements (objects):

database elements:
  - [1] => x: 1254, y: 1642
  - [2] => x: 2311, y: 2361
  - [3] => x: 1732, y: 2351
  - [4] => x: 1436, y: 3323

First, I take the minimum and maximum values of these elements to create a formula which lets the coords start at 0,0 and go from there.

so, let’s say the minumum x-value is 1254 in this example and Y is 1642.
I go in a for loop and do the following:

foreach( $this->db as $item )
{
    $x = $this->value_x_max - $item['x'];
    $y = $this->value_y_max - $item['y'];
}

The map size is 720×480 pixels. How do I create a formula which spreads out my objects across the map. It is important that the objects don’t go outside the map boundaries but also needs to be spread out. So if 2 objects have positions 1,1 and 1,2 for example, they need to be in the top left and bottom left corners.

Can anyone help me out with this?

Any help and advise appriciated!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this, but be aware, it’s just a realy quick and dirty raw sketch of what came to my mind. But maybe it’s enough to give you a jump start:

    <?php
$elements = array(
    array('x' => 1254, 'y' => 1642),
    array('x' => 2311, 'y' => 2361),
    array('x' => 1732, 'y' => 2351),
    array('x' => 1436, 'y' => 3323),
);

$mapWidth = 720;
$mapHeight = 480;
$blockWidth = 10;
$blockHeight = 10;

$minimumX = $minimumY = $maximumX = $maximumY = null;
foreach ($elements as $element) {
    if ($minimumX === null || $element['x'] < $minimumX) {
        $minimumX = $element['x'];
    }
    if ($minimumY === null || $element['y'] < $minimumY) {
        $minimumY = $element['y'];
    }
    if ($maximumX === null || $element['x'] > $maximumX) {
        $maximumX = $element['x'];
    }
    if ($maximumY === null || $element['y'] > $maximumY) {
        $maximumY = $element['y'];
    }
}

foreach ($elements as $i => $element) {
    $elements[$i]['x'] -= $minimumX;
    $elements[$i]['y'] -= $minimumY;
}

$fx = ($mapWidth - $blockWidth) / ($maximumX - $minimumX);
$fy = ($mapHeight - $blockHeight) / ($maximumY - $minimumY);
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>2D</title>
        <style type="text/css">
            body {
                background: black;
            }

            #map {
                position: relative;

                margin: 20px auto;

                width: <?php echo $mapWidth; ?>px;
                height: <?php echo $mapHeight; ?>px;

                background: grey;
            }

            .dot {
                position: absolute;

                width: <?php echo $blockWidth; ?>px;
                height: <?php echo $blockHeight; ?>px;

                background: lightblue;
            }
        </style>
    </head>

    <body>
        <div id="map">
            <?php
                foreach ($elements as $element) {
                    printf(
                        '<div class="dot" style="left: %.1fpx; top: %.1fpx;"></div>',
                        $element['x'] * $fx,
                        $element['y'] * $fy
                    );
                }
            ?>
        </div>
    </body>
</html>
    • 0