Merging a lot of squares

A crash test for the versatile ClipperJS geometric library. A grid made by 128x128 square cells is populated, creating a square with a probability of 90% or a hole in the remaining 10%. The squares are then merged to create a single region, that is finally displayed in a zoomable SVG.

The heaviest operation turns out to be the merging (surprise!), taking the vast majority of the execution time (you can open a JavaScript console to see when each operation begins).

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Merging a lot of squares" />
        <title>Merging a lot of squares</title>
        <link type="text/css" href="index.css" rel="stylesheet"/>
        <script src="https://d3js.org/d3.v3.min.js"></script>
        <script src="https://jsclipper.sourceforge.net/6.1.3.1/clipper.js"></script>
    </head>
    <body>
        <svg height="500" width="960"></svg>
        <script src="index.js"></script>
    </body>
</html>
    

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://jsclipper.sourceforge.net/6.1.3.1/clipper.js to a secure url

https://d3js.org/d3.v3.min.js

https://jsclipper.sourceforge.net/6.1.3.1/clipper.js