Sampling problem when i draw in a bitmap

[nunziox]

I have the same problem that there is in this example: http://examples.phaser.io/_site/view_full.html?d=display&f=bitmapdata+draw.js&t=bitmapdata%20draw

 

When I move the mouse very quickly, not all the pixels are plotted!

 

How can i resolve this problem?

[charlie_says]

This should work for you:

// var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update });function preload() {    //game.load.image('ball', 'assets/sprites/shinyball.png');}var bmd;var start, end, inter;function create() {	bmd = game.add.bitmapData(800, 600);	bmd.context.fillStyle = 'rgba(255, 0, 0, 0.3)';	//	Add the bmd as a texture to an Image object.	//	If we don't do this nothing will render on screen.	game.add.sprite(0, 0, bmd);	start = new Phaser.Point();	end = new Phaser.Point()	inter = new Phaser.Point();	}function update() {	if (game.input.activePointer.isDown)	{		end.x = game.input.activePointer.position.x;		end.y = game.input.activePointer.position.y;		if (start.x != 0 && start.y !=0 )		{			var dist = end.distance(start, true)			var steps = 30;		//	var step = dist / steps;			for (var i = 0; i < steps; i++)			{							Phaser.Point.interpolate(start, end, i/steps, inter)				bmd.context.fillRect(inter.x, inter.y, 20, 20);			}				} else {					}		bmd.context.fillRect(game.input.activePointer.position.x, game.input.activePointer.position.y, 20, 20);		start.x =end.x;		start.y =end.y;				//	Because we're changing the context manually, we need to tell Phaser the texture is dirty.		//	You only need to do this in WebGL mode. In Canvas it's not needed.		bmd.dirty = true;	}}

[GNUton]

You will always get sparse points, depending on the input device resolution you use and how quick is the HW/SW you use to draw your lines.

 

My suggested solution would be:

Option 1 - Draw a line between two consecutive points. In this case, the thickness of the brush could help a lot to smooth the line 

Option 2 - Curve fitting???  Interpolate a curve which pass by N consecutive points to achieve a smooth curve.

http://paulbourke.net/miscellaneous/interpolation/

[charlie_says]

If you try the above, you can change the lines to

var steps = 30;var step = dist / steps;for (var i = 0; i < step; i++){				Phaser.Point.interpolate(start, end, i/step, inter)...

which allows you to fill the gaps (admittedly only with straight lines.)