{"id":22465438,"url":"https://github.com/schalkt/tgen","last_synced_at":"2025-04-30T15:50:47.485Z","repository":{"id":29601430,"uuid":"33141529","full_name":"schalkt/tgen","owner":"schalkt","description":"Seamless texture generator in javascript","archived":false,"fork":false,"pushed_at":"2025-03-16T08:06:29.000Z","size":5063,"stargazers_count":117,"open_issues_count":1,"forks_count":9,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-23T06:41:49.971Z","etag":null,"topics":["blend","demo","filter","generator","image","javascript","pattern","seamless","texture","tgen","threejs"],"latest_commit_sha":null,"homepage":"http://texture-generator.com/generator/demo","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/schalkt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-03-30T18:52:36.000Z","updated_at":"2025-03-16T08:05:24.000Z","dependencies_parsed_at":"2023-02-14T11:31:44.805Z","dependency_job_id":"6192d4c0-f627-4f08-a114-dd43eaeccebe","html_url":"https://github.com/schalkt/tgen","commit_stats":{"total_commits":198,"total_committers":5,"mean_commits":39.6,"dds":"0.31818181818181823","last_synced_commit":"77d5b774ca55685a5c26a131dd7add1de279cdc3"},"previous_names":[],"tags_count":41,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/schalkt%2Ftgen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/schalkt%2Ftgen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/schalkt%2Ftgen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/schalkt%2Ftgen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/schalkt","download_url":"https://codeload.github.com/schalkt/tgen/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251734546,"owners_count":21635155,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blend","demo","filter","generator","image","javascript","pattern","seamless","texture","tgen","threejs"],"created_at":"2024-12-06T10:08:05.959Z","updated_at":"2025-04-30T15:50:47.456Z","avatar_url":"https://github.com/schalkt.png","language":"JavaScript","readme":"# tgen.js\n\n**Seamless texture generator in Javascript**\n\n[![Paypal Donate](https://img.shields.io/badge/donate-paypal-00457c.svg?logo=paypal\u0026style=flat-square)](https://www.paypal.me/schalkt)\n[![Revolut Badge](https://img.shields.io/badge/donate-revolut-d82c7b?logo=revolut\u0026logoColor=fff\u0026style=flat-square)](https://revolut.me/tams9imtf)\n[![Liberapay Badge](https://img.shields.io/badge/donate-liberapay-f6c915?logo=liberapay\u0026logoColor=f6c915\u0026style=flat-square)](https://liberapay.com/schalkt/)\n\n[![preview](https://img.shields.io/badge/preview-click_here-green.svg?style=flat-square)](https://texture-generator.com/generator/demo/)\n[![npm](https://img.shields.io/npm/dt/seamless-texture-generator.svg?style=flat-square)](https://www.npmjs.com/package/seamless-texture-generator)\n[![GitHub issues](https://img.shields.io/github/issues/schalkt/tgen.svg?style=flat-square)](https://github.com/schalkt/tgen/issues)\n[![npm](https://img.shields.io/npm/v/seamless-texture-generator.svg?style=flat-square)](https://www.npmjs.com/package/seamless-texture-generator)\n\n[![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=schalkt_tgen\u0026metric=sqale_rating)](https://sonarcloud.io/dashboard?id=schalkt_tgen)\n[![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=schalkt_tgen\u0026metric=security_rating)](https://sonarcloud.io/dashboard?id=schalkt_tgen)\n[![Vulnerabilities](https://sonarcloud.io/api/project_badges/measure?project=schalkt_tgen\u0026metric=vulnerabilities)](https://sonarcloud.io/dashboard?id=schalkt_tgen)\n[![Bugs](https://sonarcloud.io/api/project_badges/measure?project=schalkt_tgen\u0026metric=bugs)](https://sonarcloud.io/dashboard?id=schalkt_tgen)\n\n[![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)\n[![CodeQL](https://github.com/schalkt/tgen/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/schalkt/tgen/actions/workflows/codeql-analysis.yml)\n\n## The generator in action\n\n[https://texture-generator.com/generator/demo](https://texture-generator.com/generator/demo/)\n\n\n## Examples\n\n![examples](https://texture-generator.com/generator/demo/images/examples.jpg#20190908)\n\n## Requirements\n\n* running in browser -\u003e Google Chrome, Firefox, Edge (maybe IE 10+, not tested)\n* running under CLI -\u003e node.js [example](https://github.com/schalkt/tgen/blob/master/test/test.js)\n\n## Quick usage and examples\n\n```javascript\n    // initialize the generator\n    var generator = tgen.init(256, 256);\n\n\n    // --- texture 1 --------------------------------------------------------------\n\n    var canvas1 = generator\n            .do('waves')\n            .toCanvas();\n\n    // set img src, and width height\n    $('#img1').attr('src', canvas1.toDataURL(\"image/png\")).css({width: canvas1.width, height: canvas1.height});\n\n\n    // --- texture 2 --------------------------------------------------------------\n\n    var canvas2 = generator\n            .do('fill')\n            .do('waves', {blend: 'difference'})\n            .do('waves', {blend: 'difference'})\n            .do('contrast', {\"adjust\": 50})\n            .toCanvas();\n\n    // set img src, and width height\n    $('#img2').attr('src', canvas2.toDataURL(\"image/png\")).css({width: canvas2.width, height: canvas2.height});\n\n\n    // --- texture 3 --------------------------------------------------------------\n\n    var texture3 = generator\n            .clear() // remove previous layers\n            .do('fill')\n            .do('clouds', {blend: 'difference'})\n            .do('spheres', {blend: 'lineardodge', 'dynamic': true})\n            .do('vibrance', {\"adjust\": 50});\n\n    var canvas3 = texture3.toCanvas();\n\n    // set img src, and width height\n    $('#img3').attr('src', canvas3.toDataURL(\"image/png\")).css({width: canvas3.width, height: canvas3.height});\n\n\n    // --- texture 4 --------------------------------------------------------------\n\n    // get the generated params of texture3\n    var params = texture3.params();\n\n    // get number of layers\n    var layers = params.items.length;\n\n    // change the color of clouds\n    params.items[layers - 3][2].rgba = [255, 50, 10, 0.85];\n\n    // change the blending method\n    params.items[layers - 2][2].blend = 'overlay';\n\n    // generate new texture with modified params of texture3\n    var canvas4 = generator.render(params).toCanvas();\n\n    // set img src, and width height\n    $('#img4').attr('src', canvas4.toDataURL(\"image/png\")).css({width: canvas4.width, height: canvas4.height});\n\n\n    // --- texture 5 --------------------------------------------------------------\n\n    var params = {\n        \"width\":  256, // texture width in pixel\n        \"height\": 256, // texture height in pixel\n        \"debug\": true, // render info to console log, default value: false\n        \"items\":  [\n            [0, \"lines2\", { // layer number and effect name\n                \"blend\": \"opacity\", // layer blend mode\n                \"count\": 21, // square count\n                \"size\":  [5, 15], // random size between 5-15%\n                \"rgba\":  [\n                    255, // fixed red channel\n                    [128, 192], // random green channel between 128 and 192\n                    [200, 255], // random blue channel between 200 and 255\n                    [0.2, 0.6] // random opacity between 0.2 and 0.6\n                ]\n            }],\n            [1, \"spheres\", { // second layer\n                \"blend\":   \"lighten\",\n                \"origin\":  \"random\",\n                \"dynamic\": true, //\n                \"count\":   21,\n                \"size\":    [20, 100],\n                \"rgba\":    [200, 200, 200, 0.7]\n            }],\n            [2, \"copy\", 0], // copy layer 0 to layer 1\n            [2, \"merge\", { // merge layer 1 in to 2\n                \"layer\": 1,\n                \"blend\": \"lighten\"\n            }],\n            [2, \"brightness\", {\"adjust\": -10, \"legacy\": true}], // set brightness\n            [2, \"vibrance\", {\"adjust\": 50}], // set vibrance\n            [2, \"contrast\", {\"adjust\": 50}] // set contrast\n        ]\n    };\n\n    // generate\n    var canvas5 = generator.render(params).toCanvas();\n\n    // set img src, and width height\n    $('#img5').attr('src', canvas5.toDataURL(\"image/png\")).css({width: canvas5.width, height: canvas5.height});\n\n\n    // --- texture 6 --------------------------------------------------------------\n\n    // change layer of texture 5 merge blend method\n    params.items[3] = [2, \"merge\", {\n        \"layer\": 1,\n        \"blend\": \"difference\"\n    }];\n\n    // render and add new effects\n    var canvas6 = generator\n            .render(params)\n            .do('sharpen')\n            .do('noise')\n            .toCanvas();\n\n    // set img src, and width height\n    $('#img6').attr('src', canvas6.toDataURL(\"image/png\")).css({width: canvas6.width, height: canvas6.height});\n\n\n    // --- available effects -------------------------------------------------------\n\n    // dump all effects and default config parameters\n    for (key in tgen.defaults) {\n\n        var params = tgen.defaults[key];\n        var item = $('\u003cspan\u003e\u003ch2\u003e' + key + '\u003c/h2\u003e' + JSON.stringify(params) + '\u003c/span\u003e');\n        $('.defaults').append(item);\n\n    }\n```\n\n### Available blends [demo here](https://texture-generator.com/generator/demo/blends.html)\n\n![blends](https://texture-generator.com/generator/demo/images/blends.jpg#20190908)\n\n### Available effects [demo here](https://texture-generator.com/generator/demo/effects.html)\n\n![effects](https://texture-generator.com/generator/demo/images/effects.jpg#20190908)\n\n### Available filters [demo here](https://texture-generator.com/generator/demo/filters.html)\n\n![filters](https://texture-generator.com/generator/demo/images/filters.jpg#20190908)\n\n### Available color normalize [demo here](https://texture-generator.com/generator/demo/normalize.html)\n\n![normalize](https://texture-generator.com/generator/demo/images/normalize.jpg#20190908)\n\n### Available other options\n\n* map (cool effect)\n* merge (copy layer with blend)\n* copy (copy layer without blend)\n* rotate (by angle, by times, by blend)\n\n### Available events while rendering\n\n```javascript\ntexture.render(params, function(event, data){\n    console.log(event, data);\n});\n```\n\n* beforeRender\n* afterRender\n* beforeEffect\n* afterEffect\n\n## License\n\nMIT\n\n## Thank you and greetings to\n\n* BoyC/Conspiracy - [a.D.D.i.c.t 2](http://conspiracy.hu/release/tool/addict2/)\n* mrdoob - [texgen.js](https://github.com/mrdoob/texgen.js)\n* [Ace](http://ace.c9.io/) - The High Performance Code Editor\n\n## Build\n\n* Node.js 12 recommended\n* `npm install`\n* `npm run dev` for development release\n* `npm run prod` for production release\n\n## Todo\n\n* fix rotate type 2 (blank pixels)\n* alphamap\n* plasma\n* fractals, mandelbrot (WIP)\n* more shapes\n* sprites\n* electricity\n* image import\n* tgen().target('#mycanvas').params({})\n* copy from outer canvas\n* more examples\n* fix colorbar mirror : false (black image)\n* [cubemap-toastmap-generator](https://jonaszeitler.se/cubemap-toastmap-generator/)\n* https://github.com/jaxry/panorama-to-cubemap\n* https://www.patreon.com/posts/36130209","funding_links":["https://www.paypal.me/schalkt","https://liberapay.com/schalkt/","https://www.patreon.com/posts/36130209"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fschalkt%2Ftgen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fschalkt%2Ftgen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fschalkt%2Ftgen/lists"}