https://github.com/magnusthor/demolishedtexture
Generate procedural textures in GLSL-Shader way. Use with demolished or standaone
https://github.com/magnusthor/demolishedtexture
graphics pixel procedural-textures shaders
Last synced: about 1 month ago
JSON representation
Generate procedural textures in GLSL-Shader way. Use with demolished or standaone
- Host: GitHub
- URL: https://github.com/magnusthor/demolishedtexture
- Owner: MagnusThor
- Created: 2018-03-19T11:15:34.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2019-11-11T11:09:12.000Z (over 6 years ago)
- Last Synced: 2025-11-11T10:31:53.100Z (9 months ago)
- Topics: graphics, pixel, procedural-textures, shaders
- Language: JavaScript
- Homepage: https://magnusthor.github.io/demolishedTexture/example/
- Size: 62.5 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# demolishedTexture
Generate procedural textures in GLSL-Shader way or use plain vanilla Canvas API's to create your textures.
At https://magnusthor.github.io/demolishedTexture/editor/ you can find a tiny editor that allows you to fiddle with demolishedTexture.
## Install using NPM
npm install demolishedtexture
## Documentation
Brief documentation of demolishedTexture. More to come thou.
## Create a texture using TextureBase
Like in a "shader" the generator calles the "callback" function (fn) provided to the generator by createTexture(w,h,fn) or render(fn) for each pixel (x,y) of your texture. The callback *fn* must have the following signature (pixel, x, y, w, h) where the arguments are as follows, it must return an Array of RGB(a)
fn(pixel:Array, x:number, y:numer, w:number, h:number,v:Array):Array
**pixel** is red, green and blue RGB channel for the current pixel (x,y)
**x,y** is the current coordinate of the pixel.
**w,h** is the with and hight of the texture.
**v** Vector coorinate i.e -1,-1,0 for the current pixel
The function (fn) is inherited (bound) the the TextureBase descibed above, there you can find functions such as PerlinNoise ( noise)
### Example ( Javascript )
****
var instance = DemolishedTextureGen.createTexture(512, 512, function (pixel, x, y, w, h,v) {
var n = this.noise(x / 45, y / 120, .89);
n = Math.cos(n * 15);
r = Math.round(n * 255);
b = 255 - r;
g = r - 255;
return [r, g, b];
});
## Create a texture using Canvas API's
In addition to the procedual textures you can use the HTML5 Canvas JavaScript API's to render textures / images.
fn(ctx,w,h):Array
**ctx** is the CanvasRenderingContext2D to use for drawinig operations.
**w** is the width of the texture.
**h** is the width of the texture.
var instance = DemolishedCanvasTextureGen.createTexture(512, 512, (ctx, w, h) => {
ctx.save();
ctx.fillStyle = "#fff";
let dx = w / 2;
let dy = h / 2;
ctx.strokeStyle = "#fff";
ctx.lineWidth = 10;
var sx = Math.random() * 2;
var sy = Math.random() * 2;
ctx.translate(sx, sy);
ctx.strokeRect(20, 20, 512 - 40, 512 - 40);
ctx.stroke();
ctx.font = "120px 'Arial'";
ctx.fillText("SUPER", 40, 220, w);
ctx.font = "bold 154px 'Arial'";
ctx.fillText("HANNA", 35, 370, w);
ctx.restore();
return ctx;
});
## Get the rendered texture as Base64
toBase64():string
## Get the rendered texture as a Blob
toBlob( (b:Blob) => {}): void
# Links
https://magnusthor.github.io/demolishedTexture/example/index.html
https://magnusthor.github.io/demolishedTexture/editor/index.html