NightSky

Night Sky using Fabric.js

by Viichi Surfers

HTML

<title>fabric js example</title>
<body>
    <div class="block">
         <h3>Custom selection style</h3>

        <canvas id="c1" width="400" height="400" style="border:1px solid #000"></canvas>
        <script>
            (function() {
                canvas = new fabric.Canvas('c1');
                canvas.backgroundColor = 'rgb(10,10,10)';
                goStar();

            })();
        </script>
    </div>
</body>

JavaScript

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

var pathObject;
var canvas;
var opac = 0;

function createNewStar(arms, x, y, rOuter, rInner) {
    var angle = Math.PI / arms;
    var pointX, pointY;
    var path;
    for (var i = 0; i < 2 * arms; i++) {
        var r = (i & 1) == 0 ? rOuter : rInner;
        pointX = x + Math.cos(i * angle) * r;
        pointY = y + Math.sin(i * angle) * r;
        if (i == 0) path = "M " + pointX + " " + pointY;
        else path = path + " L " + pointX + " " + pointY;
    }
    path = path + " z";
    pathObject = new fabric.Path(path);
    pathObject.set({
        fill: 'white',
        opacity: 0
    });
    canvas.add(pathObject);
    return pathObject;
}



function goStar() {

    setTimeout(function () {
        var posX = getRandomInt(0, 400);
        var posY = getRandomInt(0, 400);
        var radA = getRandomInt(4, 8);
        var radB = radA / 2;
        var star = createNewStar(5, posX, posY, radA, radB);
        shiningEffectUp(star, canvas, 100, 1 / 100, 0.1, 100);

        posX = getRandomInt(0, 400);
        posY = getRandomInt(0, 400);
        radA = getRandomInt(4, 7);
        radB = radA / 2;
        star2 = createNewStar(5, posX, posY, radA, radB);
        shiningEffectUp(star2, canvas, 100, 1 / 100, 0.1, 100);

        goStar();
    }, 400);

}


function shiningEffectUp(obj, cntxt, counter, step, timegap, length) {
    setTimeout(function () {
        obj.setOpacity(opac);
        obj.remove();

        canvas.add(obj);
        opac = opac + step;
        if (opac > 1) {
            opac = 0
        };
        if (--counter) {
            shiningEffectUp(obj, cntxt, counter, step, timegap, length);
        } else {
            console.log("inside else counter =" + counter);
            counter = length;
            console.log("inside else counter =" + counter);
            opac = 1;
            shiningEffectDown(obj, cntxt, counter, step, timegap,...