Computational Geometry Javascript

Question

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.

Answer 1

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).

Answer 2

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/

Answer 3

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 eg 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.

Answer 4

Your best bet is to use <canvas> and explore the API. It should have the basic primitives you need.