问题描述
我正在为我的 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()