How to obtain good framerate using javascript? - javascript

I'm trying to apply filters to full-hd videos in javascript using pixel manipulation.
I created a demo using hidden canvases, web workers and transferables:
http://lab.jure.it/ww/ww.html
The result is that using web workers the browser's tab crashes in a short time, and the video has very low performances (~5fps).
If you select "Web workers: 0" ww are not used, the performance is better (~15fps) and the tab doesn't crash.
What can i do about it? The goal is to obtain a good framerate (~30fps) avoiding SVG or CSS filters.
Thanks.

Looping through all pixels and converting them on CPU is not a good idea. That's what GPUs are for. In past, that would mean you have to use something nasty, like Flash.
Fortunately, new technologies are emerging and graphic acceleration is available in most popular browsers. It's called WebGL and it allows you to make use of graphic card for these things.
Unless you want to learn all the internal secrets of WebGL (it's quite complicated), I advise you to use PixiJS framework, which is designed for 2D animation.
You can see their filtering demo here: http://www.goodboydigital.com/pixijs/examples/15/indexAll.html
More demos and examples are here: https://pixijs.github.io/examples/#/basics/basic.js

Related

canvas: create a game-like exploding stars effect for gamification purposes

Coming from the backbone side of web development we are trying to find a solution for a request to add visual and sound effects to our task management web application.
For starters - we are looking for a way to create an exploding stars effect like you see in games.
Can this be done with HTML5 canvas?
Should we use flash?
Any ideas how to start?
By now, just about anything Flash can do visually can be done by the HTML5 canvas on modern browsers.
For a 'star burst' visual effect, it sounds like a simple matter of creating a random array of objects that move away in random pre-set directions every time the canvas updates.
Example: http://jsfiddle.net/amDAW/ (click on the canvas to create a starburst)
As for sounds, this isn't handled in the canvas, but rather either the Audio tag or the fairly new WebAudio API. If you go with the former (more browser support), your biggest concern will be with resource preloading, but there are some helper libraries that can abstract this away (shameless advertising: https://github.com/jsweeneydev/ResourceLoader).

2D interactive animation engine in HTML5

I'm looking for a simple JavaScript library or framework to create interactive 2D animations in the browser. (Excuse the buzzword in the title, but I'm not set on any particular rendering technology like Canvas or SVG.)
This should make it simple to draw and animate arbitrary (though not very sophisticated) shapes on a canvas screen and allow users to select and move these shapes as objects (kind of like a very basic RTS game engine).
Ideally, the following features should be supported (directly or indirectly; I'd implement it myself if necessary):
panning
zooming
fisheye partial zooming
box selection (selecting multiple objects by drawing a box around them)
Not being familiar with such things yet, I find it tricky to research what's out there (e.g. regarding search terms). Also, I have no illusions about some magical package that doesn't require any effort on my part - indeed, I'd prefer simple and readable libraries so I can learn about the basics by reading the source.
If you like simple libraries, perhaps take a look at GameJS. It claims to be "a thin library on top of the HTML5 canvas element." It's a port of PyGame to JavaScript, which in my experience is a fairly nice abstraction layer that at the same time doesn't overdo it.
If that doesn't cut it, have a look at this list of JS game (and animation) engines.
You probably did make a search and found dozens of js game engines. I will just narrow it down for you. It is impossible to just spit out one single js game engine. Also, you might find some to be more appropriate than others based on the type of game you want to make. So here they are
LimeJS
Impact
Crafty

JavaScript InfoVis Toolkit ability to handle high volume of data

Does anyone have experience displaying large set of data using JavaScript InfoVis Toolkit? Basically, I am doing research on how my project can provide visual representation of social network... and playing around with JavaScript InfoVis Toolkit I did not notice any performance degradation... meanwhile I saw this:
JavaScript InfoVis Toolkit - interaction seems a little slow, maybe that's on purpose in the demos from
javascript framework for relationship visualization
and
JsVIS is pretty nice, but a little slow with larger graphs. from
Graph visualization library in JavaScript
this makes me worry that under real data it might crack? So just asking..
plus i looked at Flare, it seems like another good alternative, but looking at their site it looks like it hasn't been updated in almost 2 years... is it totally outdated?
To answer my own question.... performance is not that great. I wrote a script to populate json object used in ForceDirected object with 100 nodes and it was terribly slow... will give www.graphviz.org a try.
It's quick enough if not using such things like gradient background and other processor consuming visualisation.
I made Sunburst with 3 levels and about 100 nodes. Quick enough.
OK, I'm totally biased here (disclaimer: I'm an author of it), but KeyLines can handle several hundred nodes just fine - it is commercially licensed.
In general terms - aside from the issue of what framework to choose - I've found that canvas performance depends strongly on whether the browser+device has hardware acceleration. For example, before iOS5, iPad performance for canvas in Safari really was dreadful, but since iOS5 it flies along. Android is more variable. Most desktop combinations of browser/OS are now fine for high performing canvas rendering.
Another consideration for graph layouts is whether long running layouts block the browser's rendering loop - we've had to develop around the issue of long running (i.e., more than a few seconds) tasks locking up the browser. Users like to see progress bars ticking along & that is possible provided you take the right steps in the layout code..

