Jump to content

[Question] Pixel array render


Recommended Posts


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.




Link to comment
Share on other sites

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



	//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);			}));
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...