循环和重复模式 - 编程之家

如何解决循环和重复模式

我正在为我的 Processing 类完成一个模式，这是我目前的代码

      color[] lemonspears =
      {
       #f9f8ae,//#0 highlight lemon
       #fffc24,//#1 mid lemon
       #d6c000,//#2 dark lemon
       #242000,//#3 detailing
       #e7b416,//#4 highlight pear 
       #a8da2b,//#5 mid pear
       #667a2a,//#6 dark pear
        #f2e6ba,//#7 light beige
        #8acdff,//#8 light blue
       #0551ff,//#9 dark blue

       };

       color palette[] = lemonspears;
       PShape Circle,Triangle;
       PShape oval,Pear,Olives,Leaves;
       PShape Twig,Dots,stem,Lines;

       PShape[] Fruit = new PShape[1];
       PShape[] Details = new PShape[1];

       void setup()
       {
       size(800,800);
       background(palette[7]);
       }


       void draw() {
       scale(.3,.3);
       pushmatrix();
       //BACKGROUND
       //outer circles

       fill(palette[8]);
       stroke(palette[9]);
       strokeWeight(5);
       circle( 30,40,200);
       circle( 760,200);
       circle( 30,760,200);

       //mid triangles
       fill(palette[9]);
        stroke(palette[8]);
         triangle( 350,405,80,460,0);
        stroke(palette[8]);
      triangle( 350,800,720,800);

        //mid circle
          ellipseMode(CENTER);
        stroke(palette[1]);
        fill(palette[4]);
        circle( 405,400,200);

       // right dots
        strokeWeight(3);
       stroke(palette[1]);
        fill(palette[4]);
        circle(630,330,11);
        circle(720,11);
        circle(630,470,11);

        // left dots
        circle(170,11);
       circle(80,11);
       circle(170,11);
     popMatrix();
     }

我希望这个图像作为一个平铺在屏幕上和整个屏幕上运行，我想知道使用循环的最佳方法是什么。我试过 translate() 但由于明显的原因它不起作用。谢谢！

解决方法

您可以将您的磁贴保存为 PImage (https://processing.org/reference/PImage.html)，然后通过将您的磁贴视为正方形来使用循环来细分它。

以下解决方案应该会产生您正在寻找的输出。

color[] palette =
  {
  #f9f8ae,//#0 highlight lemon
  #fffc24,//#1 mid lemon
  #d6c000,//#2 dark lemon
  #242000,//#3 detailing
  #e7b416,//#4 highlight pear 
  #a8da2b,//#5 mid pear
  #667a2a,//#6 dark pear
  #f2e6ba,//#7 light beige
  #8acdff,//#8 light blue
  #0551ff,//#9 dark blue

};

boolean drawTile = true;

void setup() {
  size(800,800);
  background(palette[7]);
}

void tessellateTile(float scale){
  // Save the sketch as a PImage
  PImage tile = get(0,width,height);
  
  // Calculate height and width of scaled tile
  int tileWidth = (int)(width*scale);
  int tileHeight = (int)(height*scale);
  
  // Resize tile
  tile.resize(tileWidth,tileHeight);
  
  // Redraw the tile at every position
  for(int i = 0; i <= width; i+= tileWidth){
    for(int j =0; j <= height; j+= tileHeight){
      image(tile,i,j);
    }
  }  
}

void draw() {
  // Tile should be drawn and tessellated once
  if(drawTile){
      //BACKGROUND
      //outer circles
      fill(palette[8]);
      stroke(palette[9]);
      strokeWeight(5);
      circle( 30,40,200);
      circle( 760,200);
      circle( 30,760,200);
    
      //mid triangles
      fill(palette[9]);
      stroke(palette[8]);
      triangle( 350,405,80,460,0);
      stroke(palette[8]);
      triangle( 350,800,720,800);
    
      //mid circle
      ellipseMode(CENTER);
      stroke(palette[1]);
      fill(palette[4]);
      circle( 405,400,200);
    
      // right dots
      strokeWeight(3);
      stroke(palette[1]);
      fill(palette[4]);
      circle(630,330,11);
      circle(720,11);
      circle(630,470,11);
    
      // left dots
      circle(170,11);
      circle(80,11);
      circle(170,11);
      
      // Comment this line out to just work on your single tile.
      tessellateTile(0.3);
      
      drawTile = false;
  }
}

使用 pushMatrix()/popMatrix() 来隔离坐标空间以单独转换形状组，您走在正确的轨道上。如果您在 for 循环中执行此操作，相应地增加 x,y 位置，您应该能够呈现重复模式：

color[] lemonspears =
  {
  #f9f8ae,//#9 dark blue

};

color palette[] = lemonspears;

void setup()
{
  size(800,800);
  
}

void draw() {
  background(palette[7]);
  scale(.3,.3);
  for(int i = 0 ; i < 3; i++){
    for(int j = 0 ; j < 3; j++){
      pushMatrix();
      translate(150 + i * mouseX,150 + j * mouseX);
      //BACKGROUND
      //outer circles
    
      fill(palette[8]);
      stroke(palette[9]);
      strokeWeight(5);
      circle( 30,11);
      popMatrix();
    }
  }
}

（注意我已经删除了未使用的变量）

Mady Daby 的方法也行 (+1) 使用这种方法，我还想指出，您可以使用应用 texture() 和 textureWrap(REPEAT) 来绘制四边形，这样会更快，并且不需要嵌套 for 循环（和多个 {{1 }} 调用）：

image()

希望评论有助于说明这个想法。

我注意到您在顶部声明了 color[] lemonspears = { #f9f8ae,//#9 dark blue }; color palette[] = lemonspears; PImage snapshot; void setup() { // use the OpenGL renderer to use textures size(800,P2D); background(palette[7]); scale(.3,.3); pushMatrix(); //BACKGROUND //outer circles fill(palette[8]); stroke(palette[9]); strokeWeight(5); circle( 30,200); circle( 760,200); circle( 30,200); //mid triangles fill(palette[9]); stroke(palette[8]); triangle( 350,0); stroke(palette[8]); triangle( 350,800); //mid circle ellipseMode(CENTER); stroke(palette[1]); fill(palette[4]); circle( 405,200); // right dots strokeWeight(3); stroke(palette[1]); fill(palette[4]); circle(630,11); circle(720,11); circle(630,11); // left dots circle(170,11); circle(80,11); circle(170,11); popMatrix(); // cache the drawn data as a bitmap snapshot = get(0,220,220); // set texture coordinates to normal (between 0.0 and 1.0) instead of pixel coordinates textureMode(NORMAL); // this will repeat the texture for you depending on the U,V coordinates passed in vertex(x,y,u,v) textureWrap(REPEAT); } void draw() { // map mouse position to tile repetitions int repeats = (int)map(mouseX,3,21); // start a quad shape beginShape(); // apply the texture texture(snapshot); // pass x,U,V coordinates // top left corner vertex(0,0); // top right corner vertex(width,repeats,0); // bottom right cornder vertex(width,height,repeats); // bottom left corner vertex(0,repeats); endShape(); // optional usage text fill(0); text("move mouse on X axis",10,15); } 变量，但没有使用。

你也可以使用它。例如，您可以使用 createShape() 创建所有圆形和三角形的 PShape（当然对每个基元（例如 GROUP、{{1} } 等），最后您只需调用 shape() 以在 for 循环中渲染组以渲染图块：

createShape()