index.html

<html>
<head>
<script src="js/vector.js"></script>
<script src="js/world.js"></script>
<script src="js/dot.js"></script>
<script src="js/spring.js"></script>
<style>
body, html {margin: 0; width: 100%;background-color: #222222;}
canvas {background-color: #111111;}
</style>
</head>
<body>
    <canvas id = "canv", width="1000px", height="1000px">
    </canvas>
</body>

<script>
    var canv = document.getElementById("canv");
    var ctx = canv.getContext("2d");

    ctx.strokeStyle = "white";
    var gridSize = 75;
    var world = new World(ctx, canv);
    world.dT = 0.3;//FIXME faster than 0.4 leads to problems to be debugged (wrong use of world.dT in objects.js)

    dots = [];
    springs = [];

    randomizeLastSpringLength = (max, min = 0) => {
        //helper function for interesting starts.
        springs[springs.length - 1].distance += Math.random()*max-Math.random()*min
    }

    //create a grid of dots and springs
    const topLeft = new Vector(45, 45)
    for (var j = 0; j < gridSize; j++) {
        dots.push([]);
        for (var k = 0; k < gridSize; k++){
            dots[j].push(world.addObject( new Dot( new Vector( (j+topLeft.x)*15*30/gridSize,(k+topLeft.y)*15*30/gridSize) ) ) );
            if(k > 0) {
                springs.push( new Spring(
                    dots[j][k],
                    dots[j][k-1]
                ) )
                //randomizeLastSpringLength(0);
            }
            if(j > 0) {
                springs.push( new Spring(
                    dots[j-1][k],
                    dots[j][k]
                ) )
                //randomizeLastSpringLength(0);
            }
        }
    }

    function curtainInWind(){
        //create a windy force field
        world.forceField = function(pos){return new Vector(Math.random()/10-Math.random()/20,0.05);};
        //Fix the top row for a curtain-like effect.
        for (var i=0; i < gridSize; i++) dots[i][0].fixed = true
    }


    springs.map( o => world.addObject(o) );
    dots.map( o => o.map( o => world.addObject(o) ) );

function loop () {
        //TODO set world.dT according to time passed since last frame (as I have no guarantee how often requestAnimationFrame is allowed to execute at a time).
        world.update();
        window.requestAnimationFrame(loop);
    }
    window.requestAnimationFrame(loop);

</script>
</html>