Processing中texture()无法应用到图形的问题求助

问题场景 #

我尝试给点击「森林砍伐（Deforestation）」按钮生成的图表，用本地文件夹中的树木图片作为填充纹理替代纯黑色。后续计划给海平面和CO₂图表添加对应纹理，目前先聚焦解决森林纹理的问题，因此在森林按钮的代码中把img变量设置为树木图片。但运行时控制台报错：

texture() is not available with this renderer

原始代码 #

Table table;
IntList yearList;
IntList graphedData;
String fileName;
String name;
PImage img;

void loadLabelsAndButtons() {
  // Draw sea level button
  fill(255); // added fill color

  //c02 button
  rect(50, 560, 150, 30, 18);
  textSize(12);
  textAlign(CENTER);
  fill(0, 0, 0);
  text("c02 Increase ", 120, 580);


  //sealevel button
  fill(255); // added fill color
  rect(250, 560, 150, 30, 18);
  fill(0, 0, 0);
  text("Sea increase", 320, 580);

  //deaforstation button
  fill(255); // added fill color
  rect(450, 560, 150, 30, 18);
  fill(0, 0, 0);
  text("Deforestation", 520, 580);
}

void setup() {
  size(700, 600);
  loadLabelsAndButtons();
}

void draw() {
}

void mousePressed() {
 //sky map button
  if (mouseX > 50 && mouseX < 200 && mouseY > 560 && mouseY < 590) {
    //calls forest map

    drawGraph("sky.csv");
    textSize(20);
    text("Global c02 increase scince 1960", 350, 100);
    textSize(12);
    text("(Million metric tons)", 350, 125);
    fill(128,128,128);
    text("(Source: Global Carbon Project:)", 350, 145);
  }
   //sealevel map button
  if (mouseX > 250 && mouseX < 400 && mouseY > 560 && mouseY < 590) {
    //calls seaslevel map
    drawGraph("seaLevel.csv");
    textSize(20);
    text("United States sea-level increase scince 1960", 350, 100);
    textSize(12);
    text("(Millimeters)", 350, 125);
    fill(128,128,128);
    text("(Source:NOAA)", 350, 145);

  }
   //forest map button
  if (mouseX > 450 && mouseX < 600 && mouseY > 560 && mouseY < 590) {
    //calls forest map
    img = loadImage("tree.jpg");
    drawGraph("deforest.csv");
    
    textSize(20);
    text("Global deforestation scince 1960", 350, 100);
    textSize(12);
    text("(Million Hectares)", 350, 125);
    fill(128,128,128);
    text("(Source: Worl Data:)", 350, 145);

  }
}

void drawGraph(String name) {
  background(255);
  //clear canvas
  loadLabelsAndButtons();

  //getsdata for new graph to draw
  parseData(name);

  //creates x axis
  yearText();
  int y = 600;
  int x = 50;
  int v = 0;

  textureMode(NORMAL);
  texture(img);

  beginShape();
  for (v = 0; v < yearList.size(); v++) {

    texture(img);
    y = graphedData.get(v);

    // align to the middle of the screen
    vertex(x, (900 - y) / 2 + 50);
    x = x + 50;
  }
  vertex(x-50, 900/2 + 50); // add vertex to complete the shape
  endShape();
  yearText();
}

//gets data for graphs from each spreadsheet
void parseData(String fileName) {
  //water levels
  yearList = new IntList();
  graphedData = new IntList();
  table = loadTable(fileName, "header");
  for (TableRow row : table.rows()) {
    int year = row.getInt("Year");
    int yValue = row.getInt("Rise");
    yearList.append(year);
    graphedData.append(yValue);
  }
}

//headers for x axis
void yearText() {
  int y = 0;
  int yText = 0;
  int x = 50;
  int v = 0;
  int xText = 0;
  for (v = 0; v < yearList.size(); v++) {
    yText = graphedData.get(v);
    xText = yearList.get(v);
    y = (900 - yText) / 2 + 50;
    fill(0);
    textSize(12);
    textAlign(CENTER);
    text(yText, x, y - 10);
    text(xText, x, 550);
    x = x + 50;
  }
}

解决方案 #

1. 更换支持纹理的渲染器

Processing默认的JAVA2D渲染器不支持texture()函数，必须改用P2D或P3D渲染器。修改setup()中的size()方法：

void setup() {
  size(700, 600, P2D); // 用P2D渲染器，足够处理2D纹理需求
  img = loadImage("tree.jpg"); // 提前预加载图片，避免重复加载
  loadLabelsAndButtons();
}

2. 补充纹理UV坐标

使用texture()时，vertex()需要传入纹理的UV坐标（即图片上的位置），否则纹理无法正确映射到图形上。修改drawGraph()中的循环部分：

beginShape();
textureMode(NORMAL);
texture(img);
for (v = 0; v < yearList.size(); v++) {
  y = graphedData.get(v);
  float xPos = x;
  float yPos = (900 - y) / 2 + 50;
  // 传入UV坐标：u从0到1，v固定为0或根据需求调整
  vertex(xPos, yPos, 0, (float)v / yearList.size(), 0);
  x += 50;
}
vertex(x-50, 900/2 + 50, 0, 1, 0); // 最后一个顶点也补充UV坐标
endShape();

3. 优化图片加载逻辑

不要每次点击按钮才加载图片，把图片加载放到setup()中预加载。如果后续要给不同图表用不同纹理，可以给drawGraph()增加一个PImage参数：

// 修改drawGraph方法签名
void drawGraph(String name, PImage textureImg) {
  background(255);
  loadLabelsAndButtons();
  parseData(name);
  yearText();
  
  int y = 600;
  int x = 50;
  int v = 0;

  textureMode(NORMAL);
  texture(textureImg); // 使用传入的纹理图片

  beginShape();
  for (v = 0; v < yearList.size(); v++) {
    y = graphedData.get(v);
    float xPos = x;
    float yPos = (900 - y) / 2 + 50;
    vertex(xPos, yPos, 0, (float)v / yearList.size(), 0);
    x += 50;
  }
  vertex(x-50, 900/2 + 50, 0, 1, 0);
  endShape();
  yearText();
}

然后在按钮点击时传入对应图片：

// 森林按钮点击事件
if (mouseX > 450 && mouseX < 600 && mouseY > 560 && mouseY < 590) {
  drawGraph("deforest.csv", img);
  // 后续其他按钮可以加载对应图片后传入，比如海平面用海水图片
  // drawGraph("seaLevel.csv", seaImg);
  // ...文本部分不变
}

4. 确保图片路径正确

把tree.jpg放到Processing项目的data文件夹中（如果没有就新建一个），或者使用完整文件路径（比如loadImage("C:/images/tree.jpg")）。

内容的提问来源于stack exchange，提问作者Aaaa Aa