Using Javascript for graphics?

[Kathya]

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:

     
       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!

[007julien]

See for example Raphael the javascript library witch allows to draw (a new clock) and displays graphics...

Since javascript is not so efficient as C++. To improve the computing time is often possible pausing the script (with a setTimeout) like with this page about probability and Memory.

[Old Pedant]

Look into the canvas object.

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.

[Kathya]

Thanks for the help! I think I'll start by checking out the canvas object and then I'll look into the links from 007Julien.

Thanks for getting back to me so quickly!

[Old Pedant]

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

[Kathya]

I added a new question that hopefully won't be too difficult to get help with. I didn't want to start a whole new thread and clutter up the board!

[Philip M]

Have a look at

http://www.codingforums.com/showthread.php?t=242014


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

[Kathya]

Originally Posted by Philip M

Have a look at

http://www.codingforums.com/showthread.php?t=242014


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.

Thanks!

[Airblader]

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.

[Kathya]

Originally Posted by Airblader

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!

[Airblader]

Ah, heck, I was in the mood. Here's a quick'n'dirty example of the rotation matrix principle:

http://jsfiddle.net/pzD2J/

[Airblader]

Oh, I missed your answer in between. I guess the example isn't needed for you then, but maybe someone else finds it useful.