Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Feb 2013
    Posts
    11
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Question 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

  • #2
    Regular Coder
    Join Date
    May 2012
    Location
    France
    Posts
    216
    Thanks
    0
    Thanked 29 Times in 27 Posts
    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.

  • Users who have thanked 007julien for this post:

    Kathya (02-13-2013)

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Kathya (02-13-2013)

  • #4
    New Coder
    Join Date
    Feb 2013
    Posts
    11
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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!

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    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.)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    New Coder
    Join Date
    Feb 2013
    Posts
    11
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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!

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Have a look at

    Making a diamond with number of stars that user inputs


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

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #8
    New Coder
    Join Date
    Feb 2013
    Posts
    11
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    Have a look at

    Making a diamond with number of stars that user inputs


    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!

  • #9
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    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:

    Kathya (02-14-2013)

  • #10
    New Coder
    Join Date
    Feb 2013
    Posts
    11
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Airblader View 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!

  • #11
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    Ah, heck, I was in the mood. Here's a quick'n'dirty example of the rotation matrix principle:

    http://jsfiddle.net/pzD2J/

  • Users who have thanked Airblader for this post:

    Kathya (03-06-2013)

  • #12
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    Oh, I missed your answer in between. I guess the example isn't needed for you then, but maybe someone else finds it useful.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •