a JavaScript library for drawing intractable shapes - javascript

I'm looking for a JavaScript library/framework I can use for drawing circles, rectangles, rulers and to be able to interact with them (rotate/resize) using both an API and the UI (so the user can do it as well).
I'm looking for an HTML5 compatible solution, SVG is not an option for me.
Happy with a jquery plugin, if there is anything like that.
I found Paper and it seems that it can draw all shapes and I guess that with some efforts I can do a ruler there, but I didn't find how to interact with the objects it draws.
Would be more than happy if anyone can give me any tip! :)
Thanks!

Kinetic is pretty solid and its open
http://kineticjs.com/
good tutourial site to get you started
http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-rect-tutorial/
EaselJS is more corporate...
http://www.createjs.com/#!/EaselJS

Related

How to move an icon through different points?

This website has an excellent animated map showing the migration patterns of wildebeest in the Serengeti. Unfortunately, they animated their map using Flash.
I wanted to know whether there were alternatives for doing something similar, perhaps with Javascript. I found a plugin called Two.js however the documentation isn't great and it seems to be a bit overkill for what I need.
Does anyone know of any good resources or examples they could kindly link me to?
I think you have two options:
Using HTML5 canvas and animate your objects using window.requestAnimationFrame();
Animate the dom, here you could use GSAP or Web Animation API.
With HTML5 canvas you work with raster image (pixels) instead using the DOM you could animate any HTML elements including also SVG which is vector.

Animating "Painting" of an image onto the paper in RaphaelJS over a path

I am looking to animate an image onto a canvas via a circle 'brush' [Think Photoshop default brush] wherever the circle moves on a path the image is revealed.
The image would be a bitmap, not a vector file.
The brush will not have any additional detail beyond displaying the image its 'painting'
As additional clarification, the circle brush is moving automatically the user does not move the brush. It is just animated along a path.
I am really curious to see how this can be done with Raphael.
Thanks in advance!
If you want to achieve something like that, you better think of using Canvas. Since Raphael is a library oriented exclusively to SVG. You can use non-svg images, but you are going to face lots of limitations.
On the other hand, Canvas is pixel oriented, so what you are trying to do is going to be easier.
Raphael is great when it comes to SVG and user interaction, because the elements you create, are nodes inside the DOM, and you can easily bind them to events.
If you still want to achieve something like that with Raphael, you are going to need to start digging a bit into Raphael's methods. Is to difficult for someone to explain the whole process. You better start trying, and ask some question on more particular problems.
Apart from Raphael's documentation, I recommend this exaggeratedly colorful, but useful site which have some working examples.
Either way I think you should reconsider using Raphale over Canvas!
I hope that helps!!

How to make 3D animation with Canvas

I have background on Canvas 2D context, but i want to perform a 3D animation like this one, is Three.js library the best choice to do such animation? Can you point me to some useful tutorial or documentation that may help. Thanx in advance.
That's one of the most common choices.
As WebGL enables OpenGL without the need for libraries, you might also do it with just Vanilla JS but that would be harder as WebGL doens't offer much more refinement over the raw and crude OpenGL.
Apart three.js, you could also try GLGE or PhiloGL but as Three.js is the most popular I would recommend to go for it if you have no specific requirement.
Looks like the demo you linked to is using a canvas library called Clay.js. Not one that I've personally heard about until now. For 3d in canvas the most popular one I know of it Three.js as you already mentioned. It has the benefit of supporting webGL as well (browser based openGL variant).
Three.js has limited documentation and some examples but outside of some books you may buy there isn't a lot of hand holding. You basically need to dive in and start coding. Here are some online resources that may help you get started (not necessarily all focused on THREE.js):
http://aerotwist.com/tutorials/getting-started-with-three-js/
http://learningthreejs.com/
http://learningwebgl.com/blog/
To make it easier to work with THREE.js Jérôme Etienne created a project called tQuery which you can think of kinda like jQuery. A wrapper to make it easier to get your hands dirty. Here's a video where he shows how to create a webGL game in 10 minutes.

Javascript 360 degrees panorama

Hi I'm looking for a way to create a panorama view with a 360 degrees photo. I need a solution to do create something like QTVR. There is a lot flash based software out there (I'm trying to avoid that) and also some javascript/prototype/jquery solutions. But none of the solutions I've found have the behaviour I'm looking for. I want to eanable users to look around (just horizontal). Furniture objects on the pictures should react on mouseover, so that I might have multiple "layers" to distort. Is there a way to manipulate images in pure javascript or with jquery so, that it looks like they where bent cylindrical? Or does anyone know good libraries that support that kind of image manipulation? Might webgl be a good solution? I don't really know how to start. Is there anyone who could give me a hint. I'm just looking for a direction. google didn't bring me usable results.
Check out three.js
http://mrdoob.github.com/three.js/examples/webgl_panorama_equirectangular.html
Also, you could possibly do some of the image manipulation via canvas.
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
It might be easier (with canvas) to just have a fully processed panoramic image, and figure out which pixels represent your interactive object. Then listen for mouseovers on those pixels.
try out http://panorado.com/en/PanoradoJs.php
There you'll find an excellent HTML5/JS based Viewer.
There are lots of tool to do that. Have you tried www.vtility.net ? Im not sure if it had mouse over layering. But it was the only SEO friendly that I have found.

box2d-js element with external image

So far in the samples of varies box2d js implementation I can find only element defined in shapes (ball/box/etc), is there a way to create an element defined by an image, e.g. a boulder?
You can use the b2PolyDef and b2PolyShape objects to create polygons.
This documentation is meant for AS3 but it is relatively simple to figure out the JavaScript equivalent.
If you wanted to automate the mapping from an image's bounding box to the polygon, you could use canvas and getImageData() to seek through the pixels looking for non transparent (assuming your image has a transparent background). This is probably more effort than it is worth though.
Also see Understanding custom polygons in Box2D.
I was trying to solve a same kind of problem when i came across this brilliant answer. Hope this will help you.

Categories