如何在Processing（Java）中添加标题和图例并创建不同的颜色

Question

我目前有一个代码，可以使用处理方法将贫困率映射到各州。我想在地图上方添加标题，并详细说明颜色。当前我只有红色值，我还需要帮助来创建从绿色（低值）到红色（高值）的颜色。Link to files以下是我的代码：

PImage mapImage;
Table locationTable;
int rowCount;
Table dataTable;
float dataMin = MAX_FLOAT;
float dataMax = MIN_FLOAT;
int toggle = 0;
void setup( ) {
size(640, 400);
  surface.setTitle("Poverty Rate by State");
  surface.setResizable(true);
  surface.setLocation(100, 100);

mapImage = loadImage("map.png");
locationTable = new Table("locations.tsv");
rowCount = locationTable.getRowCount( );
// Read the data table.
dataTable = new Table("poverty2017.tsv");
// Find the minimum and maximum values.
for (int row = 0; row < rowCount; row++) {
float value = dataTable.getFloat(row, 1);
if (value > dataMax) {
dataMax = value;
}
if (value < dataMin) {
dataMin = value;
}
}
}

void draw( ) {
background(255);
image(mapImage, 0, 0);
smooth( );
fill(192, 0, 0);
noStroke( );
for (int row = 0; row < rowCount; row++) {
String abbrev = dataTable.getRowName(row);
float x = locationTable.getFloat(abbrev, 1);
float y = locationTable.getFloat(abbrev, 2);
drawData(x, y, abbrev);
}
}

void drawData(float x, float y, String abbrev) {
float value = dataTable.getFloat(abbrev, 1);
float radius = 0;
if (value >= 0) {
radius = map(value, 0, dataMax, 1.5, 15);
fill(#FF4422); // Red
} else {
radius = map(value, 0, dataMin, 1.5, 15);
fill(#FF4422); // red
}
ellipseMode(RADIUS);
ellipse(x, y, radius, radius);
if (dist(x, y, mouseX, mouseY) < radius+2) {
fill(0);
textAlign(CENTER);
// Show the data value and the state abbreviation in parentheses.
text(value + " (" + abbrev + ")", x, y-radius-4);
}
}

使用以下类将数据作为圆圈拉入：

class Table {
  String[][] data;
  int rowCount;


  Table() {
    data = new String[10][10];
  }


  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);
  }


  // Write this table as a TSV file
  void write(PrintWriter writer) {
    for (int i = 0; i < rowCount; i++) {
      for (int j = 0; j < data[i].length; j++) {
        if (j != 0) {
          writer.print(TAB);
        }
        if (data[i][j] != null) {
          writer.print(data[i][j]);
        }
      }
      writer.println();
    }
    writer.flush();
  }
}

Answer 1

要添加标题：只需在绘图循环中添加一些文本。

void draw() {
  AddTitle();
}

void AddTitle() {
  fill(0);
  textSize(20);
  textAlign(CENTER);
  text("Poverty Rate by State", width/2, 30);
}

要更改红色圆圈的颜色，使状态从绿色（最贫困）到红色（最大贫困）：

您正在使用RGB（红-绿-蓝）。每种颜色都是这些的混合。这些树是使用从0到255的数字计算的。例如，黑色为（0，0，0），红色为（255，0，0）。该数字越低，混合的特定颜色就越少。

color myColorRed = color(255, 0, 0);

因此，要使填充动态化，您必须找到一种方法，当贫困率增加时，红色部分就会增加]，同时降低绿色部分。这是一个简单的计算方法，完全可以做到这一点：

float colorOffset = 255 * ((povertyRate - dataMin) / (dataMax - dataMin));
color(colorOffset, 255-colorOffset, 0);
您可以在逻辑中的正确位置包含此符号，它应该可以解决问题。但是请注意：此计算基于dataMin和dataMax。这意味着最低的数字将是绿色，最高的数字将是红色，而不是0％是绿色，而100％是红色。您可能会以这种方式喜欢它，但是如果您想要其他东西，则必须使这种逻辑适应您的需求。

