I need to render an essentially 2-dimensional grid in the web-browser; a chess-board, say.
But I want to give the user the option to rotate this chess-board in a 3D space, so it can be seen from arbitrary angles. (Eventually other 3D objects may co-exist in this space, but that's irrelevant for now.)
I'm now facing the choice of how to render this board. Choices include WebGL, or HTML coupled with CSS / Javascript transformations. I would prefer an HTML / CSS / Javascript solution. This would have the advantage that I can continue to use frameworks like AngularJS to manage the data on the board.
Question: Are currently available CSS3 + Javascript techniques reliable enough for use in production code? And can you recommend specific libraries or websites to look at?
Good browser-coverage would be nice, but is not the main concern. This will be a special purpose application; if necessary, we can ask our users to install the latest public release of Chrome or Firefox.
Related
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
I´m thinking on coding a couple of examples for my Computational Geometry class (2D), I want to use html5 and javascript.
Can anyone recommend a javascript library or does html5 has everything I need to start?
I will be mostly working with points and lines, but it would be nice to have something that draws a Cartesian plane as a reference and maybe some data structures ready to use.
JSXGraph
Specifically focuses on dynamic geometry and functions visualization. Comes from the academia. Authors – a German university.
Uses SVG (with fallback to Canvas and VML for IE). Works on iOS and Android.
The API is a very abstracted SVG API. It operates on figures and groups of figures, tangents, hyperbolae &c.
Has nice documentation.
SVG is not considered part of HTML5, but it's worth looking at. It's flexible, ubiquitous and, I think, vector graphics is a better option for geometry than bitmaps (Canvas).
I think either raphael should be useful:
Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.
http://raphaeljs.com/
or processing.js
Processing.js is the sister project of the popular Processing visual programming language, designed for the web. Processing.js makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins.
http://processingjs.org/
Your best bet is to use <canvas> and explore the API. It should have the basic primitives you need.
I can recommend EaselJS because I used it many times to quickly create dynamic drawings, such as triangles, circles, arcs etc. I was even writing a simple draw-with-text tool for students, called Geodrafter.
However, if you want to add e. g. sliders and have a dynamic environment (easily dragging points, for instance), then JSXGraph is a better choice since they provide a variety of components for this. The gallery in their wiki give some good ideas.
And as said above: JSXGraph is based on vector graphics, which will always produce exact graphics. EaselJS is based on canvas and can lead to blurry lines.
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).
I am trying to build a card game in Javascript. Currently I am using Raphael to draw my graphics, but I'm bad at math, like really bad. I'm wondering if there is a library or framework out there that would allow me to build a card game in Javascript without having to manually figure out the x and y coordinates of every object I want to draw.
You could look into a Javascript Game Engine, depending on your exact requirements you should find one for you.
Usually a game engine include facilities to manage sprites, layers, and scene; handle events; easy animations; redrawing regions, detecting collisions, etc.
Render Engine is an open source game engine that seems pretty good.
Many more are available under a commercial license.
A list of both open source and commercial game engines is available here, with brief descriptions to allow you to quickly find your way (discarding the not-yet-mature engines and choosing based on features or focus).
I'm trying out some dynamic web page background generation using lines and text.
Take a look at my demo at http://74er.net/labs/lines.html (just focus on the yellow line).
It's a lame and inefficient method by literally creating a <span> element with 1 X 1 size and a yellow background with the X,Y position based on an ellispe formula.
My requirements is for the line creation are fairly simple (or rather straightforward):
must be created at client-side and not a dynamic image generated by server scripts
can be created based on a simple formula (circle, ellispe or just a straight line)
can be contained in a DOM element (e.g. DIV so that I can layer it as a background)
No HTML5 canvas technique (simply because it should be rendered on non-HTML5 compliant browsers)
Not too taxing on the browser like my current implementation
There's not need for:
really smooth curves (though that will be welcomed)
dotted/dashed (I'll like that as well if feasible)
Based on the above, I am almost certain SVG (with Raphaël) is the way to go BUT I am put off by lack of native SVG support in some browsers.
I have looked at Walter Zorns library, and it is has some excellent performance tuning algorithms built-in. So it'll be my choice if I can't find a more creative implementation.
Let me know if you need further clarification.
Morning,
i have enjoyed to work with the drawing features from the Dojo Toolkit. You can see it in action here:
Dojo drawing example
To Download Dojo visit:
Dojo Toolkit