If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Enjoy an ad free experience by logging in. Not a member yet? Register.

Using Javascript for graphics?

I'm new to the forum so please forgive me if this is a silly question.

I'm trying to write a program for my website that essentially displays a bunch of colored dots and draws a path through the dots using a complex algorithm(I realize that's not very descriptive). My problem is that I don't know if javascript is even the best method for implementing my project.

I know how to write the correct arrays for the algorithm using c++ and I know how to create the right graphics using flash but I want my program to work across all platforms so flash is out. My major problem is that I have no idea how to combine my algorithm with my graphics.

Can anyone help by pointing me in the right direction? Maybe someone can come up with some sample code for me to look at?

Thanks!

UPDATE:
I decided to use the Raphael js library and so far it's great. I just have one question that maybe one of you can help me with. Does anyone know how to populate a grid with circles. I need it to look roughly like this:

Code:

o
o o
o o o
o o o o

The triangle can really go in any direction I just need to be able to index each dot individually and be able to draw lines connecting them along a specific path. I can create an array and draw a box of dots like this:
o o o o
o o o o
o o o o
o o o o
and I feel like it should be really easy to only use half of those to create a triangle but I'm having a bit of a hard time figuring it out. I was hoping to end up with a more symmetrical triangle than occurs when just cutting out half of the values. When I use an if statement i.e. If rows < cols I end up with something more like this:
o
o o
o o o
o o o o

It's just not quite what I'm looking for.

Any help would be greatly appreciated!
Thanks!

Last edited by Kathya; 02-14-2013 at 05:03 PM.
Reason: New question added

Users who have thanked 007julien for this post:

But be forewarned that it's an HTML5 object, so even it is not universal. But it may be as close as you come.

If you don't need the drawing to be "real time" (that is, if you simply want to offer up an image that is already drawn), then you could use server-side code to produce an image (e.g., a JPG or PNG file) that you then simply display on the page. That will work with any browser, since it has nothing to do with the browser, per se.

How you will produce such an image will depend on what server technology you are using. I know how to do it with ASP and ASP.NET code, for example. There are PHP gurus here who could tell you how to do it with PHP code.

But if you are willing to live with the limitation that only HTML5-enabled browsers will work, then canvas should do what you want, all in JavaScript.

One of the major reasons Raphael is such a large library is that it is supporting older versions of MSIE that don't support canvas.

If you need to support old MSIE, you might as well bite the bullet and start using Raphael from the start. (There are other libraries that do the same thing, by the by, but Raphael looks like a pretty complete one.)

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

That's not quite what I was looking for because I need to be able to access the dots to change their state(eg. yellow to blue) and increase a counter to determine that color change based on how many times the array index has been accessed. I'll see what I can do with that code to figure out spacing though.

In case you need to be flexible with the orientation of the triangle, but also to just not have to hard-code it, a different approach would be – and I hope this doesn't cause any flashbacks – using math. Define a standard triangle and rotate the coordinates of each point around a certain point (ideally the origin).

The wikipedia article even opens with the rotation matrix for a point in two dimensions, so really all you'd have to do is set up an array of points defining a standard triangle (easy!) and then loop over it to apply the matrix to each point (that's a matrix multiplication). And et voila, your array now consists of points defining a rotated triangle.

Users who have thanked Airblader for this post:

In case you need to be flexible with the orientation of the triangle, but also to just not have to hard-code it, a different approach would be – and I hope this doesn't cause any flashbacks – using math. Define a standard triangle and rotate the coordinates of each point around a certain point (ideally the origin).

The wikipedia article even opens with the rotation matrix for a point in two dimensions, so really all you'd have to do is set up an array of points defining a standard triangle (easy!) and then loop over it to apply the matrix to each point (that's a matrix multiplication). And et voila, your array now consists of points defining a rotated triangle.

I'm really not a programmer. I'm a mathematician so no negative flashbacks for me! Thanks!