https://github.com/schalkt/tgen

Seamless texture generator in javascript
https://github.com/schalkt/tgen

blend demo filter generator image javascript pattern seamless texture tgen threejs

Last synced: 12 months ago
JSON representation

Seamless texture generator in javascript

Host: GitHub
URL: https://github.com/schalkt/tgen
Owner: schalkt
License: mit
Created: 2015-03-30T18:52:36.000Z (about 11 years ago)
Default Branch: master
Last Pushed: 2025-03-16T08:06:29.000Z (about 1 year ago)
Last Synced: 2025-04-23T06:41:49.971Z (about 1 year ago)
Topics: blend, demo, filter, generator, image, javascript, pattern, seamless, texture, tgen, threejs
Language: JavaScript
Homepage: http://texture-generator.com/generator/demo
Size: 4.83 MB
Stars: 117
Watchers: 7
Forks: 9
Open Issues: 1
Metadata Files:
- Readme: README.md
- License: LICENSE
- Security: SECURITY.md

Awesome Lists containing this project

README

          # tgen.js

**Seamless texture generator in Javascript**

[![Paypal Donate](https://img.shields.io/badge/donate-paypal-00457c.svg?logo=paypal&style=flat-square)](https://www.paypal.me/schalkt)

[![Revolut Badge](https://img.shields.io/badge/donate-revolut-d82c7b?logo=revolut&logoColor=fff&style=flat-square)](https://revolut.me/tams9imtf)

[![Liberapay Badge](https://img.shields.io/badge/donate-liberapay-f6c915?logo=liberapay&logoColor=f6c915&style=flat-square)](https://liberapay.com/schalkt/)

[![preview](https://img.shields.io/badge/preview-click_here-green.svg?style=flat-square)](https://texture-generator.com/generator/demo/)

[![npm](https://img.shields.io/npm/dt/seamless-texture-generator.svg?style=flat-square)](https://www.npmjs.com/package/seamless-texture-generator)

[![GitHub issues](https://img.shields.io/github/issues/schalkt/tgen.svg?style=flat-square)](https://github.com/schalkt/tgen/issues)

[![npm](https://img.shields.io/npm/v/seamless-texture-generator.svg?style=flat-square)](https://www.npmjs.com/package/seamless-texture-generator)

[![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=schalkt_tgen&metric=sqale_rating)](https://sonarcloud.io/dashboard?id=schalkt_tgen)

[![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=schalkt_tgen&metric=security_rating)](https://sonarcloud.io/dashboard?id=schalkt_tgen)

[![Vulnerabilities](https://sonarcloud.io/api/project_badges/measure?project=schalkt_tgen&metric=vulnerabilities)](https://sonarcloud.io/dashboard?id=schalkt_tgen)

[![Bugs](https://sonarcloud.io/api/project_badges/measure?project=schalkt_tgen&metric=bugs)](https://sonarcloud.io/dashboard?id=schalkt_tgen)

[![Node.js CI](https://github.com/schalkt/tgen/actions/workflows/node.js.yml/badge.svg)](https://github.com/schalkt/tgen/actions/workflows/node.js.yml)

[![CodeQL](https://github.com/schalkt/tgen/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/schalkt/tgen/actions/workflows/codeql-analysis.yml)

## The generator in action

[https://texture-generator.com/generator/demo](https://texture-generator.com/generator/demo/)

## Examples

![examples](https://texture-generator.com/generator/demo/images/examples.jpg#20190908)

## Requirements

* running in browser -> Google Chrome, Firefox, Edge (maybe IE 10+, not tested)

* running under CLI -> node.js [example](https://github.com/schalkt/tgen/blob/master/test/test.js)

## Quick usage and examples

```javascript

    // 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 = $('
' + key + '' + JSON.stringify(params) + '');

        $('.defaults').append(item);

    }

```

### Available blends [demo here](https://texture-generator.com/generator/demo/blends.html)

![blends](https://texture-generator.com/generator/demo/images/blends.jpg#20190908)

### Available effects [demo here](https://texture-generator.com/generator/demo/effects.html)

![effects](https://texture-generator.com/generator/demo/images/effects.jpg#20190908)

### Available filters [demo here](https://texture-generator.com/generator/demo/filters.html)

![filters](https://texture-generator.com/generator/demo/images/filters.jpg#20190908)

### Available color normalize [demo here](https://texture-generator.com/generator/demo/normalize.html)

![normalize](https://texture-generator.com/generator/demo/images/normalize.jpg#20190908)

### 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 while rendering

```javascript

texture.render(params, function(event, data){

    console.log(event, data);

});

```

* beforeRender

* afterRender

* beforeEffect

* afterEffect

## License

MIT

## Thank you and greetings to

* BoyC/Conspiracy - [a.D.D.i.c.t 2](http://conspiracy.hu/release/tool/addict2/)

* mrdoob - [texgen.js](https://github.com/mrdoob/texgen.js)

* [Ace](http://ace.c9.io/) - The High Performance Code Editor

## Build

* Node.js 12 recommended

* `npm install`

* `npm run dev` for development release

* `npm run prod` for production release

## Todo

* fix rotate type 2 (blank pixels)

* alphamap

* plasma

* fractals, mandelbrot (WIP)

* more shapes

* sprites

* electricity

* image import

* tgen().target('#mycanvas').params({})

* copy from outer canvas

* more examples

* fix colorbar mirror : false (black image)

* [cubemap-toastmap-generator](https://jonaszeitler.se/cubemap-toastmap-generator/)

* https://github.com/jaxry/panorama-to-cubemap

* https://www.patreon.com/posts/36130209

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/schalkt/tgen

Awesome Lists containing this project

README

' + key + '