center a table in window?

2»

Answers

  • So close to awesome! I think I need an if/else statement to make the words disappear when the mouse moves off the ellipse. Or could something like this be used:

    void mousePressed() {
      loop();  // Holding down the mouse activates looping
    }
    
    void mouseReleased() {
      noLoop();  // Releasing the mouse stops looping draw()
    }
    

    Capture4

    And is there a way to keep the population density from stopping when the mouse hovers?

  • I need an if/else statement to make the words disappear when the mouse moves off the ellipse

    when you have background at start of draw() everything is deleted and redrawn. That's the way to go.

    then the if-clause we currently have is enough, it shows the text only when needed, old texts are deleted with background

    is there a way to keep the population density from stopping when the mouse hovers?

    It only stops with noLoop() and you don't need this with background at start of draw()

  • I must be missing something.

    As my code sits now, with background at the start of draw, the background image pops up, then disappears to this: Capture5

    Then when I hover over an ellipse I get this, however the text is now behaving properly.

    Capture6

    But I need the background image and the population density to stay on the screen.

        //add background image
        PImage img;
    
        Table tabela;
    
        void setup() {
          size(1200, 675); //size of screen
          PFont myFont=createFont("Arial", 12);
          textFont(myFont);
          loop();
          img = loadImage("1200x675.png");
          background(img);
        }
    
        void draw() {   
    
          background(0);
    
          Table tabela = loadTable("cities.tsv", "header");
          // calc the width of one column 
          float factor = (width - 25) / tabela.getRowCount();  
    
          //adjust for spacing on screen with additional cities represented
          for (int i = 0; i < tabela.getRowCount(); i++) {
    
            TableRow linha = tabela.getRow(i);
    
            float posX = factor*i + 50;
            int posY = 405;
    
            float lado = sqrt(linha.getInt("Area")); 
            ellipse(posX, posY, lado, lado);
    
    
            //pull population data to fill the area ellipse
            for (int j=0; 
              j<linha.getInt("Population")/5000; 
              j=j+1) {
    
              //generates population points in flux
              float radius=random(lado / 2);    
              float angle=random(TWO_PI);
    
              float x=radius*cos(angle)+posX;  
              float y=radius*sin(angle)+posY;
    
              //adds  random color to points if you want
              //stroke(random(255), random(255), random(255)); 
              point(x, y);
    
              //When the mouse hovers over a circle the name of the city appears.
              if (dist(mouseX, mouseY, posX, posY)<25) {
    
                // draw a box
                float dist = -3;
                stroke(0);
                fill(3, 48, 22); // yellow 
                rect (posX-10+dist, 
                  posY-60+dist, 
                  textWidth(linha.getString("City"))+10, 
                  32);
                noStroke(); 
    
                // draw text 
                fill(220); 
                text(linha.getString("City"), posX-10, posY-60+16);
              }
            }
          }
        }
    
  • this

     background(img);
    }
    
    void draw() {   
    
      background(0);
    

    should be

     background(img);
    }
    
    void draw() {   
    
     background(img);
    

    ;-)

  • "facepalm!" that should have been obvious to me!

    What about the population density dissapearing when hovering over the ellipse to get the text?

    Capture7

  • this is either caused by noLoop() or you kill the fill or stroke color (by displaying the text). Show your entire code

  • same code as above, with the exception of changing the background (0) to (img)

  • edited October 2017

    directly before point(x, y); you want stroke (255); because we set stroke to black (0) in line 56

    OK?

  • PERFECT!!! You absolutely rock!!

Sign In or Register to comment.