PIXI Paint

[TR-i]

I've been trying to learn how to use RenderTexture. At first I misunderstood how it works (thought you could draw to it multiple times, but it simply erases itself every time there's a new draw). I stumbled on a thread where someone was trying to paint with PIXI and there was not much support for it.

It dawned on me that it can be done, and it isn't super-complicated. The result is a bit crude but easily improvable. To keep it modular, I've built it into a object:

 

function pixipaint(w, h, c){ //width, height, color
	const me = new PIXI.Container();
	me.back = new PIXI.Graphics();
	me.back.beginFill(0xCCCCCC, 1); //background color
	me.back.drawRect(0,0,w,h);
	me.back.endFill();
	me.addChild(me.back);
	me.rt1 = new PIXI.RenderTexture.create({width: w, height: h});
	s = new PIXI.Sprite(me.rt1);
	me.canvas1 = new PIXI.Container();
	me.canvas1.addChild(s);
	me.brush1 = new PIXI.Graphics();
	me.brush1.beginFill(0xFFFFFF,1);
	me.brush1.drawEllipse(0,0,16,16);
	me.brush1.endFill();
	me.brush1.tint =c;
	me.brush1.visible = false;
	me.canvas1.addChild(me.brush1);
	me.addChild(me.canvas1);
	me.addChild(me.brush1);
	me.rt2 = new PIXI.RenderTexture.create({width: w, height: h});
	s = new PIXI.Sprite(me.rt2);
	me.canvas2 = new PIXI.Container();
	me.canvas2.addChild(s)
	me.brush2 = me.brush1.clone();
	me.brush2.tint = c;
	me.brush2.visible = false;
	me.canvas2.addChild(me.brush2);
	me.addChild(me.canvas2);
	me.interactive = true;
	me.dragging = false;
	me.target = 1;
	me.paint = function(p){
		me.brush1.x = p.x;
		me.brush1.y = p.y;
		me.brush1.visible = true;
		me.brush2.position = me.brush1.position;
		me.brush2.visible = true;
		if(me.target === 1){
			app.renderer.render(me.canvas1, me.rt2);
			me.target = 2;
		}
		else{
			app.renderer.render(me.canvas2, me.rt1);
			me.target = 1;
		}
	}
	me.startpaint = function(e){
		me.paint(e.data.getLocalPosition(me.parent));
		me.dragging = true;
	}
	me.stoppaint = function(e){
		me.brush1.visible = false;
		me.brush2.visible = false;
		me.dragging = false;
	}
	me.dopaint = function(e){
		if(!me.dragging){return;}
		me.paint(e.data.getLocalPosition(me.parent));
	}
	me
		.on('pointerdown', me.startpaint)
		.on('pointerup', me.stoppaint)
		.on('pointermove', me.dopaint);
	me.pivot.x = w/2;
	me.pivot.y = h/2;
	me.position.x = window.innerWidth / 2;
	me.position.y = window.innerheight / 2;
	app.stage.addChild(me);
}

 

Edited September 8, 2021 by TR-i
errata