Suitable tool for simple interactive web application

I want to create not complex interactive web application. It has some pinboard and user can create many simple objects on this pinboard (e.g. many small circles). After this user can:
move these objects
delete some of them or create new ones
make multiple selection and move/rotate elements of selected group
place members of the selected group in some special order (grid, line, circle, etc)
Zoom in/out pinboard
I think that I can use Flash/Flex or JavaScript/SVG/VML for this purpose. Disadvantage of Flash is that user must have plugin. Minus of JS/SVG/VML is that there aren't such powerfull developing tools as in Flash case, but if we use some library (like http://raphaeljs.com/) application won't require flash plug-in.
I'm finding right tool for this aim. So give me some recommendations, please. Thanks in advance.
I believe that you can achieve your goals without Flash using HTML(5), JavaScript and not the least the Canvas element present in HTML5.
Bottomline is, unless you today require your application to animate a lot of objects with framerates approaching three digits, the above should suffice fine and will also pair you with a prospective Web development platform. I am often sceptical of the new stuff, but HTML5 and Canvas are fairly standardized, patent-free and are being actively adopted.
The only benefit of going with Flash that I can think of is being backed by a rich API that does 2D as well as 3D, and the fact that you can later port your ActionScript code to say, JavaScript when you finally decide to go with HTML+JavaScript instead. Aside from having to perhaps rewrite part of your drawing stack, your ActionScript code will require minimal (syntactic mostly) changes.
I would still advise you to go with my first suggestion, unless you need live (camera) video publishing, 3D, sound editing and few features not available easily outside Flash Player. Which I don't think you will need.
You might want to have a look at existing similar projects, such as SVG Edit (MIT license).

Is javascript / HTML5 capable of supporting "flash like" animation and drag and drop

