3d-terrain-generator.html

<!DOCTYPE html>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
    <script>
        //this is fork1
        new p5();
        let cls, rws;
        let sc = 10;
        let width = window.innerWidth;
        let height = window.innerHeight;
        
        let terrain = [];
        
        let flying = 0;
        let terrainR = -100;
        function setup () {
            cls = width*2 / sc;
            rws = height*2 / sc;
            
             
        
            for(let x = 0; x < cls; x++) {
                terrain[x] = [];
                for(let y = 0; y < rws - 1; y++) {
                    terrain[x][y] = 0; //specify default value for now.
                }
            }
            angleMode(DEGREES);
            createCanvas(width,height,WEBGL);
           
            noFill();
            strokeWeight(0.25)
            stroke(250,50);
            fill(0,150);
            // fill(255);
        }
       
        function draw () {
            terrainR += 1;
            flying -= 0.51;
            var yoff = flying;
            for (var y = 0; y < rws; y++) {
                var xoff = 0;
                for (var x = 0; x < cls; x++) {
                    terrain[x][y] = map(noise(xoff, yoff), 0, 1, -100, 100);
                    xoff += 0.2;
                }
                yoff += 0.2;
            }
            background(50,100,200);
            // translate(width/2,height/2);
            rotateX(80);
            translate(-width,-height);
            for(let y = 0; y < rws; y++) {
                beginShape(TRIANGLE_STRIP);
                for(let x = 0; x < cls; x++) {
                    // camera(0.0)
                    // vertex(x*sc, y*sc,terrain[x][y]);
                    // vertex(x*sc, (y+1)*sc, terrain[x][y+1]);
                    vertex(x*sc, y*sc, terrain[x][y]);
                    vertex(x*sc, (y+1)*sc, terrain[x][y+1]);
                }
                endShape();
            }
        }
    </script>
</html>