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 5 of 5
  1. #1
    New Coder
    Join Date
    Feb 2013
    Posts
    11
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Removing paths, printing arrays, and array errors(3 questions)

    I have three issues that I'm hoping someone can help me with. I'm a mathematician and not a programmer so I apologize in advance for the horrible mess you're about to see!

    This first issue has been resolved. Thanks Old Pendant!
    My first issue is that my code worked perfectly fine when I used a static value for the size of my array but as soon as I tried to edit it to allow for user input the nodes(dots) are not drawn and after the first button click I get a script error I can't even check for other issues beyond that. Using a variable did work for array size in other areas of my code so I'm completely lost! Can you please take a look at the code and see if you can figure out what I'm doing wrong? Everywhere you see an n there was the number 10. It worked with the 10 but now fails with the n.

    My second issue is that I can't seem to figure out how to erase the paths. I need to figure out how to erase all of the purple lines without resetting the whole system. So far everything I've tried fails. Any help here would be extremely appreciated!I've commented out my most recent completely futile and wrong attempt.

    My third issue is that I want to print a counter array but only the values corresponding to the nodes where the counter array would be increasing. That will make a whole lot more sense if you look at my code. The "nodes" are a triangle of dots and I want to print out just the corresponding values from the counter array in a corresponding format. I've only found the print option where it prints in the form counter[i][j] = 0 and not just printing out the array values. Do you have any idea how to get around that? It seems like it should be simple but I can't seem to find a way to do it.

    Here's the code I have so far:
    Code:
    window.onload = function() {
      var n = prompt("Please enter your desired number of iterations","10");
      var paper = new Raphael(document.getElementById('canvas_container'), 50*n, 50*n);
    
      //Draw Nodes array
      var nodes = [];
      for (var x = 0; x <= n; x++)
      {
        for (var y = 0; y < x; y++)
        {
          nodes[x]= new Array(y);
          var w = 50 + 40*x;
          var h = 50 + 40*y;
          paper.circle(h, w, 10).attr({fill: '#0000FF'});
        } 
      } 
      //Establish counter matrix
      var counter = [];
      for ( var i = 0; i <= n; i++)
      {
          counter [i] = [];
          for ( var j = 0; j <= n; j++ )
          {
              counter[i][j] = 0;
          }
      }
      // while counter[9][9]==0;
      i = 0;
      j = 0;
    	var butclk = 0;
        //next button
        var rect = paper.rect(10, 10, 50, 25);
        rect.attr({fill: '#9cf', stroke: 'none'});
        var text = paper.text(33, 23, 'Next')  
          text.attr({'font-size': 12});
        rect.node.onmouseover = function() 
        {  
          this.style.cursor = 'pointer';
        }
        rect.node.onclick = function() 
        {  
          if ((butclk % (n-1)) == 0)
    			{
    			//left.remove();
    			//right.remove();
    			j = 0;
    			i = 0;
    			} 
    			butclk += 1; 
    
          var s = 90 + 40*i;
          var t = 50 + 40*j;
          if (counter [i][j]%(i+2)<(i+1-j))
          {
            paper.circle(t, s, 10).attr({fill: '#0000FF'});
            var left_string = "M " + t + "," + s + " l 0,40";
            var left = paper.path(left_string);
            left.attr({stroke:'#8B008B','stroke-width': 5});
            counter[i][j]+=1
              i+=1;
          }
          else if (counter[i][j]%(i+2)<(i+2))
          {
            paper.circle(t, s, 10).attr({fill: '#FF0000'});
    				var right_string = "M " + t + "," + s + " l 40,40";
            var right = paper.path(right_string);
            right.attr({stroke:'#8B008B','stroke-width': 5});
            counter[i][j]+=1
              i+=1;
            j+=1;
          }
    
    			/*show counter array
    			  draw boxes to indicate particle exit pattern
          */    
    		};
    }
    If you want to see the code in action with the static 10 node option it's available at math.antosca.com
    The broken code is posted here: http://math.antosca.com/test.html

    Thanks so much for any help you can give me!
    Last edited by Kathya; 03-21-2013 at 03:42 AM. Reason: Edit code

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    It would help if you (a) said *WHAT* doesn't work when you change to using n. and (b) showed us a web page with the non-working version.

    I see you omitting { } in some places where, admittedly, they aren't needed. But that's a bad practice and perhaps I missed a place where they are needed.

    I would have written this code
    Code:
      //Establish counter matrix
      var counter = new Array(n);
      for (k = 0; k < counter.length; k++)
        counter [k] = new Array(n);
    
    
      //next particle	
    
      for (var i=0; i< counter.length; i++)
      {
        for (var j=0; j<counter.length; j++)
          counter[i][j]=0;
      }
    just for example, thusly:
    Code:
      //Establish counter matrix
      var counter = [];
      for ( var i = 0; i < n; i++)
      {
          counter [i] = [];
          for ( var j = 0; j < n; j++ )
          {
              counter[i][j] = 0;
          }
      }
    Why create all the array/subarrays in one operation and then fill the values in a separate one? Do them all at once. And don't use arrayname.length if you already know what the length is. It's much less efficient and, I think, mildly misleading in meaning. Since, in this case, your goal is to always use n as the length.
    Last edited by Old Pedant; 03-21-2013 at 01:40 AM.
    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 (03-21-2013)

  • #3
    New Coder
    Join Date
    Feb 2013
    Posts
    11
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    It would help if you (a) said *WHAT* doesn't work when you change to using n. and (b) showed us a web page with the non-working version.

    I see you omitting { } in some places where, admittedly, they aren't needed. But that's a bad practice and perhaps I missed a place where they are needed.

    I would have written this code
    Code:
      //Establish counter matrix
      var counter = new Array(n);
      for (k = 0; k < counter.length; k++)
        counter [k] = new Array(n);
    
    
      //next particle	
    
      for (var i=0; i< counter.length; i++)
      {
        for (var j=0; j<counter.length; j++)
          counter[i][j]=0;
      }
    just for example, thusly:
    Code:
      //Establish counter matrix
      var counter = [];
      for ( var i = 0; i < n; i++)
      {
          counter [i] = [];
          for ( var j = 0; j < n; j++ )
          {
              counter[i][j] = 0;
          }
      }
    Why create all the array/subarrays in one operation and then fill the values in a separate one? Do them all at once. And don't use arrayname.length if you already know what the length is. It's much less efficient and, I think, mildly misleading in meaning. Since, in this case, your goal is to always use n as the length.
    I haven't implemented your coding suggestions yet. I'm about to do that now but I did edit my OP with your suggestions of explaining what the errors are and posting the code somewhere that you can see it in action. I'm going to try out your fix not. Thanks!

    ETA: I tried your fix. The button click works now and applying your fix to the array to draw the nodes fixed that issue too! Thanks so much!!!
    Last edited by Kathya; 03-21-2013 at 02:11 AM.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Quite frankly, I'm astonished.

    I really didn't think that what I was suggesting was at the root of your problem. So I must have missed some errant code same as you did. I'm glad that worked!

    To answer your question about erasing the paths: I've never used Raphael, but it *LOOKS* to me like the only way to do this is somewhat ugly:

    To erase a path from circle c1 to circle c2:
    (1) redraw the path from c1 to c2 using the background color.
    (2) redraw circle c1
    (3) redraw circle c2

    The image you are creating on the canvas is *NOT* a set of images or layers, so far as I can tell. So you are actually simply changing individual pixel colors when you draw a shape. And that being so, the only reason to "erase" something is to restore the original colors (that is, the colors as they existed before you drew the element).

    You don't *have* to do things this way in JavaScript. Instead of drawing on a canvas, you could have multiple "sprites" (actually, small <div>s containing some image or canvas of their own). You overlay a sprite on the background by controlling its z-index. And so to remove an element, you just remove the sprite (change it's style.display property to "none", for example). But that methodology has its own tediousness, and likely the erasure method I described will be less trouble than starting over.
    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.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Quite frankly, I'm astonished.

    I really didn't think that what I was suggesting was at the root of your problem. So I must have missed some errant code same as you did. I'm glad that worked!

    To answer your question about erasing the paths: I've never used Raphael, but it *LOOKS* to me like the only way to do this is somewhat ugly:

    To erase a path from circle c1 to circle c2:
    (1) redraw the path from c1 to c2 using the background color.
    (2) redraw circle c1
    (3) redraw circle c2

    The image you are creating on the canvas is *NOT* a set of images or layers, so far as I can tell. So you are actually simply changing individual pixel colors when you draw a shape. And that being so, the only reason to "erase" something is to restore the original colors (that is, the colors as they existed before you drew the element).

    You don't *have* to do things this way in JavaScript. Instead of drawing on a canvas, you could have multiple "sprites" (actually, small <div>s containing some image or canvas of their own). You overlay a sprite on the background by controlling its z-index. And so to remove an element, you just remove the sprite (change it's style.display property to "none", for example). But that methodology has its own tediousness, and likely the erasure method I described will be less trouble than starting over.
    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.


  •  

    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
    •