Processing绘制字母图案重叠问题技术求助

你的代码核心问题是矩阵变换时的平移参数错误，导致翻转后的图形没有被正确定位到网格位置，进而产生重叠。以下是具体问题点和修正方案：

错误分析 #

1. 水平翻转（los2 == 1）：使用translate(-width, 0)是对整个画布的平移，而非针对单个网格元素调整位置，导致翻转后的元素偏离网格。
2. 垂直翻转（los2 == 2）：同理，translate(0, -height)是对整个画布的平移，而非单个元素的垂直位置修正。
3. 双向翻转（los2 == 3）：translate(-100, -height)的参数完全不符合单个元素的定位逻辑，导致元素严重偏移重叠。

修正后的代码 #

void setup() {
  size(1000, 1000);
  background(0, 70, 100);
}

void monogram(int x, int y) {
  int los = int(random(0, 255));
  stroke(0, 185, 255, los);
  strokeWeight(5);

  // U
  noFill();
  arc(x + 25, y + 60, 20, 20, 0, PI);
  line(x + 15, y + 20, x + 15, y + 57);
  line(x + 35, y + 20, x + 35, y + 57);

  // VV
  noFill();
  beginShape();
  vertex(x + 35, y + 20);
  vertex(x + 55, y + 70);
  vertex(x + 75, y + 20);
  endShape();

  // V
  noFill();
  beginShape();
  vertex(x + 55, y + 20);
  vertex(x + 75, y + 70);
  vertex(x + 95, y + 20);
  endShape();
}

void draw() {
  // 单个元素的宽高：宽度80，高度50
  int elemWidth = 80;
  int elemHeight = 50;

  for (int y = 0; y < height / 50; y++) {
    for (int x = 0; x < width / 70; x++) {
      int los2 = int(random(0, 4));
      int drawX = -15 + 80 * x;
      int drawY = -18 + 50 * y;

      pushMatrix();

      if (los2 == 1) {
        // 水平翻转：针对单个元素宽度平移修正
        scale(-1, 1);
        translate(-(drawX + elemWidth), 0);
      } else if (los2 == 2) {
        // 垂直翻转：针对单个元素高度平移修正
        scale(1, -1);
        translate(0, -(drawY + elemHeight));
      } else if (los2 == 3) {
        // 双向翻转：同时修正宽高的平移
        scale(-1, -1);
        translate(-(drawX + elemWidth), -(drawY + elemHeight));
      }

      monogram(drawX, drawY);
      popMatrix();
    }
  }
  noLoop();
}

修正说明 #

• 先计算每个元素的原始绘制位置drawX和drawY，再根据翻转类型调整矩阵变换的平移参数。
• 平移时针对单个元素的宽高（elemWidth=80、elemHeight=50）进行修正，确保翻转后的元素仍落在对应的网格位置上，避免重叠。

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