我正在尝试创建一个图形，使用 Map2.csv 中存储的坐标绘制美国 map 。然后，我使用 Water.csv 中的信息添加五大湖。然后，我将存储在 data1.csv 中的各种 cargo 的出发地和目的地坐标。
我希望处理过程能够足够慢地从出发地到目的地画一条线，以便您可以用眼睛跟踪 cargo 的路径。我希望有一个顺序元素，以便可以通过对 data1.csv 文件进行相应排序来按特定顺序绘制线条，但这不是必需的。
按原样编写，线条绘制得非常好，但是我的美国 map 不会绘制，并且出现错误说明
草图已自动调整大小以适应屏幕分辨率如果我从size(1620,1080, P2D)删除P2D， map 将绘制，但线条将不再移动。
下面是我的代码以及相关数据的链接。
Table data;
PShape plot;
long current;
int x;
int y;
void setup(){
size(1620, 1080, P2D);
background(55);
smooth();
// Draw US Map
String[] lines = loadStrings("Map2.csv"); // File containing coordinates to plot US Map
stroke(55);
strokeWeight(1);
smooth();
String[] pieces = split(lines[0], ',');
for ( int i = 0; i < lines.length; i++) {
fill(0);
beginShape();
current = int(pieces[0]);
while ( current == int(pieces[0]) & i < lines.length) {
x = int(pieces[2]);
y = int(pieces[1]);
vertex(x, y);
i++;
if ( i < lines.length) {
pieces = split(lines[i], ',');
}
}
endShape();
}
// Add Lakes to Map
String[] lines2 = loadStrings("Water.csv"); // File containing coordinates to plot great lakes
smooth();
fill(22, 25, 180);
String[] pieces2 = split(lines2[0], ',');
for (int i = 0; i < lines2.length; i++)
{
fill(110);
beginShape();
current = int(pieces2[0]);
while (current == int(pieces2[0]) & i < lines2.length) {
x = int(pieces2[2]);
y = int(pieces2[1]);
vertex(x, y);
i++;
if (i < lines2.length) {
pieces2 = split(lines2[i], ',');
}
}
endShape();
}
//create a group to store the lines from each row
plot = createShape(GROUP);
//load the data, specifying it has a header and it's tab separated
data = loadTable("data2.tsv", "header, tsv");
//traverse each row
for (TableRow row : data.rows ()) {
//extract each value
int x1 = row.getInt("x1");
int y1 = row.getInt("y1");
int x2 = row.getInt("x2");
int y2 = row.getInt("y2");
//add the coordinates as lines to the group
PShape line = createShape(LINE, x1, y1, x2, y2);
plot.addChild(line);
}
shape(plot);
strokeWeight(1.0);
}
void draw(){
//hacky fade effect, change the alpha/transparency value to experiment with fade amount
background(55);
int r = 65;
int g = 255;
int b = 35;
stroke(r, g, b);
//animate the trajectories
//use normalized (between 0.0 and 1.0) value to traverse the paths (think of it as 0 and 100%, 0 is at the start 100% is at the end)
//if can be interactive
float traversal;
if(mousePressed) {
traversal = map(mouseX,0,width,0.0,1.0);
}else{//or time based, up to you :)
traversal = map(sin(frameCount * 0.01),-1.0,1.0,0.0,1.0);
}
beginShape(LINES);
//for each trajectory
for(int i = 0 ; i < plot.getChildCount(); i++){
PShape line = plot.getChild(i);
//access each line's start and end points
PVector start = line.getVertex(0);
PVector end = line.getVertex(1);
//calculate the linearly interpolated point in between start end using the traversal value and lerp()
PVector inbetween = PVector.lerp(start,end,traversal);
//use the interpolated value to draw
stroke(64);
vertex(start.x,start.y);
stroke(160);
vertex(inbetween.x,inbetween.y);
}
endShape();
}
数据1 <"https://docs.google.com/spreadsheets/d/1QzbCGW8H6PZgLkmWN8OyplVNTJhp3tlPGxR_Zv6lttM/edit?usp=sharing">
最佳答案
您有几个问题，但我会尝试一次逐一解决。
Written as is, the lines draw very nicely, however my map of the US will not draw and I get an error stating
The sketch has been automatically resized to fit the screen resolution.
我最好的猜测是，处理无法创建大于屏幕分辨率的窗口。您可以创建一个全屏应用程序，但这实际上并不重要:您不应该将自己束缚在一种屏幕尺寸上；您应该编写代码，以便任何窗口大小都可以工作。稍后会详细介绍。
无论如何，为了消除第一个错误，让我们使用较小的尺寸:
size(810, 540, P2D);
但是现在您只能看到一些线条，因为无论窗口大小如何，您总是绘制到相同的坐标。让我们改变这一点。
请注意 draw() 函数末尾的这些行:
stroke(64);
vertex(start.x,start.y);
stroke(160);
vertex(inbetween.x,inbetween.y);
请注意，您直接使用顶点 的x 和y 值。仅当您的窗口和顶点值使用相同的比例时，这才有效。相反，您应该缩放顶点值，以便它们考虑窗口的宽度和高度。一种方法是这样的:
stroke(64);
vertex(width/1620.0 * start.x, height/1080.0 * start.y);
stroke(160);
vertex(width/1620.0 * inbetween.x, height/1080.0 * inbetween.y);
酷，现在我们已经以更合理的比例绘制了您的线条。下一个问题:
however my map of the US will not draw
注意您在哪里绘制 map 。您只需在 setup() 函数中绘制它一次。但随后您只需在 draw() 函数中使用 background() 调用对其进行绘制，因此您永远看不到它!
由于您在加载文件时绘制 map 和湖泊，因此通过 draw() 函数执行此操作会减慢您的草图速度。您无需移动任何逻辑，只需在 setup() 中将 map 和湖泊绘制到 PGraphics 中，然后绘制该 PGraphics 在您的 draw() 函数中。
为此，您首先必须在草图顶部声明一个 PGraphics 变量:
PGraphics mapGraphics;
然后您将更改绘图代码以使用该 PGraphics 来代替:
// Draw US Map
String[] lines = loadStrings("Map2.csv"); // File containing coordinates to plot US Map
mapGraphics = createGraphics(width, height);
mapGraphics.beginDraw();
mapGraphics.stroke(55);
mapGraphics.strokeWeight(1);
mapGraphics.smooth();
String[] pieces = split(lines[0], ',');
for ( int i = 0; i < lines.length; i++) {
mapGraphics.fill(0);
mapGraphics.beginShape();
current = int(pieces[0]);
while ( current == int(pieces[0]) & i < lines.length) {
x = int(pieces[2]);
y = int(pieces[1]);
mapGraphics.vertex(width/1620.0 * x, height/1080.0 * y);
i++;
if ( i < lines.length) {
pieces = split(lines[i], ',');
}
}
mapGraphics.endShape();
}
// Add Lakes to Map
String[] lines2 = loadStrings("water.csv"); // File containing coordinates to plot great lakes
mapGraphics.smooth();
mapGraphics.fill(22, 25, 180);
String[] pieces2 = split(lines2[0], ',');
for (int i = 0; i < lines2.length; i++)
{
mapGraphics.fill(110);
mapGraphics.beginShape();
current = int(pieces2[0]);
while (current == int(pieces2[0]) & i < lines2.length) {
x = int(pieces2[2]);
y = int(pieces2[1]);
mapGraphics.vertex(width/1620.0 * x, height/1080.0 * y);
i++;
if (i < lines2.length) {
pieces2 = split(lines2[i], ',');
}
}
mapGraphics.endShape();
}
mapGraphics.endDraw();
请注意，我还添加了缩放 map 的逻辑 - 否则，您的 map 对于窗口来说太大了!
然后您只需从 draw() 函数中绘制 PImage 即可:
void draw() {
//hacky fade effect, change the alpha/transparency value to experiment with fade amount
background(55);
image(mapGraphics, 0, 0);
//...
关于java - 运动 : Drawing a Line from an Origin to a Destination in Processing，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34456143/