I need some suggestions in choosing a html5 canvas framework for my project
The project aims at developing a visualization application based on some data and using generative art.
Can someone provide some pointers to a mature framework. Some of the essential requirements I am looking for are as follows
Scenegraph based model with multiple layers.
Standard ZUI (Zoom able user interface ) features like , pan, zoom, move ,
rotate, scale , translate , position etc.
Animation , both frame based and object based (should be able to pick a object in the scenegraph and animate from one point to another like the PPT animation paths).
Apart from mouse , keyboard and touch , should support programmatic events based on custom events/timers etc (required for generative art based rendering)
Should support desktop browsers as well as phones.
I have come across many great frameworks like
Paper.js
Kinetic.js
Fabric.js
Easel.js
All of them support the first and the second requirement ( at least partially )
but not sure about the others.
Please suggest a mature framework.
After some more research and posting this question on the mailing lists of the above mentioned frameworks, I have finally decided on Paper.js
Paper.js looks very impressive and the code style looks neat compared to others.
Although I was also impressed by Kinetic.js but for now it is under wraps.
Easel.js is also very promising but since it is still in alpha will keep tracking it .
Related
paper.js
EaselJS
fabric.js
KineticJS
Hello guys I am new in html5 canvas development and I am lost in choosing canvas frameworks. There are so many of them that I can't find out what to use. So here I am! I want your help to choose which one is better for my needs. There are my needs
1) I want the framework used Vector graphics, I know canvas is not DOM, I realy don't care about it but what I mean is I want to manipulate with objects after its creation, PaperJS has this feature I don't know about others. If advanced mouse events will be available it would be better.
2) I want to use the framework for images, I will load image and animate them with canvas, move, animate some colors...
3) I want the framework to be fast because of my needs (image animation should be smooth)
4) I want the framework to have good community because I know I will need some help.
So what do you think which one is better for me? and please if you can write down from my list which are the strength and weakness for each framework?
HTML5 canvas is still very fresh environment. You can get impression there is a lot of tools already available, they are often quite immature though.
My answer will cover only part of your question because I used only KineticJS and EaselJS.
You can start from reading opinions at this page (mine is the last one at the bottom).
Speaking shortly KineticJS has lower entry barrier. It's simple drawing library and has some support for mouse events too. At the time I was trying to use it it was barely extendable. I found it really hard to customize for my needs.
EaselJS is a bit harder to start with, but it's more advanced too. Now it's part of other libs set known all together as CreateJS. It seems that lot of development going around there.
Both Kinetic and Easel supports mouse event. I don't remember
well the Kinetic, sensing 'onMouseOver' is costy with Easel though.
Also both mentioned libs allows objects manipulation. You can find
here TweenJS also useful as addition.
Again both Kinetic and Easel allows this. Easel also has support for
sprites - 'animated images' well known for web game developers.
I'm not sure about Kinetic as I haven't reached animation part of my
project before I dropped it (the lib, not the project). With Easel
speed is tricky. It has some optimization methods implemented like
for example objects cache or snapToPixel flag. Examples seems to run
really well. However for my project using Easel smoothness still is
an issue despite quite a lot of effort put in optimization. Maybe I
misused the API or there is still place for more optimalization I
haven't noticed.
Both libs are quite young but seems to be actively developed.
Authors are rather responsive. Community still isn't big, but I
guess CreateJS as more complete set of tools for creating games will
grow faster.
If you want to check here is the project I mentioned. It's a web page made with usage of EaselJS + TweenJS. Still needs some minor tweaking though.
Is there a way to embed Sketchup models on a website? Preferably a free one, if it's a commercial solution I'd like a confirmation that it's actually worth the money... I know about the 3D warehouse thingy where you can rotate it (javascript and some images), but I can't upload anything to the 3D warehouse 'cause it always "resets the connection".
You can try the upcoming WebGL Functions in modern Browsers. There are some Javascript Libraries that can read model files and show them within your (HTML 5?) website. I have not used them yet, but try these links if this sounds interesting:
https://github.com/mrdoob/three.js/
https://github.com/timjb/sketchup-threejs/
I made a patch of an example game in three.js. Added ColladaLoader and Sketchup model + Third Person Shooter controls:
https://github.com/irony/Nemesis
Try it out (Works best in Chrome)
http://peaceful-woodland-4410.herokuapp.com/index.html
You can use http://sketchfab.com, they even have a SketchUp exporter.
Yes, you can do it without cost. See here: https://help.sketchup.com/en/article/3000258
EDIT:
There were some free rendering sites apart from Google, but they don't seem to be in operation anymore. Posting to the Google 3D warehouse is going to be your best bet. Regarding your problem posting there, try it with Chrome.
EDIT #2:
If you don't want to upload to Google 3D Warehouse, you can achieve a similar effect with a little work. 3D Warehouse doesn't actually give the visitor the power to manipulate something in 3D, but rather it lets them "rotate" the image horizontally by simply showing a series of preset images of the 3D from various angles. You can take shots of your 3D object, import to Photoshop and create your own gif of the spinning object. A little more work than relying on Google, so you'll have to decide if it's worth it.
EDIT #3: If all else fails you can simply post the 3D model on your site as a downloadable file and advise visitors to get Sketchup to view it.
I'm trying to make some web-based board games, and I want the interface to be pannable and zoomable. Much like how in Google Maps, you can pan and zoom the map, I want the game board to be moved and zoomed. Unlike Google Maps of course, I do not want to work with image tiles.
Can anyone give me recommendations as to what technology to use? Would this be a good fit for plain HTML? HTML 5 Canvas? or SVG? Any particular JS libraries to recommend or something else entirely?
I'd like to avoid flash and Java. And browser compatibility is plus, but not the most important factor. For example, I think it would probably be OK to require Chrome Frame for older IEs.
Any ideas/advice would be appreciated.
A few thoughts:
Use the OpenLayers UI with a "fixed" strategy to load vector graphics for your board all at once. (This is overly heavy-weight, probably, but comes with pan-zoom and IE compatibility.)
Use Raphael to build your board in SVG, using RaphaelZPD for pan-zoom. RaphaelZPD isn't cross-browser (even though Raphael is), so you'd need Chrome Frame for IE compatibility. This would be pretty lightweight, I think.
Use pure SVG for your board, use SVGpan for pan-zoom. Chrome Frame required here too, though you could use SVGweb if you wanted. You could draw your boards right in Inkscape, clean up the SVG's and add whatever ID's you need in the XML (SVG is XML under the hood), and interact with the board with jQuerySVG if you like, or script interaction by hand. Did I mention that CSS works with SVG? I think this is your best bet.
I can't think of an advantage to using Canvas here, unless you had lots of animation or bitmaps. SVG is far more transparent in how it works - it's XML under the hood, and when rendered in a page, becomes DOM nodes you can easily manipulate in modern browsers.
Plain HTML would probably be hard to handle scaling with. I've seen plenty of image scalers, but haven't seen complex HTML structures, and complexity would be compounded by needing to pan at a zoomed level.
If you want total control of your development environment you could create your own web rendering plataform. I think you can use HTML canvas 5 as your interface with the browser.
You can easily implement drag, pan and zoom using HTML canvas. This approach is very similar with game development in many plataforms. Here an example of using HTML canvas 5 for an interface that supports pan, drag, and zoom.
Having the control of your environment you will have a wide range of possibilities.
If you don't mind tiles, I'd suggest checking out Polymaps "A JavaScript library for image- and vector-tiled maps using SVG". It's probably possible to borrow some parts from there for panning and zooming.
I am web-developer. I would like to integrate 3D Content into my web-site. The level of integration should allow something like 3D Cube floating above HTML Content. Moreover, I want 3D Content to be interactive, i.e. one should be able to click on certain side of the cube and get some JavaScript code executed in same way as if somebody clicked a button.
I have seen some demos with CSS3 3D Transforms in HTML 5. It's even possible to render HTML Content on 3D Objects like images and buttons, but they don't seem to allow something as sophisticated as floating cube.
Is it possible today? Which technologies should I use?
After some research online found XML3D and X3DOM projects. They offer integration with DOM and JavaScript, XML-like scene description and even programmable shaders. Seems that it's exactly what I was looking for, however both projects are still in development :(.
The best options you have available today are CSS transformations, and/or the Canvas element. With CSS you can perform various transformations, even including the construction of an animated cube (easier with preserve-3d).
I'm planning to write a diagram editor-style application, where you organize objects on a canvas. This application will need to support setting viewport, zooming, cropping and a lot of other standard features of such a graph style application. I'm looking for toolkits or frameworks which could supports drawing in a standard mathematical coordinate space (0,0 as center point, extendable in all directions), and will scale, crop and zoom this according to (user) commands. Language doesn't really matter, but the more geared it is towards standard GUI applications the better. I would namely like to be able to reuse standard controls and buttons on the canvas if possible.
I think Qt is your friend here. Offers what you need, is multiplatform, quite well-designed and there are bindings for several languages.
From my experience, anything mid-level like C++ with toolboxes - QT, GTK, Windows API etc is horrible for such a work. Not that they can't do it, just that there's 15 lines of obscure code per each simple operation - they are simply not very efficient and more geared towards creating fixed GUI than arbitrary graphics.
This sounds like a good work for Flash, optionally something on top of SVG, maybe even a web app in Javascript.