Problems undrawing objects

AceSlowman

Looking through the documentation, it looks like noFill(); and noStroke(); are all I should have to call to "undraw" my object. Right now, on click, I am displaying a child node of my tree, but on another click on the parent, I want those children to collapse and "undraw". Could anybody let me know what might be going wrong here? Much appreciated. Running in javascript.

MAIN SKETCH:

//SFD Tree Visualization
//Austin Slominski 2014

Node root;
Node current;
XML data;

void setup(){
    root = new Node();
    data = loadXML("nodes.xml");

    size(750,750);
    smooth(true);
    background(255);

    loadChild(root, data, null);
    current = root;
}

void loadChild(Node node, XML data, Node parent) {
    XML title = data.getChild("title");
    String xmlTitle = title.getContent();
    node.title = xmlTitle;

    XML[] XMLchildren = data.getChildren("child");
    node.children = new Node[XMLchildren.length];

    for(int i=0;i<XMLchildren.length;i++){
      node.children[i] = new Node();
    }

    //DEBUG
        println("Current Node: " + node.title);
      if(parent!=null){
        println("Parent: " + parent.title);
        node.parent = parent;
      }
      if(node.children!=null){
          println("Number of Children:" + XMLchildren.length);
      }
        println("");

    for (int i = 0; i < XMLchildren.length; i++) {
      loadChild(node.children[i], XMLchildren[i], node);
    }
}

void draw(){
    current.display();//starts inactive, null collapsed

    if(current.collapsed == false) {
          for (int i = 0; i < current.children.length; i++) {
        current.children[i].display();
    }
    }

}

void mousePressed(){
    current.clickedActive();

    for (int i = 0; i < current.children.length; i++) {
      current.children[i].clickedActive();
    }
}

NODE CLASS:

/* @pjs font="Junction-light.otf"; */
PFont f;

class Node {

      Node parent;
      Node[] children;
      public String title;

      int x=120;
      int y=140;
      int tWidth;
      int tHeight;
      int titleColor = 0;
      float textSize=70;
      public boolean active = false;
      public boolean collapsed = true;

    Node(){
      f = createFont("Junction-light.otf",100,true);
      textFont(f,textSize);  
    }

    void display(){
      if(parent == null) {
        fill(titleColor);
        text(title,x,y);
        noFill();
      } else {
        if(parent.collapsed == true){
          noFill();
          noStroke();
          text(title,x,y);
        }else{
          fill(titleColor);
          text(title,x,y);
          noFill();
        }
      }


      tHeight = textAscent();
      tWidth  = textWidth(title)+8;
      //rect(x,y-tHeight,tWidth,tHeight);
    }

    void clickedActive(){
      if(mouseX > x && mouseX < x+tWidth && mouseY > y-tHeight && mouseY < y){

         if(active == false){      //if already inactive (default)
           titleColor = 140;       //make gray
           active = true;          //set active
           collapsed = false;
           expandChildren();
         }else if(active == true){ //if already active
           titleColor = 0;         //make black
           active = false;         //set inactive
           collapsed = true;
           collapseChildren();
         }

      }
    }

    void expandChildren(){
       for (int i = 0; i < children.length; i++) {
         //this.children[i].collapsed = false;
         this.children[i].y = y + 150 + 150*i;
         println("expand");
       }
    }

    void collapseChildren(){
       for (int i = 0; i < children.length; i++) {
         //this.children[i].collapsed = true;
         println("collapse");
       }
    }

}

NODES.XML:

<?xml version="1.0" encoding="UTF-8"?>
<root>

    <type></type>
    <title>ROOT</title>
    <description></description>
    <image></image>

    <child>
        <type></type>
        <title>Test Child 1</title>
        <description></description>
        <image></image>

        <child>
            <type></type>
            <title>Test Child 1b</title>
            <description></description>
            <image></image>
        </child>
    </child>

    <child>
        <type></type>
        <title>Test Child 2</title>
        <description></description>
        <image></image>

        <child>
            <type></type>
            <title>Test Child 2b</title>
            <description></description>
            <image></image>
        </child>
    </child>

</root>

GoToLoop

You don't use background() within draw()! >-)
In Processing, "undraw" means clear the canvas and redraw the 1s we want, leaving out the 1s we don't want! 8-X

AceSlowman

Where is background() being called? In draw, I'm just calling my node.display() function for the text.

KevinWorkman

That's the point. It's not being called. You need to call it yourself to undraw anything.

AceSlowman

Where would that happen? Is background() called at the top of draw()? Thanks for the advice by the way, still new to processing, first large-ish project.

EDIT: Sorry, did it, and it works, thank you because that is definitely something I needed to know.