Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I am trying to draw some vector graphics and I found two ways:
(I have to mention that I use electron width nodejs and therefore the language is javascript and instead of OpenGL there is WebGL.)
Triangulate the shapes and draw it with WebGL. I think this is a fast method. But my concern is when you are moving single points, the shape has to retriangulated. And I don't know how fast this can be done.
Calcualate on a per pixel basis with inside/outside equations on the CPU. But after every resizing or moving the changed pixels has to be recalculated.
Can somebody give me any hints or some experience someone already has made?
Also how are Illustrator, Inkscape, etc. rendering their graphics?
Thank you
There is several ways to draw vector graphics on Web Platform.
Frist one, as mentioned in comments, SVG. It's perfectly fine if your graphics are mainly static or aren't extensively updated. For example, our Maps API uses SVG in some cases and it's sufficiently performant. And it's substantially easier to use that other options.
The second one is, of course, Canvas2D API. For the most, it's just an API to browsers painting backend (e.g., Skia for Chrome). The very same backend is used for everything else: HTML, SVG, sometimes even GUI. However, it gives our a bit more control over the rendering. And if your scene is heavily animated and/or needs to be highly interactive, there's good chance you'll be able to make a much more performant rendering that SVG. That's due to ability to make lightweight, highly specialised and thus faster renderer. But there're some catches. Most important would be necessity to implement your own hit test to provide some interactivity for your scene (SVG provider an event model).
If even Canvas2D isn't enough for you, there's a third way and it's WebGL. If used right it should be the most performant one. It provides you most control over resources and rendering itself and it's almost always fully hardware accelerated. But achieving that performance may be a challenge. But there're libraries out there which provides Canvas2D-like API, but powered by WebGL, for example Pixi.js.
About the last part of your question. I don't know about Adobe Illustrator, but Inkscape uses Cairo, as, actually, many applications, including Mozilla Firefox. In its turn Cairo can use one of multiple crossplatform or platform specific backends.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I have been doing research on HTML canvas libraries and I came across this question. What is the current state of the art in HTML canvas JavaScript libraries and frameworks? that was asked in 2010. The top answer was Fabric.js. After doing a bit more research I came across http://www.html5canvastutorials.com/ which features tutorials on KineticJs, that boasts having multiple canvases for speed. A bit more research later revealed that Canvas libraries seem to be all over the place when it comes to speed and features. What is the current state of JavaScript Canvas libraries and frameworks today? Has one come out on top?
EDIT: Since libraries are ever changing and a lot of people have recently been coming here for news and info on new libraries I changed the question to be more timeless.
Disclaimer: I'm the author of Fabric.js.
I would say that Easel.js, Fabric.js, and Paper.js are among the most used at the moment. I'm judging by the number of Github watchers for each repository, volume of discussion in their Google Groups, and how often I hear about them used as canvas libraries on Twitter.
These are also the ones with more or less decent documentation, examples/demos, discussion groups, and unit tests (the state of testing in most other canvas libraries is pretty sad).
I'm also maintaining this comparison table of various canvas libraries, where you can see how recently the library was updated, its size, support for IE<9 or node.js, and more.
EDIT: KineticJS is no longer being actively maintained.
Disclaimer: I created KineticJS
KineticJS is actually doing pretty well. You can find the source code at Github, where it is starred by 2180 people at the moment.
It can handle thousands of concurrent shapes:
10,000 drag and drop stress test: http://www.html5canvastutorials.com/labs/html5-canvas-kineticjs-drag-and-drop-stress-test-with-1000-shapes/
10,000 shapes with tooltips:
http://www.html5canvastutorials.com/labs/html5-canvas-10000-shape-stress-test-with-kineticjs/
It has very good event support, including mobile events, and it has a pretty solid suite of 100's of unit tests so the code base feels pretty solid.
kangax: P.S. awesome work with fabric.js! Other than KineticJS (of course), my other two favorite libraries are fabric and paper.
For recent readers, as of Jan 2013, I evaluated:
Kinetic
Fabric
Paper
Easel
By "evaluated", I did more than just read the docs; I created a prototype app.
I started with Fabric because it seemed to have the largest community and thought that it would be my solution. But, I gave up on Fabric for the following reasons:
weird and undocumented API inconsistencies that burned a lot of my time unnecessarily.
inconsistent pointer event support. Specifically, Fabric does not consider a "Path" to be a true shape object that is selectable and observable. This did not meet my needs since interactive Paths are a major requirement of my app.
behind the scenes additions of translations to the Canvas to position objects. For me, Fabric tries to be too clever in this regard without being clear to the developer what it's doing.
overly strong opinion on how move, resize and rotate interactivity works. In many ways, it's great to have this functionality built into the framework but, in my case, I didn't agree with the way it was implemented which meant essentially having to reimplement it myself anyway.
sparse documentation - lot's of those cases where the documentation of a method is of the form: "setX(Y) - set's the X to Y" :-)
I took a look at Paper and didn't get too far. It seemed overly obtuse to me and also falls between too stools IMO - it's too much of a visualization library to be a simple object model for Canvas but it's not enough of a visualization library to compete with D3. Plus, the documentation again was not particularly accessible.
I think Easel probably makes a lot of sense if you have a Flash/ActionScript background but I do not. Plus, it seemed overly game-focused for my requirements. The nail in the coffin was again documentation - not enough and presented in non-standard format.
So, I ended up going with Kinetic because:
really rich and clear tutorials and examples
API functions do what they're called and are largely guessable - faster productivity, shallower learning curve
is reasonably clear about what it does do and what it doesn't - it's not as rich as some of the others but that's a benefit; it does fewer things but does them better
Paths are first-class citizen Shapes, like any other Shape, which was essential for my requirements.
Kinetic is not perfect by any means and there have been a few times when I've had to dive deep into the source code to work out what's actually going on under the covers. Plus, I miss the SVG parsing and output of Fabric.
I would highly recommend pixijs. Its a high performance canvas library.
Pixi.js is a 2D webGL renderer with a seamless canvas fallback that enables it to work across all modern browsers both desktop and mobile.
http://www.goodboydigital.com/pixi-js-is-out/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 2 years ago.
The community reviewed whether to reopen this question last year and left it closed:
Original close reason(s) were not resolved
Improve this question
This question is looking for a practical and easy way for drawing multigraphs using Javascript.
First of all look at this question. None of those libraries support Multigraphs (or Pseudographs ). I mean I can't generate graphs like this:
Is there any jQuery plugin (or javascript library) out there for this purpose ?
I thought i can use WolframAlpha's API and use its images, something like this:
but it have lots of problem:
I can't move nodes or add remove edges interactively.
Only 2000 API calls per month. Not enough.
I can't produce large or intermediate graphs.
They are really ugly!
Please help me if you know some javascript library in order to draw Multigraphs, or anyway to produce such graphs (something like Dracula Graph Library but with ability to draw Multigraphs).
Cytoscape.JS supports multigraphs, is pure Javascript, and uses the new HTML 5 Canvas for performance. Its design intent is general purpose graph visualization/manipulation.
https://js.cytoscape.org/
If you are allowed to use Google Charts API you may refer to this
http://code.google.com/apis/chart/image/docs/gallery/graphviz.html
Example:
https://chart.googleapis.com/chart?cht=gv&chl=graph{C_0--H_0[type=s];C_0--H_1[type=s];C_0--H_2[type=s];C_0--C_1[type=s];C_1--H_3[type=s];C_1--H_4[type=s];C_1--H_5[type=s]}
I'm affraid you will have to do some development yourself. Raphael.js is pretty capable in creating and manipulating svg - would be good starting point
Some of those graph visualization libraries (mentioned in this question) DO support Multigraphs and allow dragging/placement of nodes
jsplumb: http://jsplumb.org/jquery/stateMachineDemo.html
possibly http://js-graph-it.sourceforge.net/ may support multigraphs.
but as far as your issue
4- Its really ugly!
These may not appeal to your aesthetic.
I think paper.js (http://paperjs.org) will get you also pretty close.
You might want to check this one out: www.d3js.org
You'd have to do a lot yourself (make your own SVG and such), but the library is very powerful.
I recently used Graphviz to draw the connections between some authors pubblications.
Graphviz is open source graph visualization software. The Graphviz layout programs take descriptions of graphs in a simple text language, and make diagrams in useful formats, such as images and SVG for web pages, PDF or Postscript for inclusion in other documents; or display in an interactive graph browser.
For example i used a simple DOT file to write all the connection between the authors and I produced a PNG file.
http://www.graphviz.org/
Here there is all the documentation that you need and in the gallery section you can see a lot of output example.
Hoping it could be helpful.
In a commercial scenario, take a look at yFiles for HTML:
It easily supports multi-graphs and does not look too ugly, I believe:
(These graphs have been laid out automatically, manual placement is also possible.)
Of course this is a matter of taste, so if you don't like the look, you can change any aspect of the visualization, like in the style tutorial.
The API offers full interactive editing capabilities and being a pure client-side solution, of course there is no API call count limit.
Large graphs are still a problem with todays' Javascript engines, but only if "large" means more than thousands of elements. With virtualization (considering only what is currently visible in the viewport during rendering), you can get good performance with thousands of elements.
Disclaimer: I work for the company that creates the library, on SO/SE, however I do not represent my employer. My posts and comments are my own.
You can check jsnetworkx (http://jsnetworkx.org/)
It is a js version of python graph library which supports multi-graph. It has a draw function which visualizes the graph using D3.js. It is available for both browser and node.js.
Best bet would be to render them on the server (or use it as an applet) with JGraphT.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I'm looking for javascript libraries that helps with HTML5 development.
Please only post one library per answer, and don't forget to describe it.
Modernizr is the best way to detect which HTML5 features a browser supports.
"Processing.js is an open programming language for people who want to program images, animation, and interactions for the web without using Flash or Java applets. Processing.js uses Javascript to draw shapes and manipulate images on the HTML5 Canvas element. The code is light-weight, simple to learn and makes an ideal tool for visualizing data, creating user-interfaces and developing web-based games."
Raphaël — Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.
I'll post about Easel.js and it's sibils hoho. They're from the same developer GSkinner I post all related libraries because of this. I've just used Easel a little, but the others seem promising. I post the URL and their description:
Easel.js
The new Canvas element in HTML5 is powerful, but it can be difficult to work with. It has no internal concept of discrete display elements, so you are required to manage updates manually. The Easel Javascript library provides a retained graphics mode for canvas including a full, hierarchical display list, a core interaction model, and helper classes to make working with Canvas much easier.
It supports TweenJS
TweenJS provides an extremely simple API for creating complex sequenced animations in Javascript. It includes basic (experimental) support for working with style sheets.
Also supports SoundJS
Audio in HTML is promising, but can be quite difficult to work with. Each browser has a similar but different approach, which requires a lot of guess and test, and edge cases, which can add up to a lot of time spent. The SoundJS JavaScript library provides a simple API, and some powerful features to make working with audio a breeze.
And Zoë
Zoë (from Zoetrope) is an open source application for OSX or Windows which provides an easy way to export Flash animations as sprite sheets for use with EaselJS and HTML5.
Simply drag a SWF file onto the application. It will scan the main timeline to find frame labels and dimensions. You can tweak the frame bounds, edit settings, then export a sprite sheet image and EaselJS code defining a SpriteSheet instance with frame data based on the timeline labels.
SWFs should have all animation on the main timeline, with frame labels to indicate the start of animations. Nested graphics are fine.
I haven't used them all but seem quite interesting =)
html5sql is a light JavaScript module that makes working with the HTML5 Web Database a whole lot easier. Its primary function is to provides a structure for the sequential processing of SQL statements within a single transaction.
The only one I have found is html5widgets.
I would have assumed that there where several competing libraries for this.
But it does implement most of the new html 5 form goodness, which is what I care about...
Check out RGraph.
Available at http://www.rgraph.net/
Complete set of graphs for html5.
Free for non-commercial use, else it is 49 Pounds (English)
I use Perkins HTML5+CSS3 framework "He" describes himself as following:
I am a Framework thought to make the life of designers and developers a bit easier. I use the latest Web standards, also known as HTML5 and CSS3. To take more advantage and allow you not to repeat yourself, I am based in LESS.js, which means that you can forget some of the proprietary browser prefixes. Also, I carry a number of preloaded basic styles, mixins, helpers, transparent textures and a #font-face driven icon set. If HTML is your passion, I can help you to make wireframes quickly using the dynamic grid, based in Tyler Tate's 1kb CSS Grid which is already included and can be configured in the perkins.config.less file, as well as many other options.
CreateJS is a good collection of HTML5 library.
http://www.createjs.com
While more than a javascript library HTML5 Boilerplate looks really usefull.
"HTML5 Boilerplate is the professional badass's base HTML/CSS/JS template for a fast, robust and future-proof site."
ExplorerCanvas — Modern browsers like Firefox, Safari, Chrome and Opera support the HTML5 canvas tag to allow 2D command-based drawing. ExplorerCanvas brings the same functionality to Internet Explorer. To use, web developers only need to include a single script tag in their existing web pages.
RoCanvas.js
Creates interactive drawing board that lets users draw on your site (can be useful for avatars, or much better for colaborative projects, learning etc
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 8 years ago.
Improve this question
I'm doing some research for a Maps project I'll be starting soon, and I'm trying to evaluate which of the Map APIs will be best-suited to this project. I've worked pretty extensively with the Google Maps Javascript API, but no others. My basic requirements are, in no particular order:
Free: as in beer, not necessarily as in speech.
Web-based: Javascript, Flash/Flex, Silverlight, etc. are all okay.
Long-running and stable: the map needs to be able to live in a browser for days/weeks/months without gradually consuming too much memory or other system resources.
Fast: The map absolutely must be able to plot thousands of points (upwards of 10k points) with ease. Every few seconds I need to be able to update a small number of these (say, changing their color).
Other things I'd like to see:
Flexible: the Google Maps JS API is a good example of this. Basically this leads to lots of good things like numerous third-party plugins/extensions, and puts a lot of power in the devs' hands.
Well-documented and supported: again, the GMap JS API is a good example. If I'm going to start working with a new, rich API, I'm going to need to be able to find answers.
As of now, I'm inclined to use the Google Map Javascript API since I am familiar with it. However, the question of whether or not the Flash API might be able to handle many points more efficiently and gracefully prompted this SO question.
So, what have you had good or bad experiences with? Based on my criteria, which API would you recommend? I'm sure there are good ones out there that I just don't know about.
The Google Maps Javascript API has problems with your third and fourth requirements, unless you do some clever stuff to work round the problems.
(3) In badly written browsers (e.g. MSIE) a constantly updated Google Map will gradually require more and more memory. If you're careful to remove all references and event handlers on objects that you don't need, then in browsers with goof garbage collection routines, I believe that it is possible to write a page that will run for days, but not in MSIE.
The workround is to have a timer that does a complete reload of the page at regular intervals, using GUnload() on the way out to tidy the memory as much as possible.
(4) 10,000 GMarkers on a Google Map is out of the question. The number of GMarkers that you can get away with before the browser becomes unacceptably slow and uses 100% of the CPU varies depending on your CPU power and the browser. MSIE6 becomes unusably slow with a few hundred GMarkers, Google Chrome will cope with a few thousand.
The usual workround is to create tiles like the ones that Google uses for its GLayers. Because you're updating them every few seconds, you'd have to create them dynamically using a server-side graphics library like gd or ImageMagic. Display them on the client with a GTileLayerOverlay. Use GTileLayerOverlay.refresh() to call for an update.
The browser will attempt to cache the tiles and defeat your attempt to fetch new ones. In your case, the best solution is probably to arrange for your server to set the http headers to instruct the browser to never cache the tile images.
It also raises the question of whether the memory used to hold old copies of the tile images gets released properly. I've never heard of any reports on that, so you should probably do some experiments before you get too far into developing your project.
I've used OpenLayers in a project. It's a JavaScript API, but we were trying to use it via an incomplete/unsupported GWT wrapper - not an experience I'd recommend. As an API itself OpenLayers isn't too bad. It does have a few issues (such as consuming right-mouse clicks and converting them to left clicks, from memory), but was under active development. I'd say it's not as slick as Google Maps, but it did have the advantage of being able to host your own map server.
If you're willing to use a Java applet, you could try using GeoTools.
I'm a fan of Google Maps for their incredibly thorough documentation and resources, as well as the general ease of use of the GMaps API.
Also, if anybody can scale (and optimize code to meet high demand), it's Google.
I talk about my reasons for using the Google Maps API in this answer.
No matter which implementation you choose, you'll probably need to use server-side clustering if you want to display 10k points. Even the Flash API won't be able to handle that many individual points (non-clustered).
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 8 years ago.
Improve this question
First a little intro:
Last year i wrote this http://dragan.yourtree.org/code/canvas-3d-graph/
Now, i want to make complete rewrite of it, because that old version have some limitations, for example: sometimes it happens that bars are not visible, because they are drawn one behind another.
In this old version there is no real 3d, just bunck of 2D lines, which emulate 3D.
Now, what i want is to go to full blown 3D scene, i want to keep all the objects in memory, and add some kind of 3D navigation buttons that will enable users to rotate whole scene on all 3 axis, and zoom camera in and out.
I've already decided that i will use http://sylvester.jcoglan.com/ for vector/matrix stuff, but i'm still unable to find good tutorial for 3D. There are tons of texts on the Internet, most of them date from the 90s, an are incomplete or written really bad.
So, my question is: what is the best online resource/tutorial that will enable me to write my own JS 3D engine from scratch.
It should cover all relevant topics:
vectors
matrices
objects
camera
scene rendering
lighting
rotating objects on scene
moving the camera
etc..
(i'm fairly familiar with first two)
Thank you for your time.
If this is specifically for a JavaScript related project then I understand but if you are simply doing this to grasp the basics of 3d rendering there might be more mature platforms out there for you.
In any case..
Links that might be useful to your learning:
Prototyping A Simple 3d Renderer In JavaScript
3D Basics - A Primer
The JavaScript Raytracer
JavaScript 3D Renderer
Also, some fun JavaScript 3d examples:
Rotating 3D Cube in JavaScript
Wolfenstein 3D in JavaScript
Anything else in this SO Question: Stunning graphic effects with JavaScript?
Just a couple of suggestions, but probably not exactly what you're looking for:
I suggest that you take a look at Jacob Seidelin's canvas examples at nihilogic.dk : http://blog.nihilogic.dk/search/label/canvas .
If you're willing to abandon canvas and go with an existing flash library, take a look at Sandy3D : http://www.flashsandy.org/demos .
Perspective projection:
http://www.cse.unr.edu/~bebis/CS791E/Notes/PerspectiveProjection.pdf
http://www.gamedev.net/
It's been quite a while since last time I tried to do anything with graphics/games/3D, but I do remember this website as one of the most widely known resource.
http://www.gamedev.net/reference/
Of course, it's very general purpose, and covers more things than you're asking for, but it contains good stuff on the Math and Physics stuff.
The sad truth is that there is still no real support for 3D graphics in JavaScript.
So anything you do will have to involve completely implementing a 3D renderer (or use one someone else already implemented)
Since these things are usually implemented in hardware and you are writing JavaScript it is naturally going to be very slow for anything more than trivial scenes.
You will be better served by languages like Java, C# or C++ for your 3D graphics.
There is a technology called "Canvas 3D" available for Firefox.
There is also an utility called C3DL, which makes it easier to use this technology.
Unfortunately, as far as I know, there is no Opera/Internet Explorer/WebKit equivalent - this addon is only available for Firefox 3(Firefox 2 and Firefox 3.1 beta are not supported)...