Making the diamond square fractal algorithm infinite

I'm trying to generate an infinite map, as such. I'm doing this in Python, and I can't get the noise libraries to correctly work (they don't seem to ever find my VS2010, and doing it in raw Python would be way too slow). As such, I'm trying to use the Diamond-Square Algorithm.

Would it be possible, in some way, to make this technically 开发者_开发问答infinite?

If not, should I just go back to attempting to get one of the Python noise bindings to work?

This can be done. Divide up your landscape into "tiles", and apply the midpoint displacement algorithm (as I prefer to call it) within each tile.

Each tile must be big enough so that the height at one corner does not significantly depend on the height in another. In that way, you can create and destroy tiles on the fly, setting the height at newly appearing corners to an independent random value.

That value (and the randomness within the tile as well) must be seeded from the tile's position, so that you get the same tile each time.

The latest version of the noise module (at http://pypi.python.org/pypi/noise/1.0b3) mentions that it "fixed problems compiling with Visual C++ on Windows" - you might want to try it again. It installs and works properly for me (Python 2.7.1, MinGW, Windows 7).

If you arrange your tiles in an x,y grid and seed the random number generator for each tile like random.seed((x,y)), then every time you return to the same patch of world it will re-create the same terrain.

With the diamond-square algorithm, two sides of each tile depend on the adjoining tiles; however the dependence does not propagate all the way across the tile. If you let each tile depend on the tiles preceding it (ie above and to the left) and write a create_fake_tile function which assumes that all the preceding-tile values are 0, you get a "bad" tile in which the right column and bottom row are the correct values on which the next tile depends. If you draw each screen starting with the tile row and column preceding the first row and column on screen, then the visible portion of your world will be correct.

Can you apply midpoint displacement from the bottom up? Say you're working on a discrete grid, and you want to generate an MxN region. Get yourself a weighting function w(i). Start by applying a random displacement with weight w(0) to each point. Then apply a random displacement with weight w(1) to every other point, and propagate the displacement to intervening points. Then do every fourth point with w(2), again propagating. You can now generate a grid of any size, without having any starting assumption about the size.

If there's some N for which w(i > N) = 0, then you can stop generating when you hit it - which is rather important if you want the generation to ever terminate! You probably want a w function that starts at 1, increases to some value, and then falls off to zero; the increasing bit models the power-law roughness of terrain up to 100-km or so scales, and the decreasing bit models the fact that whole planets are more or less spherical. If you were doing Mars rather than Earth, you'd want w(i) to go further, because of the Tharsis bulge.

Now replace the random function with a random-looking but deterministic function of the point coordinates (feed the coordinates into a SHA1 hash, for example). Now, whenever you generate some particular part of the grid, it will look the same.

You should be able to do diamond-square in much the same way as this; you just need to alternate the shape of the displacements.

I solved the Diamond Squared algorithm for infinite landscapes.

function diamondSquaredMap(x, y, width, height, iterations) {
    var map = fieldDiamondSquared(x, y, x+width, y+height, iterations);
 
    var maxdeviation = getMaxDeviation(iterations);
    
    for (var j = 0; j < width; j++) {
        for (var k = 0; k < height; k++) {
            map[j][k] = map[j][k] / maxdeviation;
            map[j][k] = (map[j][k] + 1) / 2;
        }
    }
    return map;

    function create2DArray(d1, d2) {
        var x = new Array(d1),
                i = 0,
                j = 0;

        for (i = 0; i < d1; i += 1) {
            x[i] = new Array(d2);
        }
        return x;
    }

    function fieldDiamondSquared(x0, y0, x1, y1, iterations) {
        if (x1 < x0) { return null; }
        if (y1 < y0) { return null; }
        var finalwidth  = x1 - x0;
        var finalheight = y1 - y0;
        var finalmap = create2DArray(finalwidth, finalheight);
        if (iterations === 0) {
            for (var j = 0; j < finalwidth; j++) {
                for (var k = 0; k < finalheight; k++) {
                    finalmap[j][k] =  displace(iterations,x0+j,y0+k) ;
                }
            }
            return finalmap;
        }
        var ux0 = Math.floor(x0 / 2) - 1;
        var uy0 = Math.floor(y0 / 2) - 1;
        var ux1 = Math.ceil(x1 / 2) + 1;
        var uy1 = Math.ceil(y1 / 2) + 1;
        var uppermap = fieldDiamondSquared(ux0, uy0, ux1, uy1, iterations-1);

        var uw = ux1 - ux0;
        var uh = uy1 - uy0;
        
        var cx0 = ux0 * 2;
        var cy0 = uy0 * 2;

        var cw = uw*2-1;
        var ch = uh*2-1;
        var currentmap = create2DArray(cw,ch);

        for (var j = 0; j < uw; j++) {
            for (var k = 0; k < uh; k++) {
                currentmap[j*2][k*2] = uppermap[j][k];
            }
        }
        var xoff = x0 - cx0;
        var yoff = y0 - cy0;
        for (var j = 1; j < cw-1; j += 2) {
            for (var k = 1; k < ch-1; k += 2) {
                currentmap[j][k] = ((currentmap[j - 1][k - 1] + currentmap[j - 1][k + 1] + currentmap[j + 1][k - 1] + currentmap[j + 1][k + 1]) / 4) + displace(iterations,cx0+j,cy0+k);
            }
        }
        for (var j = 1; j < cw-1; j += 2) {
            for (var k = 2; k < ch-1; k += 2) {
                currentmap[j][k] = ((currentmap[j - 1][k]     + currentmap[j + 1][k]     + currentmap[j][k - 1]     + currentmap[j][k + 1]) / 4) + displace(iterations,cx0+j,cy0+k);
            }
        }
        for (var j = 2; j < cw-1; j += 2) {
            for (var k = 1; k < ch-1; k += 2) {
                currentmap[j][k] = ((currentmap[j - 1][k]     + currentmap[j + 1][k]     + currentmap[j][k - 1]     + currentmap[j][k + 1]) / 4) + displace(iterations,cx0+j,cy0+k);
            }
        }

        for (var j = 0; j < finalwidth; j++) {
            for (var k = 0; k < finalheight; k++) {
                finalmap[j][k] = currentmap[j+xoff][k+yoff];
            }
        }
        
        return finalmap;
    }

    // Random function to offset
    function displace(iterations, x, y) {
        return (((PRH(iterations,x,y) - 0.5)*2)) / (iterations+1);
    }
    
    function getMaxDeviation(iterations) {
        var dev = 0.5 / (iterations+1);
        if (iterations <= 0) return dev;
        return getMaxDeviation(iterations-1) + dev;
    }
    //This function returns the same result for given values but should be somewhat random.
    function PRH(iterations,x,y) {
        var hash;
        x &= 0xFFF;
        y &= 0xFFF;
        iterations &= 0xFF;
        hash = (iterations << 24);
        hash |= (y << 12);
        hash |= x;
        var rem = hash & 3;
        var h = hash;

        switch (rem) {
            case 3:
                hash += h;
                hash ^= hash << 32;
                hash ^= h << 36;
                hash += hash >> 22;
                break;
            case 2:
                hash += h;
                hash ^= hash << 22;
                hash += hash >> 34;
                break;
            case 1:
                hash += h;
                hash ^= hash << 20;
                hash += hash >> 2;
        }
        hash ^= hash << 6;
        hash += hash >> 10;
        hash ^= hash << 8;
        hash += hash >> 34;
        hash ^= hash << 50;
        hash += hash >> 12;
        
        return (hash & 0xFFFF) / 0xFFFF;
    }
    
};




//CANVAS CONTROL


window.onload = terrainGeneration;

function terrainGeneration() {
    "use strict";
    var mapDimension,
            roughness,
            iterations,
            mapCanvas = document.getElementById('canvas');

    var update = document.getElementById('update');
    var xpos = 0;
    var ypos = 0;


    mapDimension = 512;
    mapCanvas.width = mapDimension;
    mapCanvas.height = mapDimension;

    var updatefunction = function() {
        var elIterations = document.getElementById('iterations');
        iterations = parseInt(elIterations.value, 10);
        iterations = iterations || 6;
        MoveMap(10,0);
    }
    update.onclick = updatefunction;
    updatefunction();

    function MoveMap(dx, dy) {
        xpos -= dx;
        ypos -= dy;
        var map = diamondSquaredMap(xpos, ypos, mapDimension, mapDimension, iterations);
        drawMap(mapDimension, "canvas", map);
    }

    var m = this;
    m.map = document.getElementById("canvas");
    m.width = mapDimension;
    m.height = mapDimension;

    m.hoverCursor = "auto";
    m.dragCursor = "url(data:image/vnd.microsoft.icon;base64,AAACAAEAICACAAcABQAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAAH/AAAB/wAAA/0AAANsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//+AB///wAf//4AH//+AD///yT/////////////////////////////8=), default";
    m.scrollTime = 300;


    m.mousePosition = new Coordinate;
    m.mouseLocations = [];
    m.velocity = new Coordinate;
    m.mouseDown = false;
    m.timerId = -1;
    m.timerCount = 0;

    m.viewingBox = document.createElement("div");
    m.viewingBox.style.cursor = m.hoverCursor;

    m.map.parentNode.replaceChild(m.viewingBox, m.map);
    m.viewingBox.appendChild(m.map);
    m.viewingBox.style.overflow = "hidden";
    m.viewingBox.style.width = m.width + "px";
    m.viewingBox.style.height = m.height + "px";
    m.viewingBox.style.position = "relative";
    m.map.style.position = "absolute";

    function drawMap(size, canvasId, mapData) {
        var canvas = document.getElementById(canvasId),
                ctx = canvas.getContext("2d"),
                x = 0,
                y = 0,
                colorFill,
                img = ctx.createImageData(canvas.height, canvas.width);

        for (x = 0; x < size; x++) {
            for (y = 0; y < size; y++) {
                colorFill = {r: 0, g: 0, b: 0};
                var standardShade = Math.floor(mapData[x][y] * 250);
                colorFill = {r: standardShade, g: standardShade, b: standardShade};

                var pData = (x + (y * canvas.width)) * 4;
                img.data[pData] = colorFill.r;
                img.data[pData + 1] = colorFill.g;
                img.data[pData + 2] = colorFill.b;
                img.data[pData + 3] = 255;
            }
        }
        ctx.putImageData(img, 0, 0);
    }

    function AddListener(element, event, f) {
        if (element.attachEvent) {
            element["e" + event + f] = f;
            element[event + f] = function() {
                element["e" + event + f](window.event)
            };
            element.attachEvent("on" + event, element[event + f])
        } else
            element.addEventListener(event, f, false)
    }

    function Coordinate(startX, startY) {
        this.x = startX;
        this.y = startY;
    }

    var MouseMove = function(b) {
        var e = b.clientX - m.mousePosition.x;
        var d = b.clientY - m.mousePosition.y;
        MoveMap(e, d);
        m.mousePosition.x = b.clientX;
        m.mousePosition.y = b.clientY
    };

    /**
     * mousedown event handler
     */
    AddListener(m.viewingBox, "mousedown", function(e) {
        m.viewingBox.style.cursor = m.dragCursor;

        // Save the current mouse position so we can later find how far the
        // mouse has moved in order to scroll that distance
        m.mousePosition.x = e.clientX;
        m.mousePosition.y = e.clientY;

        // Start paying attention to when the mouse moves
        AddListener(document, "mousemove", MouseMove);
        m.mouseDown = true;

        event.preventDefault ? event.preventDefault() : event.returnValue = false;
    });

    /**
     * mouseup event handler
     */
    AddListener(document, "mouseup", function() {
        if (m.mouseDown) {
            var handler = MouseMove;
            if (document.detachEvent) {
                document.detachEvent("onmousemove", document["mousemove" + handler]);
                document["mousemove" + handler] = null;
            } else {
                document.removeEventListener("mousemove", handler, false);
            }

            m.mouseDown = false;

            if (m.mouseLocations.length > 0) {
                var clickCount = m.mouseLocations.length;
                m.velocity.x = (m.mouseLocations[clickCount - 1].x - m.mouseLocations[0].x) / clickCount;
                m.velocity.y = (m.mouseLocations[clickCount - 1].y - m.mouseLocations[0].y) / clickCount;
                m.mouseLocations.length = 0;
            }
        }

        m.viewingBox.style.cursor = m.hoverCursor;
    });
}

<html><head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Canvas Terrain Generator</title>
        <link rel="stylesheet" href="terrain.css" type="text/css">
    <style type="text/css"></style><style type="text/css"></style></head>

    <body>
  Click and Pan.<br>
        <div style="cursor: auto; overflow: hidden; width: 512px; height: 512px; position: relative;"><canvas id="canvas" width="512" height="512" style="position: absolute;"></canvas></div>
        <br>
        <form>
            <fieldset>
            <legend>Height Map Properties</legend>
                        <ol class="options">
                            <li>
                                <input type="text" name="iterations" id="iterations">
                                <label for="iterations">
                                    Iterations(6)
                                </label>
                            </li>
                        </ol>
            </fieldset>
            <input type="button" value="Update" id="update">
        </form>
</body></html>

https://jsfiddle.net/Tatarize/1Lrj3s2v/3/ Click and Drag jsfiddle

And actually found this question doing my due diligence. Yes. Though the answers provided here are mostly wrong it totally can be done. Conceptually what you need to do is view each iteration of the algorithm as an infinite field and the base case as an infinite field of perfectly random numbers. So each iteration is a diamond squared version of the previous one.

And to solve a range of say tile [100-200][100-200] at iteration 7, what you need is the entire block half that size (~a quarter that size h*w) at iteration 6 plus one extra edge on each side. So if you have a function that solves for a given tile:

getTerrain(x0,y0,x1,y1,iteration)... you can solve this for that tile if you have [49,101][49,101] at iteration 6. Then you simply apply diamond squared everywhere you can which won't work at the edges but will work everywhere else, and provide you with exactly enough data to solve for the tile [100-200][100-200] at iteration 7.

To get that tile at iteration 6 it will request [23-52][23-52] from iteration 5. And this will continue until iteration 0 just gives you [-1,3][-1,3] which will be 16 perfectly random values. If you requested a tile so large that iteration 0 didn't yet reach that size and position, you'll just need a different sliver which is fine because you're just making them up anyway.

In this way you get rid of the seeding step completely, simplify the algorithm, make it infinite, make it take a reasonable memory footprint. Using a deterministic pseudorandom number hashed from the coords and it will let you generate and regenerate the identical tiles on the fly, because you actually generated the upper lower iterations and just did so in a focused manner.

My blog has more information on it, http://godsnotwheregodsnot.blogspot.com/2013/11/field-diamond-squared-fractal-terrain.html

In reality most of the complication of the algorithm comes from having the base case four points in a loop, as this is not close to the simplest case. And it's apparently escaped most people that you could have even simplified that by doing 1 point in a loop (though this is still pointlessly complex). Or anything that makes the algorithm seem to have at least 4x4 points. You could even start with 4x4 points iterate once, drop any row or column with an unknown value (all the edges), then have a 5x5 block, then a 7x7 block then an 11x11 block... (2n-3) x (2n-3).

In short, if you have an infinite field for your base case, you can actually have an infinite field, the iterations just determine how blended your stuff is. And if you use something deterministic for the pseudorandom injected offset, you pretty much have a very quick infinite landscape generator.

and here's a demonstration of it in javascript, http://tatarize.nfshost.com/FieldDiamondSquare.htm

Here's an implementation in javascript. It simply gives you a view of the correct field at that iteration, position, and size. The above linked example uses this code in a movable canvas. It stores no data and recalculates each frame.

function diamondSquaredMap(x, y, width, height, iterations) {
    var map = fieldDiamondSquared(x, y, x+width, y+height, iterations);
 
    var maxdeviation = getMaxDeviation(iterations);
    
    for (var j = 0; j < width; j++) {
        for (var k = 0; k < height; k++) {
            map[j][k] = map[j][k] / maxdeviation;
        }
    }
    return map;

    function create2DArray(d1, d2) {
        var x = new Array(d1),
                i = 0,
                j = 0;

        for (i = 0; i < d1; i += 1) {
            x[i] = new Array(d2);
        }
        return x;
    }

    function fieldDiamondSquared(x0, y0, x1, y1, iterations) {
        if (x1 < x0) { return null; }
        if (y1 < y0) { return null; }
        var finalwidth  = x1 - x0;
        var finalheight = y1 - y0;
        var finalmap = create2DArray(finalwidth, finalheight);
        if (iterations === 0) {
            for (var j = 0; j < finalwidth; j++) {
                for (var k = 0; k < finalheight; k++) {
                    finalmap[j][k] =  displace(iterations,x0+j,y0+k) ;
                }
            }
            return finalmap;
        }
        var ux0 = Math.floor(x0 / 2) - 1;
        var uy0 = Math.floor(y0 / 2) - 1;
        var ux1 = Math.ceil(x1 / 2) + 1;
        var uy1 = Math.ceil(y1 / 2) + 1;
        var uppermap = fieldDiamondSquared(ux0, uy0, ux1, uy1, iterations-1);

        var uw = ux1 - ux0;
        var uh = uy1 - uy0;
        
        var cx0 = ux0 * 2;
        var cy0 = uy0 * 2;

        var cw = uw*2-1;
        var ch = uh*2-1;
        var currentmap = create2DArray(cw,ch);

        for (var j = 0; j < uw; j++) {
            for (var k = 0; k < uh; k++) {
                currentmap[j*2][k*2] = uppermap[j][k];
            }
        }
        var xoff = x0 - cx0;
        var yoff = y0 - cy0;
        for (var j = 1; j < cw-1; j += 2) {
            for (var k = 1; k < ch-1; k += 2) {
                currentmap[j][k] = ((currentmap[j - 1][k - 1] + currentmap[j - 1][k + 1] + currentmap[j + 1][k - 1] + currentmap[j + 1][k + 1]) / 4) + displace(iterations,cx0+j,cy0+k);
            }
        }
        for (var j = 1; j < cw-1; j += 2) {
            for (var k = 2; k < ch-1; k += 2) {
                currentmap[j][k] = ((currentmap[j - 1][k]     + currentmap[j + 1][k]     + currentmap[j][k - 1]     + currentmap[j][k + 1]) / 4) + displace(iterations,cx0+j,cy0+k);
            }
        }
        for (var j = 2; j < cw-1; j += 2) {
            for (var k = 1; k < ch-1; k += 2) {
                currentmap[j][k] = ((currentmap[j - 1][k]     + currentmap[j + 1][k]     + currentmap[j][k - 1]     + currentmap[j][k + 1]) / 4) + displace(iterations,cx0+j,cy0+k);
            }
        }

        for (var j = 0; j < finalwidth; j++) {
            for (var k = 0; k < finalheight; k++) {
                finalmap[j][k] = currentmap[j+xoff][k+yoff];
            }
        }
        
        return finalmap;
    }

    // Random function to offset
    function displace(iterations, x, y) {
        return (((PRH(iterations,x,y) - 0.5)*2)) / (iterations+1);
    }
    
    function getMaxDeviation(iterations) {
        var dev = 0.5 / (iterations+1);
        if (iterations <= 0) return dev;
        return getMaxDeviation(iterations-1) + dev;
    }

    //This function returns the same result for given values but should be somewhat random.
    function PRH(iterations,x,y) {
        var hash;
        x &= 0xFFF;
        y &= 0xFFF;
        iterations &= 0xFF;
        hash = (iterations << 24);
        hash |= (y << 12);
        hash |= x;
        var rem = hash & 3;
        var h = hash;

        switch (rem) {
            case 3:
                hash += h;
                hash ^= hash << 32;
                hash ^= h << 36;
                hash += hash >> 22;
                break;
            case 2:
                hash += h;
                hash ^= hash << 22;
                hash += hash >> 34;
                break;
            case 1:
                hash += h;
                hash ^= hash << 20;
                hash += hash >> 2;
        }
        hash ^= hash << 6;
        hash += hash >> 10;
        hash ^= hash << 8;
        hash += hash >> 34;
        hash ^= hash << 50;
        hash += hash >> 12;
        
        return (hash & 0xFFFF) / 0xFFFF;
    }
    
};

Updated to add, I went on from this, and made my own noise algorithm based on the same scoped field algorithm here, Here's the Jsfiddle for it.

https://jsfiddle.net/rkdzau7o/

You can click and drag the noise around.