With apple browsers not supporting flash or silverlight, there is a real incentive to avoid flash / silverlight to avoid losing that audience when building a web site. That being said there is certain functionality that it seems like you can only really do in flash / silverlight
for example alot of simple games where you can move things on the screen like this site all seem to be built in flash. also, a lot of drag and drop functionality where you can drag one object onto another like these game sites.
After lots of searching I can't find any that are not either flash or silverlight based.
In particular i am looking for drag and drop support of one element onto another
my question is if you need this type of functionality is javascript / html 5 able to do this type of stuff (so you can support iphone / ipad) or are you out of luck.
is there any resource that highlight examples or suggestions of trying to do this type of interactive functionality and how / if you can do this type of stuff without silverlight / flash. also, if anyone has any good examples of existing site who are doing that today that would be great as well.
This is going to be a long discussion about the ability of html5 to compete with flash.
In my opinion jquery is not any close to performance flash or silverlight animation give.
if the comparison is in terms of drag-and-drop, menu dropdowns, fadeIn.fadeOut - jQuery is competitive.
If i will see the jQuery cartoons with lot of layers and objects moving simultaneously - i will probably agree that jQuery has competitive performance.
the things are compare to see the difference:
magnifying glass over the raster picture
smoke/water/fire emulation
compound 3D objects like fractals with deep branches
when HTML5 will have it - then i will agree that it has competitive performance. All that i see today is picture slideshows and couple of games that work on html5.
You can check Easel.js by Grant Skinner, used in Pirates Love Daisies.
Also, other frameworks are:
enchant
limeJS
akihabara
JQuery UI has that for long time, works in all modern browsers, not just HTML5
JQuery UI Demos
You should checkout canvasdemos.com. It has a lot of good examples of what can be done. You can take a look at the source code behind these - some even help you in that regard. e.g. the pool game
Other good examples include the doom like "game" (you can walk around in 3D dungeons).
The Frog Log game was the winner in the 10KB coding challange
Also this was the first result for a search of html5 animation demo in google. It has links to 48 demos. Some of them are really cool. Unfortunately the code for a lot of these have been minified, but they still might give you a few ideas about what you can achieve.
So it's fine for making simple dressup type games. However, if you are looking to make anything that's CPU intensive, you should look into some performance benchmarks like this. HTML5/Canvas based animation is still quite far behind flash in terms of performance. Getting consistent behaviour across the various browsers will also be an issue.
HTML5 and related technologies (WebSockets, WebGL, web storage, File API, media capture, etc) are quickly moving towards parity with (and in some cases exceeding) what can be done in Flash/Silverlight.
The HTML5 Rocks slides are a reasonable starting point to see what is possible (you need an HTML5 capable browser). In particular, the Canvas example demonstrates image manipulation (drag, rotate, resize) which is the core functionality needed to implement dress-up games.
Flash was designed for animation. The tweens were meant to be used for animating drawings. Because it was marketed to every Tom, Dick and Harry, people started using it to animate hideous menus and flying content text. And Adobe complied to this new use, building an abode of total chaos.
Flash is still the best animation engine for the web, it should never have catered to full flash websites.
Many HTML5 fans out there, but it needs to be said: Canvas is a decade behind Flash. But for everything other than animation, Flash is an abomination.
In old browsers, you can emulate drag'n'drop of elemnts from the DOM but in new browsers, you can also drag'n'drop files (like images) and there are events for it: https://developer.mozilla.org/en/DragDrop/Drag_and_Drop
For flash-like animations, it's been possible with JavaScript for a long time but doing some bug ones was really hard and often slowing down the page.
Now, there is canvas and WebGL that allow you to do it in a more convinient way (for the complex ones).
And with canvas, WebGL, CSS animations (if you use the tric to make the browser think it's 3D), you get CPU accelerated so it's way faster.
There is also requestAnimationFrame that allows to optimise the reflows and therefore the script.
The best example I know on what can be done is the Quake II port to the Web :
Video: http://www.youtube.com/watch?v=XhMN0wlITLk&feature=player_embedded
Project's site: http://code.google.com/p/quake2-gwt-port/
as said in soe of the answers above, I'm pretty sure jquery's draggable/droppable plugin will do the job for you if you just need a basic drag and drop dress me up type of game. Basic premise is this:
in the default example, your avatar to wear the clothes would be a div with a png/gif.jpg background image of a girl/boy whatever(instead of an orange drop here background)
the clothes will be the "drag me to my target" objects in the example. you can create them as divs or even image tags that have the draggable class in them so you can drag them around and drop them in the orange boxes/avatars.
you can save the data using ajax, which is also covered in the examples there(or other tutorials in the net, it's easy)
???
PROFIT
Just try it out and see for yourself. If you need any help you can just ask here again, but I do think that the jquery UI answers are valid answers to your problem.
I don't have an example site to show you, but I'm pretty sure given some images and stuff I can whip out something...if I had the time lol.
You can definitely do these "flash-like" things now in HTML5 web browsers. Check out the examples at http://www.chromeexperiments.com/
In fact HTML5/CSS3/JS can do anything flash can do. But there are some drawback :
It is not yet mature. Lot of bugs, lot of difference in implementation depending of browsers and many people simply don't have yet browsers that support it.
Adobe has a really nice set of tools that help making complex flash applications. This doesn't exist (yet ?) at the same level for HTML5.
On a side note, neither flash, neither HTML5 will really shine on mobiles phone. People prefer native applications anyway. You might need to provide a web version, but you'll need too a app version (one per big phone player).
We can speculate how HTML5 will rule the word in the next few years, but as of now, impact are limited outside of nice looking demo that consume 100% of CPU (really, really bad for mobile device).
For drag and drop support, anybody can do that - in HTML4 and in any browser with a few lines of javascript - inside one page, or can think to do it on between 2 browser windows of the same website. Doing drag & drop between browser and any native desktop application is another thing.
For a great example of what you can do with HTML5 in terms of drag and drop, I suggest you take a look at this article and in particular the short demo at the beginning. The article also highlights a few other goodies that come with HTML5, such as localStorage and the HTML5 Canvas.
For a more detailed tutorial on the HTML5 drag-n-drop API specifically (really it is a Javascript API), take a look at this other article. It is dated from December 2009 but still valid.
Lastly, this video gives you a good insight on some of the cool visual effects that you'll be able to do with HTML5 (SVG, Canvas, CSS3, WebGL, ...). More of a marketing video I'll admit but a good illustration of some of the more powerful HTML5 features (at least from a visual stand point) and of what we'll start seeing in our browsers in a not so distant future...
Disclaimer: I don't work for Mozilla. I just happen to have researched this topic in the past and found that the material produced by Mozilla, and in particular the demos from Paul Rouget, to be the most instructive.
jQuery UI is an amazing library...
Drag: http://jqueryui.com/demos/draggable/#default
Drop: http://jqueryui.com/demos/droppable/
I belive that the droppable examples will answer your question of "In particular i am looking for drag and drop support of one element onto another"

Categories