jQuery Minangular

by stichoza

HTML

<div class="form-horizontal">
    <div class="xx"></div>
    <div>
        <label for="color">color</label>
        <input type="color" id="color" value="#92c92a" />
    </div>
    <div>
        <label for="size">size</label>
        <input type="number" id="size" value="100" />
    </div>
    <div>
        <label for="distort">distort</label>
        <input type="number" id="distort" value="75" />
    </div>
    <div>
        <label for="width">width</label>
        <input type="number" id="width" value="500" />
    </div>
    <div>
        <label for="height">height</label>
        <input type="number" id="height" value="500" />
    </div>
    <div>
        <label for="shadeMin">shadeMin</label>
        <input type="number" id="shadeMin" value="-50" />
    </div>
    <div>
        <label for="shadeMax">shadeMax</label>
        <input type="number" id="shadeMax" value="50" />
    </div>
    <div>
        <button>Generate</button>
    </div>
</div>
<!-- Here comes the magic -->
<div id="triangles"></div>

CSS

* {
    font-family: Consolas, monospace;
}
.form-horizontal {
    width: 200px;
    margin: 10px;
}
.form-horizontal > div {
    margin: 2px;
    padding: 2px;
    clear: both;
}
input {
    float: right;
    width: 100px
}
label {
    width: 100px;
}
button {
    width: 100%;
}

JavaScript

(function ($) {
    $.fn.minangular = function (options) {

        var settings = $.extend({
            color: "#00ff00",
            colorDistort: 0.75,
            width: 500,
            height: 500,
            size: 50,
            shadeMin: -70,
            shadeMax: 70,
            distort: 40,
            forceEdges: true
        }, options);

        var shadeRGBColor = function (color, percent) {
            var num = parseInt(color.slice(1), 16),
                amt = Math.round(2.55 * percent),
                R = (num >> 16) + amt,
                G = (num >> 8 & 0x00FF) + amt,
                B = (num & 0x0000FF) + amt;
            return "#" + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 + (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 + (B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1);
        };

        var getColor = function (i, j, countX, countY) {
            //var percent = Math.round(Math.random() * (settings.shadeMax - settings.shadeMin) + settings.shadeMin) * (Math.random() - 0.5) * ((i + j) / 2);
            var percent = (200 * (i + j)) / (countX + countY) - 50;
            percent *= Math.random() * settings.colorDistort;
            percent = -percent;
            return shadeRGBColor(settings.color, percent);
        };

        var graph = {
            nodes: [],
            edges: []
        };

        this.html('');
        
        var canvas = $('<canvas></canvas>')
            .attr('height', settings.height)
            .attr('width', settings.width)
            .appendTo(this)[0];

        if (!canvas.getContext) {
            console.error('Cannot get canvas context');
            return false;
        }
        
        
        var countX = Math.ceil((settings.width + settings.distort) / settings.size);
        var countY = Math.ceil((settings.height + settings.distort) / settings.size);
        
        
        var randomX;
        var randomY;
        
        for (var i = 0; i < countX+1; i++) {
         ...