animated single pixel

[wormi]

Hi

I tried du manipulate single pixel on the canvas but its not working as I expect it to be. Maybe you could help my with a workaround...

What I tried so far is extending your shapes.js with:

var pixelImageDataImplementation

    /* this totally sucks... only half the frames are displayed, causing the pixel to blink */

    = {

    setup: function (kapiInst, actorInst, params) {

    },

    draw: function (ctx, kapiInst, actorInst){

        var canvas=ctx.canvas;

        var canvasWidth = canvas.width;

        var canvasHeight = canvas.height;

        var canvasData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);

        function drawPixel (x, y, w, r, g, b, a, canvasData, ctx) {

            var index = (x + y * canvasWidth) * 4;

            canvasData.data[index + 0] = r;

            canvasData.data[index + 1] = g;

            canvasData.data[index + 2] = b;

            canvasData.data[index + 3] = a;

            ctx.putImageData(canvasData, 0, 0);

        }

        var color=rgbStringToRgbArray(this.color);

        drawPixel(this.x, this.y, canvasWidth,color[0],color[1],color[2],255, canvasData , ctx);

        return this;

    },

    teardown: function (actorName, kapiInst) {

    }

}

which worked so far, but causes the pixel to blink..

another try was to draw two 2 pixel long lines and only display the crossing section of one pixel with 

ctx.globalCompositeOperation="source-in";

But if th crossing section is just a pixel... it isn't displayed. Do you, or anyone else, have any idea how to animate single pixel, or is it just plain stupid to even try?^^

Regards

Wormi

[Jeremy Kahn]

Hi Wormi,

Before I answer your question, I'd like to mention that Kapi is an old project of mine and I do not actively support it.  But don't worry!  Kapi has been replaced with Rekapi, which is actually just a rewrite of Kapi.  Rekapi is much more refined and is being actively developed.  The API is similar (but not identical), and Rekapi has nearly all of the capabilities of Kapi, with many more added (like DOM animation support and CSS3 exporting).  If at all possible, I strongly recommend you replace Kapi for Rekapi in your project.  Sorry about the inconvenience!

Regarding your question:  I don't know the full scope of what you are trying to achieve, but if all you want to do is animate a single pixel, I think you can greatly simplify your approach.  Instead of dealing with the putImageData API, it would probably be a lot easier to draw a 1-pixel long line on the canvas.  If you'd like an example of canvas line rendering, I have a Rekapi demo here (see it in action here) that animates a bar graph which is just a bunch of lines.

I hope this helpful!

[wormi]

Thanks for your answer. I will switch to Rekapi, I was just kind of confused because the link to Rekapi in your Kapi documentation points to http://jeremyckahn.github.com/rekapi/ which gives me a 404 Error. That's why I didn't tried Rekapi in the first place. Well.. please excuse me for raising this unnecessary topic :)

Thanks for taking your time to look into this. 

[Jeremy Kahn]

Oh no!  That's a bad link, I just pushed an update to fix it.  Sorry about that.  If you have any Rekapi questions, please bring them up in the issue tracker (it also serves as a discussion forum).

Good luck!