Javascript libraries for animation in HTML5

Re:Javascript libraries for animation in HTML5 by franze on Saturday March 03, 2012 @03:45PM (#3661091)

the simple answer is: because simple is better than complicated

        ...
        var blurFilter = new BoxBlurFilter(32, 2, 2);
	var margins = blurFilter.getBounds();
	bmp = bmp.clone();
	bmp.filters = [blurFilter];
	// filters are only displayed when the display object is   cached
	// later, you can call updateCache() to update changes to your filters
	bmp.cache(margins.x,margins.y,img.width+margins.width,img.height+margins.height);
	bmp.x += bmp.x+img.width;
	stage.addChild(bmp);
        ...

should be

    var blurcanvas = boxBlurFilter(originalcanvas,32,2,2);

and then, if we want to see it on the page (i.e. instead of the original canvas)

    $(originalcanvas).replaceWith(blurcanvas) //or any other jQuery mumbo jumbo

canvas are cheap. we must start wasting them.

[ Parent | on HN ]

Re:Javascript libraries for animation in HTML5 by Arelius on Saturday March 03, 2012 @04:00PM (#3661124)

The problem is that canvas are not cheap enough. And there are numerous scenarios where wasting them will prove to be a huge disadvantage to performance. Which is already mostly a problem in JavaScript, and the web in general.

[ Parent | on HN ]

Re:Javascript libraries for animation in HTML5 by franze on Saturday March 03, 2012 @04:05PM (#3661132)

for web-sized-pics and (instagram like) filter-effects (even effects stacked upon each other) they are cheap enough, but yeah, that question will only be solved with real world performance tests.

from my point of view: most of the canvas (effect) libs smell like premature optimization to me. could be wrong, though.

[ Parent | on HN ]

Re:Javascript libraries for animation in HTML5 by Arelius on Saturday March 03, 2012 @05:19PM (#3661284)

The context is within an thread on Animation. Yes, of course it's cheap enough for an effect you are just generating a still of, but it is a measurably slow approach for anything that needs animation.

And couldn't you create the kind of library you wanted by simply making a wrapper that called did something like

    function X(canvas, ...) { var C = canvas.clone(); oldX(C, ...); return canvas }

You can't really do the opposite and get the performance advantages.

[ Parent | on HN ]

Re:Javascript libraries for animation in HTML5 by noduerme on Sunday March 04, 2012 @10:19AM (#3662912)

In StrikeDisplay, vectors and images are held as Sprite objects in the AS3 sense - which are represented as draw lists internally, and only drawn/redrawn to the canvas as necessary. When a filter requiring convolution or blurring is applied to one of these Sprites, a unique canvas is generated for that individual Sprite+Filter, which is substituted for the original draw list (temporarily). Same thing that happens if you just cache the sprite as a bitmap. So the procedure in StrikeDisplay to draw a black box, add it to the stage and put a blur and a dropshadow on it is:

var s:Sprite = new Sprite();

s.graphics.beginFill("#000000",1);

s.graphics.drawRect(0,0,100,100);

root.stage.addChild(s);

s.filters = [new BlurFilter(4), new DropShadowFilter(2,2,4,"#000000",.8)]

And that's it. It's now automatically drawn to a hidden canvas, which becomes the only item on the Sprite's draw list, retaining the position and transform properties, parent and event hierarchy of the original Sprite. If you modify the Sprite later, re-filtering and re-caching happens automatically. And if you remove the filters, the original vector draw list is restored and the hidden canvas that fed the filtered version is emptied and deleted.

[ Parent | on HN ]