CODEWITHSUNDEEP
javascriptphpjqueryhtmlperformance
NFSpeedy
NFSpeedy

Reputation: 171

Big grid with minimum of 1000000 divs

My idea is to create a big number of divs using php or js. (I write js since yesterday.)

So my self given task is to generate a grid of divs using php or js or both. The idea so far is to have one general div as row and small cells inside. First I determine using php variable how long the row must be and after that I define the number of rows [easy so far]. My problem comes when I generate my grid. Using only php is VERY slow so I decided to use js as well. My first try resulted in cutting the time in half but still slow. So I asked myself is there a way to divide the work of js? Well yes... using functions of course! So I made a function called sector and tried to call it. It worked but still too slow. So what are the best practices for doing such a thing?

    <?php
$rowWidth = 200;                                  // width in pixels
$rowHeight = 100;                                 // height in pixels
$boxWidth = 1;                                  // box width in pixels
$boxHeight = 1;                                 // box height in pixels
?>
<body>
    <script>
    function sector(sector) {
        for (var i = 0*sector; i < (<?php echo $rowHeight / 100 ?> + 100*sector); i++) { // trying to manage sectors
            var div = document.createElement('div');
            // set style
            div.style.width = '<?php echo $rowWidth ?>';
            div.style.height = '<?php echo $boxHeight ?>';
            div.style.background = 'red';
            div.setAttribute('class', 'row'); // and make a class for future css (for now using inline css set by js)
            div.setAttribute('id', 'row'+i); // and make an id selector
            document.body.appendChild(div);
            for (var e = 0; e < <?php echo $rowWidth ?>; e++) {
                var box = document.createElement('div');
                // set style
                box.style.width = '<?php echo $boxWidth ?>';
                box.style.height = '<?php echo $boxHeight ?>';
                box.style.float = 'left';
                box.style.background = 'pink';
                box.setAttribute('class', 'box'); // and make a class for future css (for now using inline css set by js)
                box.setAttribute('id', 'box'+e); // and make an id selector
                document.getElementById('row'+i).appendChild(box); // joining my row
            }
        }
    }
    <?php for ($sector=0; $sector < ($rowWidth / 100) ; $sector++) { ?>
        //calling all sectors, calling all sectors... please report
        sector(<?php echo $sector+1 ?>);
    <?php } ?>
    </script>
</body>

UPDATE: This looks similar to my idea.

http://www.businessinsider.com/reddit-place-april-fools-experiment-creates-pixel-art-final-version-2017-4

How did they make it?

Upvotes: 0

Views: 862

Answers (1)

trincot
trincot

Reputation: 350365

If your purpose is to display an image where you will set the individual pixels, then you will get better results with a canvas element.

Here is a little demo:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);

function draw() {
    ctx.putImageData(imgData, 0, 0);
}

function setPixel(x, y, red, green, blue) {
    var offset = (y * canvas.width + x) * 4;
    imgData.data[offset] = red;
    imgData.data[offset+1] = green;
    imgData.data[offset+2] = blue;
    imgData.data[offset+3] = 255; // opacity
}

// Example: set some green pixels along a line
for (var i = 0; i < 200; i++) {
    setPixel (i, i >> 2, 0, 128, 0);
}
draw(); // display the result.
<canvas id="canvas" width="500" height="180"></canvas>

Your PHP script should set the width and height attributes of the canvas element (HTML), and provide the coordinates and corresponding color codes to pass to setPixel(). Obviously it will important to let PHP provide that information in a concise format to minimise traffic.

If your database could store bitmap format, then you could just load that with an <img src="..."> element and be done. The next best would be that your database stores the data as vectors, and you would only have to draw some lines and rectangles, which is less resource-requiring than having to pass & plot each pixel.

Upvotes: 3

Related Questions