how to change the speed of a drawing on a bitmapData ?

[pat]

Hello all,

 

This short code works well.

I am calculating 4 points and I connect them with a dotted line.

I draw them on a bitmapData

 

My problem is this one.

I want to slow down the drawing and for example 

draw a point (wait 1 second), draw a second point (wait another second), draw another point (wait another second) and then draw the lines.

The waiting time can be giving by a slider.

And of course, during all this time, I want to be able to click on the slider to change the speed of the animation.

is it possible or not, because I am drawing on the bitmapData.

 

Thanks for your help

 

Patrick

window.onload = function () {    var SCREEN_WIDTH = 800;    var SCREEN_HEIGHT = 600;    // array of points    var points = [];    // lineDashOffset    var dashOffset = 1;    var game = new Phaser.Game(SCREEN_WIDTH, SCREEN_HEIGHT, Phaser.AUTO, '', { create: create, update: update});    // We draw circle and lines directly on the bitmapdata bmd    var bmd;    function create() {        game.stage.backgroundColor = '#FFFFFF';        // we create and add the bitmapData        bmd = game.add.bitmapData(SCREEN_WIDTH, SCREEN_HEIGHT);        game.add.sprite(0, 0, bmd);        // calculate 4 points        for (var i = 0; i < 4; i++) {            points[i] = [                [Math.random() * SCREEN_WIDTH],                [Math.random() * SCREEN_HEIGHT]            ];        }    }    function update() {        // erase bitmapData        bmd.clear();        test();    }    function test() {        //  we draw lines        bmd.ctx.beginPath();        bmd.ctx.lineWidth = '1';        bmd.ctx.setLineDash([5, 5]);        bmd.ctx.lineDashOffset = dashOffset;        dashOffset++;        bmd.ctx.strokeStyle = "green"; // Green path        for (var i = 1; i < points.length; i++) {            bmd.ctx.moveTo(points[i - 1][0], points[i - 1][1]);            bmd.ctx.lineTo(points[i][0], points[i][1]);            bmd.ctx.stroke(); // Draw it        }        // to remove dashed line        bmd.ctx.setLineDash([0, 0]);        bmd.ctx.lineDashOffset = 0;        // we draw circles        for (i = 0; i < points.length; i++) {            bmd.ctx.beginPath();            bmd.ctx.arc(points[i][0], points[i][1], 3, 0, Math.PI * 2);            bmd.ctx.fillStyle = 'Red';            bmd.ctx.fill();            bmd.ctx.lineWidth = 1;            bmd.ctx.strokeStyle = 'FireBrick';            bmd.ctx.stroke();        }    }}

[lewster32]

Sadly it's not just a case of 'slowing down' the drawing routines, you'd probably have to implement your own line drawing routines using tweens or similar. It'd be a pretty involved process to do this; and to then have it controllable would be even trickier!

 

There're some interesting techniques here that work on pointer movement - if you could somehow set up a series of tweens which moved a virtual pointer between the four points you could make use of something like these techniques to create a nice effect:

 

http://perfectionkills.com/exploring-canvas-drawing-techniques/

[pat]

Thanks a lot for your answer, but it is not I am waiting for.

In fact my problem is this one. I calculate a lot of points and for each point, I want to be able to calculate a new bitmapData (I can do that) and to force the update/refresh of this bitmapData

function create() {        game.stage.backgroundColor = '#FFFFFF';        // we create and add the bitmapData        bmd = game.add.bitmapData(SCREEN_WIDTH, SCREEN_HEIGHT);        game.add.sprite(0, 0, bmd);        // calculate 4 points        for (var i = 0; i < 4; i++) {            points[i] = [                [Math.random() * SCREEN_WIDTH],                [Math.random() * SCREEN_HEIGHT]            ];            CALCULATE A NEW BITMAP DATA (I can do it)            FORCE REFRESH (is it possible ??)            WAIT A SECOND  (is it possible ??)        }    }

[lewster32]

Rather than try and explain this, I'll provide a fiddle for how I'd do it: http://jsfiddle.net/lewster32/qvLe2qrf/

[pat]

AARRGGHH

exactly what I wanted.

You save my day             

I think that there is a little problem, when you look, you can see that the first line is drew four times, the second line is drew 3 times and so on

It look like the bmp data is not erased or something like that.

[lewster32]

Yeah I'm not entirely sure - I've got to admit I've not worked with canvas much so it's almost certainly me doing something wrong, but I think the principle is fine, even if the implementation is a little dodgy!

[pat]

One more time, thanks a lot

 

If I add this line

bmd.clear();

just after the beginning of function processQueue

I see one point alone, then the second point alone, then the third point alone and the last point alone (that seems good)

but I see the four lines at the same time ????

processQueue: function() {        // Are there any commands left to process?        if (queue.length == 0) {            return;        }                 bmd.clear();  …

[pat]

I change a little your code, the problem was for the move command. It is not necessary to update the bitmap data if we only move the pen.

I just store the value of the move point to use it when necessary.

I put your code here, in case I loose it on my computer.

 

Thanks a lot

// Phaser current version test environment// Procedurally draw a boxvar game = new Phaser.Game(500, 400, Phaser.AUTO, 'test');var BasicGame = function(game) {};BasicGame.Boot = function (game) {    // nothing here};var bmd, queue = [], lastAction ={action: '', pt:new Phaser.Point(0, 0)};BasicGame.Boot.prototype = {    preload: function() {      game.time.advancedTiming = true;    },	create: function() 	{        // Create our bitmapData and apply it to a Sprite        bmd = game.add.bitmapData(400, 400);        game.add.sprite(40, 40, bmd);                // Feed the drawShape function an array of points        this.drawShape([            new Phaser.Point(5, 5),            new Phaser.Point(275, 20),            new Phaser.Point(245, 265),            new Phaser.Point(25, 275)        ]);    },    update: function() {            },    render: function()    {        game.debug.text(game.time.fps || '--', 2, 14, "#00ff00");       },    drawShape: function(pts) {        var p;        // Loop through all of the points and add 'plot' commands        for (p = 0; p < pts.length; p++) {            queue.push({action: "plot", pt: pts[p]});           }                // Move back to the first point        queue.push({action: "move", pt: pts[0]});                // Shift the array so the last point is the first, so we make a complete square with the lines that follow        Phaser.Math.shift(pts);                // Loop through the shifted points and add 'line' commands        for (p = 0; p < pts.length; p++) {            queue.push({action: "line", pt: pts[p]});           }        // Begin processing the queue of commands we've created        this.processQueue();    },    processQueue: function() {        // Are there any commands left to process?        if (queue.length == 0) {            return;        }        //bmd.clear();        // Get the next command from the front of the queue        var a = queue.shift();        // Parse our commands and perform the appropriate canvas operations        switch (a.action) {            case "plot":                bmd.ctx.beginPath();                bmd.ctx.arc(a.pt.x, a.pt.y, 2, 0, 2 * Math.PI, false)                bmd.ctx.fillStyle = '#ffffff';                bmd.ctx.fill();                // Set the bmd to dirty so it renders in WebGL properly                // If dirty this BitmapData will be re-rendered.                bmd.dirty = true;                break;            case "move":                // do nothing, I save the new point in lastAction                break;            case "line":                bmd.ctx.beginPath();                bmd.ctx.lineWidth = '2';                bmd.ctx.setLineDash([5, 5]);                bmd.ctx.strokeStyle = "green"; // Green path                bmd.ctx.moveTo(lastAction.pt.x, lastAction.pt.y);                bmd.ctx.lineTo(a.pt.x, a.pt.y);                bmd.ctx.stroke(); // Draw it                // Set the bmd to dirty so it renders in WebGL properly                // If dirty this BitmapData will be re-rendered.                bmd.dirty = true;                break;        }        // we save the last action with the point coord        lastAction = a;        // Process the next command in the queue after 400ms        game.time.events.add(400, this.processQueue, this);    }};game.state.add('Boot', BasicGame.Boot);game.state.start('Boot');

[Manikant tiwari]

On 8/11/2014 at 6:09 PM, lewster32 said:

Rather than try and explain this, I'll provide a fiddle for how I'd do it: http://jsfiddle.net/lewster32/qvLe2qrf/

I have same problem but output of this fiddle is not visible on my computer screen....why? help please

Edited November 1, 2019 by Manikant tiwari