HTML 5 canvas animation - objects blinking

Question

I am learning ways of manipulating HTML 5 Canvas, and decided to write a simple game, scroller arcade, for better comprehension. It is still at very beginning of development, and rendering a background (a moving star field), I encountered little, yet annoying issue - some of the stars are blinking, while moving. Here's the code I used:

var c = document.getElementById('canv');

var width = c.width;
var height = c.height;
var ctx = c.getContext('2d');//context

var bgObjx = new Array;
var bgObjy = new Array;
var bgspeed = new Array;

function init(){
    for (var i = 1; i < 50; i++){
        bgObjx.push(Math.floor(Math.random()*height));
        bgObjy.push(Math.floor(Math.random()*width));
        bgspeed.push(Math.floor(Math.random()*4)+1);
    }
    setInterval('draw_bg();',50);
}

function draw_bg(){
    var distance; //distace to star is displayed by color

    ctx.fillStyle = "rgb(0,0,0)";
    ctx.fillRect(0,0,width,height);

    for (var i = 0; i < bgObjx.length; i++){
        distance = Math.random() * 240;
        if (distance < 100) distance = 100;//Don't let it be too dark
        ctx.fillStyle = "rgb("+distance+","+distance+","+distance+")";
        ctx.fillRect(bgObjx[i], bgObjy[i],1,1);
        bgObjx[i] -=bgspeed[i];
        if (bgObjx[i] < 0){//if star has passed the border of screen, redraw it as new
            bgObjx[i] += width;
            bgObjy[i] = Math.floor(Math.random() * height);
            bgspeed[i] = Math.floor (Math.random() * 4) + 1;
        }
    }
}

As you can see, there are 3 arrays, one for stars (objects) x coordinate, one for y, and one for speed variable. Color of a star changes every frame, to make it flicker. I suspected that color change is the issue, and binded object's color to speed:

for (var i = 0; i < bgObjx.length; i++){
    distance = bgspeed[i]*30;

Actually, that solved the issue, but I still don't get how. Would any graphics rendering guru bother to explain this, please?

Thank you in advance.

P.S. Just in case: yes, I've drawn some solutions from existing Canvas game, including the color bind to speed. I just want to figure out the reason behind it.

Can you post this somewhere for us to take a look at it in action? — mway, Oct 29 '10 at 15:11
http://recon-by-fire.eu/html5.php - choose the 'Scroller' from menu above (sorry, no direct link, I've done this through frames) — Arnthor, Oct 29 '10 at 15:17

score 2 · Accepted Answer · answered Apr 19 '11 at 18:25

2

In this case, the 'Blinking' of the stars is caused by a logic error in determining the stars' distance (color) value.

distance = Math.random() * 240; // This is not guaranteed to return an integer

distance = (Math.random() * 240)>>0; // This rounds down the result to nearest integer

Double buffering is usually unnecessary for canvas, as browsers will not display the drawn canvas until the drawing functions have all been completed.

answered Apr 19 '11 at 18:25

Jesse M.

61
3

Hm, then I guess, when if distance is not integer, star isn't drawn (I can be CO at times :)). My thanks to you, as I've abandoned this case long ago. – Arnthor Apr 19 '11 at 22:32

score 1 · Answer 2 · answered Oct 29 '10 at 15:09

1

Used to see a similar effect when programming direct2d games. Found a double-buffer would fix the flickering.

Not sure how you would accomplish a double(or triple?)-buffer with the canvas tag, but thats the first thing I would look into.

answered Oct 29 '10 at 15:09

Mr Griever

4,014
3
23
41

1

See http://stackoverflow.com/questions/2795269/does-html5-canvas-support-double-buffering – Jesper Dec 16 '10 at 12:38

HTML 5 canvas animation - objects blinking

2 Answers2