现在...这里有些事困扰着我。在draw()循环的每次迭代中，您都会重新计算很多信息。这浪费了很多处理能力。当然，拥有一台好的计算机不会有任何区别，但是避免这种浪费资源是一种很好的做法。解决此问题的一种好方法是计算在setup()方法中绘制地图所需的所有知识，并在draw()循环中使用它。

现在，如果您对我刚才所说的内容不感兴趣，请考虑您已经回答了，您可以跳过其余的内容。如果您想在当前算法上有所改进，那就让我们摇滚吧！

---

首先，我在一个不错的新类中收集了您需要的所有信息：

class StateData {
  public String name;
  public PVector location; // I'll just use this to have nice x and y floats, but there's a lot of nice stuff available with this class (which I won't use here)
  public float povertyRate;
  public float radius;
  public color fill;

  StateData(String name, PVector location, float povertyRate) {
    this.name = name;
    this.location = location;
    this.povertyRate = povertyRate;
    this.radius = map(povertyRate, 0, dataMax, 1.5, 15);

    float colorOffset = 255 * ((povertyRate - dataMin) / (dataMax - dataMin));
    this.fill = color(colorOffset, 255-colorOffset, 0);
  }
}
自然，我需要填写这些信息并将其存储在某个地方。我创建了一个全局变量：

ArrayList<StateData> stateData;
我将在setup()方法中使用以下函数来填充此全局变量，因此我只需要计算所有这些事情一次：

ArrayList<StateData> GetStateData() {
  ArrayList<StateData> data = new ArrayList<StateData>();

  for (int row = 0; row < rowCount; row++) {
    String abbrev = dataTable.getRowName(row);
    float value = dataTable.getFloat(abbrev, 1);
    float x = locationTable.getFloat(abbrev, 1);
    float y = locationTable.getFloat(abbrev, 2);
    data.add(new StateData(abbrev, new PVector(x, y), value));
  }

  return data;
}
您会注意到，我主要是在这里回收您的代码。那是因为您的代码完成任务

。辛苦了这只是非常低效的，这应该在这方面有所帮助。

现在，您的setup()方法应该看起来像这样：

void setup() {
  size(640, 400);
  smooth();
  noStroke();

  mapImage = loadImage("map.png");
  locationTable = new Table("locations.tsv");
  rowCount = locationTable.getRowCount( );
  dataTable = new Table("poverty2017.tsv");
  for (int row = 0; row < rowCount; row++) {
    float value = dataTable.getFloat(row, 1);
    if (value > dataMax) {
      dataMax = value;
    }
    if (value < dataMin) {
      dataMin = value;
    }
  }

  stateData = GetStateData();
}
以及您的draw()循环如下：

void draw() {
  background(255);
  image(mapImage, 0, 0);

  DrawStats();
  AddTitle();
}
等等...­ DrawStats()是什么？这是一种方法，它将在stateData方法中循环，并根据存储在setup()方法中的数据绘制所有内容：

void DrawStats() {
  // draw circles
  for (StateData s : stateData) {
    fill(s.fill);
    ellipseMode(RADIUS);
    ellipse(s.location.x, s.location.y, s.radius, s.radius);
  }
  // draw text (here so it's over the circles)
  for (StateData s : stateData) {
    if (dist(s.location.x, s.location.y, mouseX, mouseY) < s.radius+2) {
      fill(0);
      textAlign(CENTER);
      textSize(10);
      text(s.povertyRate + " (" + s.name + ")", s.location.x, s.location.y-s.radius-4);
    }
  }
}
现在，有了这些指针并进行了一些重构，您应该能够对该程序提供不错的质量提升！如果您还有其他问题，我会在附近闲逛。

玩得开心！