[Plugin] Chromanin - Procedural Texture Generation

Edit : update v1.1! (small bugfixes, access to intermediate layers and new demo).

With this update, you can access the various layer used to create the final effect.

You can check the edited demo.

HEre's a screenshot showing you how to create a cloud texture, for example :

<img src="https://dl.dropbox.com/u/1412774/ChromaninTexGenDemo/clouds.png" border="0">

The demo : https://dl.dropbox.com/u/1412774/ChromaninTexGenDemoEditor/index.html

The plugin : https://dl.dropbox.com/u/1412774/ChromaninTexGenDemo/pode_chromanin.1.1.zip

The .capx : https://dl.dropbox.com/u/1412774/ChromaninTexGenDemo/ChromaninTexGenDemoEditor.capx

________________________

Here's a plugin that let you create procedural texture (think Perlin noise, eroding layers, cell machines and all that <img src="smileys/smiley2.gif" border="0" align="middle">)

<img src="https://dl.dropbox.com/u/1412774/ChromaninTexGenDemo/demo.png" border="0">

All the following textures where produced by the plugin :

<img src="https://dl.dropbox.com/u/1412774/ChromaninTexGenDemo/tiles.png" border="0">

It is a port of Chromanin.js for C2 (http://amsqr.github.com/chromanin.js/texgen.html)

I modified the code a bit to let it works under "strict" mode, and do some operations faster. If you spot a bug, don't hesitate to post it here !

The texture are created procedurally, with bit of scripting.

As in the linked example page, you need to specify what you want to do.

For example, the following lines produce the tiles red carpet of the first screenshot :

ch = new Chromanin(256,'canvas1');

ch.initlayers(256,256);

ch.colorLayer(0,255,0,0);

ch.cellMachine(1,1234,99);

ch.kaleidLayer(1,1,1);

ch.tileLayer(1,1);

ch.tileLayer(1,1);

ch.tileLayer(1,1);

ch.addLayers(0,1,4,1,1);

ch.writeCanvas();

As you can see, you can copy-paste scripts straight from the original Chromanin, and they work !

For the first line of each script, you need to keep

ch = new Chromanin(XXX,'YYY');,

but for XXX you can enter any size, my code will discard it, as well as the YYY name. You just need to set the size of your texture first via the "Set Texture size" function call in Construct2.

(Working that way allow you to copy/paste scripts made by others without thinking about it too much).

When the script has finished rendering the texture, you can grab it as a base64 image string, and Load it inside a regular Sprite.

If you want to use some procedural texture (coulds, grass...) in your game, the best would be to generate them during the loading of the game.

If you want to know all the possibilities, you can go to the original editor page : http://amsqr.github.com/chromanin.js/editor.html

The demo : https://dl.dropbox.com/u/1412774/ChromaninTexGenDemo/index.html

The plugin : https://dl.dropbox.com/u/1412774/ChromaninTexGenDemo/pode_chromanin.1.0.zip

The .capx : https://dl.dropbox.com/u/1412774/ChromaninTexGenDemo/ChromaninTexGenDemo.capx

<img src="https://dl.dropbox.com/u/1412774/ChromaninTexGenDemo/qrcode.png" border="0">

Great

thanks

wonderful...Pode,u roxx ^^

Awesome, it's great method to generate textures via scripts!

Wouldn't mind using this but there's like no documentation.

newt : I'm porting the original editor to a C2 project. With that, I think people can begin to use the plugin to create their own textures.

Cool, can't wait.

Looks like its got everything but the kitchen sink.

What a massive bump, sorry.

The subject it pretty interesting, so are there any updates?

Only the chromanin example from that site works for me, sadly the c2 plugin does not (tested in FF 34 and Chrome 40).

would love to see this updated and more procedural generator plugins.

now its working in FF35, wonderful stuff

can someone please reupload the Chromanin demo example, i lost my files:

The .capx : https://dl.dropbox.com/u/1412774/ChromaninTexGenDemo/ChromaninTexGenDemoEditor.capx

Update: I fiddled around with it, without demo. Thanks Pode, nice stuff.

Dead links.. Could someone please upload this one again! Was looking for exactly this!