(newbie) Procedurally generated 2D images

[undavide]

Hello,

please bear with me for I'm totally noob - just to put things in perspective, the path which has led me here is:

Photoshop HTML Panels > WebGL > Pixi.js > this very forum.

(HTML Panels run on Chromium Embedded Framework, so WebGL seems to be a viable option)

 

I'd like to ask to you experienced people whether Pixi.js can be used to generate bitmaps (2D stuff, e.g. procedural textures: I dig things like Perlin noise, etc) or there's some other framework you know about that can better fit my needs. I know WebGL is mostly about 3D but I've been reading this one which suggests that 2D is perfectly possible.

I've followed few tutorials out there - sheer WebGL stuff - lots of code to draw just a 2D triangle - so I've thought to follow the framework path; yet I've not run into any documentation that can be the WebGL version of this one.

Is it Pixi.js suitable? Could you please point me to some specific 2D documentation / snippet, etc or suggest a better path?

Thanks in advance!

 

Davide

[bubamara]

Hi,

 

Pixi.js is rendering engine - that means, it is displaying textured/untextured triangles on screen. 

 

Above mentioned Gregg Tavares made several great tutorials, explaining whole proccess of displaying stuff with WebGL : http://games.greggman.com/game/category/webgl/

It is quite tedious process as you have read.

 

This is where Pixi.js comes - it handles all this things for you : from initializing WebGL renderer to displaying things on screen.

 

To answer your question : no, Pixi.js isn't suitable to generate bitmaps. It can display these bitmaps for you on the screen using WebGL or canvas

[undavide]

Hi,

thanks for the reply - so if Pixi.js can't do the job, what would I need? As far as I can tell from my limited knowledge in the topic, I should write Shaders to procedurally generate textures - that will be used by pixi.js or some other framework (or by hand) - am I right?

Coming from Photoshop I'm having a bit of hard times - WebGL is mostly 3D and animations, while I need 2D, still imagery (which processing is GPU accelerated). I know it can be done but it's difficult to find a learning path avoiding unnecessary parts.

Thank you,

 

Davide

[d13]

You can use canvas. Here's how to access and manipulate individual pixels :

 

http://beej.us/blog/data/html5s-canvas-2-pixel/

 

Then use fractal and cellular automata algorithms to generate bitmaps procedurally:

 

http://natureofcode.com/book/chapter-7-cellular-automata/

[undavide]

You can use canvas. Here's how to access and manipulate individual pixels :

 

Thanks d13 - but canvas '2d' context isn't hardware accelerated - that's the why I was up to WebGL. For that, the link I wrote in the first post (asserttrue) would already be enough. Anyway, thanks for the links, especially the second one looks interesting!

[bubamara]

What exactly are you trying to achieve? 

 

You can write your own shaders, which will be GPU accelerated (using OpenGL Shading Language - GLSL) :

 

http://glsl.heroku.com/

https://www.shadertoy.com/