Have ideas to improve npm?Join in the discussion! »

    seamless-texture-generator

    1.3.5 • Public • Published

    tgen.js

    Seamless texture generator in Javascript

    preview npm GitHub issues Build Status npm Maintainability Rating Security Rating Vulnerabilities Bugs

    The generator in action

    https://texture-generator.com/generator/demo

    Examples

    examples

    Requirements

    • running in browser -> Google Chrome, Firefox, Edge (maybe IE 10+, not tested)
    • running under CLI -> node.js example

    Quick usage and examples

        // initialize the generator
        var generator = tgen.init(256, 256);
    
    
        // --- texture 1 --------------------------------------------------------------
    
        var canvas1 = generator
                .do('waves')
                .toCanvas();
    
        // set img src, and width height
        $('#img1').attr('src', canvas1.toDataURL("image/png")).css({width: canvas1.width, height: canvas1.height});
    
    
        // --- texture 2 --------------------------------------------------------------
    
        var canvas2 = generator
                .do('fill')
                .do('waves', {blend: 'difference'})
                .do('waves', {blend: 'difference'})
                .do('contrast', {"adjust": 50})
                .toCanvas();
    
        // set img src, and width height
        $('#img2').attr('src', canvas2.toDataURL("image/png")).css({width: canvas2.width, height: canvas2.height});
    
    
        // --- texture 3 --------------------------------------------------------------
    
        var texture3 = generator
                .clear() // remove previous layers
                .do('fill')
                .do('clouds', {blend: 'difference'})
                .do('spheres', {blend: 'lineardodge', 'dynamic': true})
                .do('vibrance', {"adjust": 50});
    
        var canvas3 = texture3.toCanvas();
    
        // set img src, and width height
        $('#img3').attr('src', canvas3.toDataURL("image/png")).css({width: canvas3.width, height: canvas3.height});
    
    
        // --- texture 4 --------------------------------------------------------------
    
        // get the generated params of texture3
        var params = texture3.params();
    
        // get number of layers
        var layers = params.items.length;
    
        // change the color of clouds
        params.items[layers - 3][2].rgba = [255, 50, 10, 0.85];
    
        // change the blending method
        params.items[layers - 2][2].blend = 'overlay';
    
        // generate new texture with modified params of texture3
        var canvas4 = generator.render(params).toCanvas();
    
        // set img src, and width height
        $('#img4').attr('src', canvas4.toDataURL("image/png")).css({width: canvas4.width, height: canvas4.height});
    
    
        // --- texture 5 --------------------------------------------------------------
    
        var params = {
            "width":  256, // texture width in pixel
            "height": 256, // texture height in pixel
            "debug": true, // render info to console log, default value: false
            "items":  [
                [0, "lines2", { // layer number and effect name
                    "blend": "opacity", // layer blend mode
                    "count": 21, // square count
                    "size":  [5, 15], // random size between 5-15%
                    "rgba":  [
                        255, // fixed red channel
                        [128, 192], // random green channel between 128 and 192
                        [200, 255], // random blue channel between 200 and 255
                        [0.2, 0.6] // random opacity between 0.2 and 0.6
                    ]
                }],
                [1, "spheres", { // second layer
                    "blend":   "lighten",
                    "origin":  "random",
                    "dynamic": true, //
                    "count":   21,
                    "size":    [20, 100],
                    "rgba":    [200, 200, 200, 0.7]
                }],
                [2, "copy", 0], // copy layer 0 to layer 1
                [2, "merge", { // merge layer 1 in to 2
                    "layer": 1,
                    "blend": "lighten"
                }],
                [2, "brightness", {"adjust": -10, "legacy": true}], // set brightness
                [2, "vibrance", {"adjust": 50}], // set vibrance
                [2, "contrast", {"adjust": 50}] // set contrast
            ]
        };
    
        // generate
        var canvas5 = generator.render(params).toCanvas();
    
        // set img src, and width height
        $('#img5').attr('src', canvas5.toDataURL("image/png")).css({width: canvas5.width, height: canvas5.height});
    
    
        // --- texture 6 --------------------------------------------------------------
    
        // change layer of texture 5 merge blend method
        params.items[3] = [2, "merge", {
            "layer": 1,
            "blend": "difference"
        }];
    
        // render and add new effects
        var canvas6 = generator
                .render(params)
                .do('sharpen')
                .do('noise')
                .toCanvas();
    
        // set img src, and width height
        $('#img6').attr('src', canvas6.toDataURL("image/png")).css({width: canvas6.width, height: canvas6.height});
    
    
        // --- available effects -------------------------------------------------------
    
        // dump all effects and default config parameters
        for (key in tgen.defaults) {
    
            var params = tgen.defaults[key];
            var item = $('<span><h2>' + key + '</h2>' + JSON.stringify(params) + '</span>');
            $('.defaults').append(item);
    
        }

    Available blends demo here

    blends

    Available effects demo here

    effects

    Available filters demo here

    filters

    Available color normalize demo here

    normalize

    Available other options

    • map (cool effect)
    • merge (copy layer with blend)
    • copy (copy layer without blend)
    • rotate (by angle, by times, by blend)

    Available events

    • beforeRender
    • afterRender
    • beforeEffect
    • afterEffect

    License

    MIT

    Thank you and greetings to

    Build

    • Node.js 12 recommended
    • npm install
    • gulp dev for development release
    • gulp prod for production release

    Todo

    Install

    npm i seamless-texture-generator

    DownloadsWeekly Downloads

    1

    Version

    1.3.5

    License

    MIT

    Unpacked Size

    1.41 MB

    Total Files

    144

    Last publish

    Collaborators

    • avatar