[Question] Pixel array render

[Ptitclem]

Hi,

First, great work with Pixi.js, I really like the simplicity of it so far.

I have a new need : render a 2D array of colors (RGBA or RGB at least). The goal is to render procedural 2D textures like Perlin noise.

 

Is this feasible with Pixi.js ?
If yes how to do it efficiently ? If no is this in the roadmap ?

 

Thanks in advance for your answers.

_______________

Clement

 

[P.Uri.Tanner]

Ezelia might already have solved your task:

http://www.html5gamedevs.com/topic/518-hack-making-all-2d-drawing-functions-available-to-pixi/

[Ptitclem]

Great, got it working without any problem.
Here is my code (using the Draw function by Ezelia).

Thanks.

 

	//drawing procedural texture and use it as a PIXI sprite	var sprite = new PIXI.Sprite(PIXI.Texture.Draw(function (canvas) {		//we are now in a 2D context		//you need to specify your canvas width and height otherwise it'll have a size of 0x0 and you'll get an empty sprite		canvas.width = 800;   		canvas.height = 600;		var ctx = canvas.getContext('2d');  //get  canvas 2D context				ctx.fillStyle = "black";		ctx.fillRect(0,0,canvas.width,canvas.height); 		var pix = ctx.createImageData(canvas.width, canvas.height);		for (var y = 0; y < canvas.height; y++) {			for (var x = 0; x < canvas.width; x++) {				var colorRGBA = getColor(x,y);				pix.data[inc++] = colorRGBA.r;				pix.data[inc++] = colorRGBA.g;				pix.data[inc++] = colorRGBA.b;				pix.data[inc++] = colorRGBA.a;			}		} 		ctx.putImageData(pix, 0, 0);			}));

[Ezelia]

glad to see my solution useful for someone else code

 

I was not sure to suggest it as a pull request since it's more like a workaround than real solution  ... in my case I mainly used it to draw 2D shapes