How to avoid drawing over oneself while drawing something from loop?

Processing Libraries
1

I am drawing a visualization map. I have connected a slider with the number of counts of my tables. While increasing the slider, the date I displayed as text draws over itself. How can I avoid it? I’ll place a photo of my problem here

Capture
Capture740×568 61.9 KB

I have placed background in draw.

Here is my code:

import controlP5.*;
import java.util.*;

PImage worldMap;
PShape worldMap1;
Table toUSA;
Table fromUSA;
Table latitudeLongitude;

int rowCount1, rowCount2, rowCount3;



ControlP5 cp5, cp6;

String cityNames[];
  Table table;
  int male, female, unknown;
  int totalMaleCity;
  int totalFemaleCity;
  int totalUnknownCity;
  String date;

float mx, my;

void setup() {
  background(#f2f2f2);
  size(1600, 900);
  
  
  worldMap = loadImage("world_map.png");  
  
  latitudeLongitude = new Table("lat_long.tsv");
  toUSA = new Table("to_usa.tsv");
  fromUSA = new Table("from_usa.tsv");
  
  rowCount1 = latitudeLongitude.getRowCount();
  rowCount2 = toUSA.getRowCount();
  float days1 = map(rowCount2, 0, 328, 0, 365);
  rowCount3 = fromUSA.getRowCount();
  
  
  //Slider for toUSA
  cp5 = new ControlP5(this);
  Slider s = cp5.addSlider("rowCount2")
   .setRange(0,328)
   .setValue(120)
   .setPosition(0,height - 40)
   .setSize(width,40);
 // change sliderMode of the Slider object. The default is Slider.FIX
   s.setSliderMode(Slider.FLEXIBLE); 
 
  
  //Slider for fromUSA
  cp6 = new ControlP5(this);
  Slider s1 = cp5.addSlider("rowCount3")
 .setRange(0,1525)
 .setValue(120)
 .setPosition(0,height - 100)
 .setSize(width, 40);
 // change sliderMode of the Slider object. The default is Slider.FIX
 s1.setSliderMode(Slider.FLEXIBLE); 
 
 redraw();
  
}

void draw() {
  background(#f2f2f2);
  worldMap.resize(width, height);
  image(worldMap, 0, 0);
  
  
  //Title:
  textSize(35);
  textAlign(CENTER);
  text("Ins and Outs from US Cities - 2019" , width/2, 40);
  
  ArrayList<String> tripEndDate = new ArrayList<String>();
   
  //From USA:
  for(int row = 1; row < rowCount3; row++) {
    date = fromUSA.getString(row, 9);
    float USApositionX = fromUSA.getFloat(row, 5);
    float USApositionY = fromUSA.getFloat(row, 6);
    String cityName = fromUSA.getString(row, 4);
    String dateTripEnd = fromUSA.getString(row, 9);
    float tripCityPositionX = fromUSA.getFloat(row, 7);
    float tripCityPositionY = fromUSA.getFloat(row, 8);
    textSize(12);
    textAlign(LEFT);
    fill(#312321);
    tripEndDate.add(dateTripEnd);
    ellipse(tripCityPositionX, tripCityPositionY, 5, 5);
    
    fill(#fcba19);
    ellipse(USApositionX, USApositionY, 30, 30);
    noFill();
    stroke(#0074d9,100);
    strokeWeight(1);
    bezier(USApositionX, USApositionY, USApositionX+35, USApositionY+20, tripCityPositionX+10, tripCityPositionY+20, tripCityPositionX, tripCityPositionY);
    fill(#002d5a, 200);
    text(cityName, tripCityPositionX, tripCityPositionY + 20);   
    
    textSize(20);
    text(dateTripEnd, 450, height-103);
    textSize(10);   
        
    //if((abs(mx-tripCityPositionX) < 1) && (abs(my-tripCityPositionY) < 1)) {
    //    fill(#FF0A0A);
    //    text(cityName, mx+6, my-10);
    //  }    
}
          
  
  //To USA:
  for(int row = 1; row < rowCount2; row++) {
    
    textSize(15);
    float customerCityPositionX = toUSA.getFloat(row, 5);
    float customerCityPositionY = toUSA.getFloat(row, 6);
    float tripCityPositionX = toUSA.getFloat(row, 7);
    float tripCityPositionY = toUSA.getFloat(row, 8);
    String dateTripEnd2 = toUSA.getString(row, 9);
    String cityName = toUSA.getString(row, 3);
    String countryName = toUSA.getString(row, 4);
    
    fill(#5472C1);
    ellipse(tripCityPositionX, tripCityPositionY, 5, 5);
    
    fill(#95D8AC);
    ellipse(customerCityPositionX, customerCityPositionY, 15, 15);
    noFill();
    stroke(#ff9037,100);
    strokeWeight(1);
    bezier(customerCityPositionX, customerCityPositionY, customerCityPositionX+35, customerCityPositionY+10, tripCityPositionX+30, tripCityPositionY+60, tripCityPositionX, tripCityPositionY);
    //noLoop();
    //text(cityName, tripCityPositionX, tripCityPositionY+40);
    fill(#ff3514);
    text(countryName, customerCityPositionX+10, customerCityPositionY);
    textSize(20);
    text(dateTripEnd2, 450, height-43);
    textSize(10);
   
  }

Here is the table class:

class Table {
  int rowCount;
  String[][] data;
  
  
  Table(String filename) {
    String[] rows = loadStrings(filename);
    data = new String[rows.length][];
    
    for (int i = 0; i < rows.length; i++) {
      if (trim(rows[i]).length() == 0) {
        continue; // skip empty rows
      }
      if (rows[i].startsWith("#")) {
        continue;  // skip comment lines
      }
      
      // split the row on the tabs
      String[] pieces = split(rows[i], TAB);
      // copy to the table array
      data[rowCount] = pieces;
      rowCount++;
      
      // this could be done in one fell swoop via:
      //data[rowCount++] = split(rows[i], TAB);
    }
    // resize the 'data' array as necessary
    data = (String[][]) subset(data, 0, rowCount);
  }
  
  
  int getRowCount() {
    return rowCount;
  }
  
  
  // find a row by its name, returns -1 if no row found
  int getRowIndex(String name) {
    for (int i = 0; i < rowCount; i++) {
      if (data[i][0].equals(name)) {
        return i;
      }
    }
    println("No row named '" + name + "' was found");
    return -1;
  }
  
  
  String getRowName(int row) {
    return getString(row, 0);
  }


  String getString(int rowIndex, int column) {
    return data[rowIndex][column];
  }

  
  String getString(String rowName, int column) {
    return getString(getRowIndex(rowName), column);
  }

  
  int getInt(String rowName, int column) {
    return parseInt(getString(rowName, column));
  }

  
  int getInt(int rowIndex, int column) {
    return parseInt(getString(rowIndex, column));
  }

  
  float getFloat(String rowName, int column) {
    return parseFloat(getString(rowName, column));
  }

  
  float getFloat(int rowIndex, int column) {
    return parseFloat(getString(rowIndex, column));
  }
  
  
  void setRowName(int row, String what) {
    data[row][0] = what;
  }


  void setString(int rowIndex, int column, String what) {
    data[rowIndex][column] = what;
  }

  
  void setString(String rowName, int column, String what) {
    int rowIndex = getRowIndex(rowName);
    data[rowIndex][column] = what;
  }

  
  void setInt(int rowIndex, int column, int what) {
    data[rowIndex][column] = str(what);
  }

  
  void setInt(String rowName, int column, int what) {
    int rowIndex = getRowIndex(rowName);
    data[rowIndex][column] = str(what);
  }

  
  void setFloat(int rowIndex, int column, float what) {
    data[rowIndex][column] = str(what);
  }


  void setFloat(String rowName, int column, float what) {
    int rowIndex = getRowIndex(rowName);
    data[rowIndex][column] = str(what);
  }  
}
1 Like
2

Please post code…

3

I have posted the code

5

In the draw() method you have 2 for loops and inside each oone you have a text statement, for instance in the first loop you have like
text(dateTripEnd, 450, height-103);

Obviously the text is being drawn in the same position everytime the for loop loops :smile:

The solution is to give the text different coordinates.

1 Like