如何在 Processing(Java) 中添加标题和图例并创建不同的颜色
How to add a Title and legend in Processing(Java) and create diverging colors
我目前有一个代码可以使用处理将贫困率映射到各州。我想在地图上方添加一个标题和一个详细说明颜色的图例。目前我只有红色值，我还需要帮助创建从绿色（低值）到红色（高值）的不同颜色。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 将数据拉入圆圈：
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();
}
}
要添加标题：只需在绘制循环中添加一些文本即可。
void draw() {
AddTitle();
}
void AddTitle() {
fill(0);
textSize(20);
textAlign(CENTER);
text("Poverty Rate by State", width/2, 30);
}
要更改红色圆圈的颜色，使各州的等级从绿色（最贫困）到红色（最贫困）：
您正在使用 RGB (Red-Green-Blue)。每种颜色都是这些颜色的混合。这些树是用 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() 循环的每次迭代中，您都会 re-calculate 大量信息。这浪费了很多处理能力。当然，一台好的电脑不会有什么区别，但最好避免那样浪费资源。解决此问题的一个好方法是计算在 setup() 方法中绘制地图所需知道的一切，并在 draw() 循环中使用它。
现在，如果您对我刚才说的内容不感兴趣，请认为您已经有了答案，可以跳过其余部分。如果您想对当前的算法进行一些改进，那就来吧！
首先，我在一个不错的新 class:
中收集了您需要的所有信息
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 ArrayList 中循环并根据我们在 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);
}
}
}
现在，有了这些建议和一点点重构，您应该能够大大提升这个程序的质量！如果您还有其他问题，我会在附近闲逛。
玩得开心！
我目前有一个代码可以使用处理将贫困率映射到各州。我想在地图上方添加一个标题和一个详细说明颜色的图例。目前我只有红色值，我还需要帮助创建从绿色（低值）到红色（高值）的不同颜色。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 将数据拉入圆圈：
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();
}
}
要添加标题：只需在绘制循环中添加一些文本即可。
void draw() {
AddTitle();
}
void AddTitle() {
fill(0);
textSize(20);
textAlign(CENTER);
text("Poverty Rate by State", width/2, 30);
}
要更改红色圆圈的颜色，使各州的等级从绿色（最贫困）到红色（最贫困）：
您正在使用 RGB (Red-Green-Blue)。每种颜色都是这些颜色的混合。这些树是用 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() 循环的每次迭代中，您都会 re-calculate 大量信息。这浪费了很多处理能力。当然，一台好的电脑不会有什么区别，但最好避免那样浪费资源。解决此问题的一个好方法是计算在 setup() 方法中绘制地图所需知道的一切，并在 draw() 循环中使用它。
现在，如果您对我刚才说的内容不感兴趣，请认为您已经有了答案，可以跳过其余部分。如果您想对当前的算法进行一些改进，那就来吧！
首先，我在一个不错的新 class:
中收集了您需要的所有信息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 ArrayList 中循环并根据我们在 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);
}
}
}
现在，有了这些建议和一点点重构，您应该能够大大提升这个程序的质量！如果您还有其他问题，我会在附近闲逛。
玩得开心！