R
R
rPman2013-04-22 10:24:39
JavaScript
rPman, 2013-04-22 10:24:39

Gradient fill triangulation, JavaScript ready libraries?

It is necessary to quickly solve the problem of two-dimensional visualization - a set of points in the Euclidean space (x, y - within the given boundaries) is given, in the future their number will increase (filling local areas or expanding the boundaries, it does not matter anymore), initially randomly distributed uniformly. Each point has a weight (maybe there will be more parameters) - brightness, ideally maintain color (the task degenerates - color three times for each RGB color component).
The best thing that comes to mind is to build triangles with vertices at these points, and fill each with a gradient fill (the gradient is uniquely determined by three points). There is no need for an ideal triangulation solution, locally optimal algorithms will do.
preview1.jpg
Actually, I will build the triangulation myself, the question is which libraries or frameworks to use in order to effectively draw a large number of triangles (their number will dynamically change, the displayed area will change scale, etc.). Maybe there are already ready-made solutions or examples?
I want some kind of javascript library (canvas, even 3D), because I already actively use the convenient flot for two-dimensional graphs.
As a last resort, if there is a good framework for .NET, I will not refuse either.
Development exclusively for oneself, the choice of development environments and languages ​​​​is practically unlimited, I will not refuse to write a client application in PHP, the only question is to use effective solutions ...
Update: while I'm digging with canvas 2d, there is a gradient fill of polygons, it remains to evaluate the speed, etc. ... I just want something sublime and light, you get used to ready-made solutions quickly.
While I found this - gist.github.com/bebraw/507756 , I'm digging.

Answer the question

In order to leave comments, you need to log in

3 answer(s)
A
alrusdi, 2013-04-22
@alrusdi

WebGL? developer.mozilla.org/samples/webgl/sample3/index.html developer.mozilla.org/en/docs/WebGL/Using_shaders_to_apply_color_in_WebGL

D
dom1n1k, 2013-04-23
@dom1n1k

> While digging with canvas 2d, there is a gradient fill of polygons.
As far as I know, there is only a linear fill at 2 points. Filling a triangle, as shown in the picture, will not work (well, apart from manual very slow methods).
But ... if I'm behind the times and this already exists, I will be grateful for the link.

R
rPman, 2013-04-23
@rPman

So far I found this
gist.github.com/bebraw/507756

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question