通过使用宽度或高度在处理中使事情变小

问题描述 投票:0回答:1

我正在处理处理,我想知道是否可以使用命令宽度或高度来使事情变小。 例如

square(300, 250, 400);
rect(450, 50, 50, 200);
triangle(350, 250, 850, 250, 600, 50); 

如何使用命令宽度或/和高度使这些变小? 如果我在解释自己,请告诉我! 预先感谢您!

processing
1个回答
0
投票

在上面的示例中,您使用宽度高度常量。 您可以动态地使用变量。

这是一个绘制矩形的基本示例,当您拖动鼠标时,该矩形会改变宽度和高度:

int rectWidth  = 50;
int rectHeight = 200;

void setup(){
  size(300, 300);
  background(255);
}

void draw(){
  rect(50, 50, rectWidth, rectHeight);
}

void mouseDragged(){
  rectWidth  = mouseX;
  rectHeight = mouseY;
}

您可以对形状和比例因子使用类似的方法,但不会考虑纵横比:

float scaleX  = 1.0;
float scaleY  = 1.0;

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

void draw(){
  background(255);
  square(300, 250, 400 * scaleX);
  rect(450, 50, 50 * scaleX, 200 * scaleY);
  triangle(350 * scaleX, 250 * scaleY, 
           850 * scaleX, 250 * scaleY, 
           600 * scaleY, 50 * scaleY);
}

void mouseDragged(){
  scaleX = map(mouseX, 0, width, 0.0, 3.0);
  scaleY = map(mouseY, 0, height, 0.0, 3.0);
}

如果您想享受随机形状的乐趣,这可能很好,否则您需要使用更一致的缩放方法:

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

void draw(){
  background(255);
  float houseScale = map(mouseX, 0, width, 0.0, 3.0);
  drawHouse(houseScale);
}

void drawHouse(float scaleValue){
  pushMatrix();
    scale(scaleValue);
    square(397, 250, 400); 
    rect(464, 50, 50, 200); 
    triangle(350, 250, 850, 250, 600, 50); 
  popMatrix();
}

请注意,上述内容没有考虑每个形状的 x,y 位置,因此不尊重每个形状的枢轴/原点,因此不会从中心缩放。

你之前的问题中,我还提到了绘图指令封装到可重用的函数中。您可以采用这种方法,公开参数/参数来控制如何绘制房屋(并在内部计算如何偏移每个坐标以从中心绘制等):

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

void draw(){
  background(255);
  drawHouse(width * 0.5, height * 0.5, //x, y
            map(mouseX, 0, width, 100, 300), // wall size
            map(mouseY, 0, height, 50, 250),
            50); // roof height);
}

void drawHouse(float x, float y, float wallSize, float roofHeight, float chimneyHeight){
  float originX = x - (wallSize * 0.5);
  float originY = y - (wallSize * 0.5);
  // make the roof 120% the width of the walls
  float roofWidthRatio = 1.2;
  float roofWidth = wallSize * roofWidthRatio;
  float roofHalfDifference = (roofWidth - wallSize) * 0.5;
  float roofBaseXMin = originX - roofHalfDifference;
  float roofBaseXMax = originX + wallSize + roofHalfDifference;
  // chimney location and size
  float chimneyXRatio = 0.25; // a percentage of where horizontall on the roof to place the chimney
  float chimneyWidth = wallSize * 0.12;
  float chimneyX = lerp(roofBaseXMin, roofBaseXMax, chimneyXRatio) - chimneyWidth * 0.5;
  float chimneyY = originY - (roofHeight * 0.25) - chimneyHeight;
  // draw walls
  square(originX, originY, wallSize); 
  // draw chimney
  rect(chimneyX, chimneyY, chimneyWidth, chimneyHeight); 
  // draw roof
  triangle(roofBaseXMin, originY, // left base point
           roofBaseXMax, originY,// right base point
           originX + (wallSize * 0.5), originY - roofHeight); // tip top 

}

您还可以在

for
循环中玩变体:

void setup(){
  size(900, 900);
  
  background(255);
 
  int numHouses = 9;
  float houseWidth = width / numHouses;
  for(int i = 0 ; i < numHouses; i++){
    float x = houseWidth * i + (houseWidth * 0.5);
    float y = random(height - 100, height - 120);
    float w = random(houseWidth - 50, houseWidth + 10);
    float h = random(100, 150);
    float c = random(50, 100);
    drawHouse(x, y, w, h, c);
  }
}


void drawHouse(float x, float y, float wallSize, float roofHeight, float chimneyHeight){
  float originX = x - (wallSize * 0.5);
  float originY = y - (wallSize * 0.5);
  // make the roof 120% the width of the walls
  float roofWidthRatio = 1.2;
  float roofWidth = wallSize * roofWidthRatio;
  float roofHalfDifference = (roofWidth - wallSize) * 0.5;
  float roofBaseXMin = originX - roofHalfDifference;
  float roofBaseXMax = originX + wallSize + roofHalfDifference;
  // chimney location and size
  float chimneyXRatio = 0.25; // a percentage of where horizontall on the roof to place the chimney
  float chimneyWidth = wallSize * 0.12;
  float chimneyX = lerp(roofBaseXMin, roofBaseXMax, chimneyXRatio) - chimneyWidth * 0.5;
  float chimneyY = originY - (roofHeight * 0.25) - chimneyHeight;
  // draw walls
  square(originX, originY, wallSize); 
  // draw chimney
  rect(chimneyX, chimneyY, chimneyWidth, chimneyHeight); 
  // draw roof
  triangle(roofBaseXMin, originY, // left base point
           roofBaseXMax, originY,// right base point
           originX + (wallSize * 0.5), originY - roofHeight); // tip top 

}

如果您尝试使用嵌套的 for 循环来绘制房屋网格,或者更好的是,如果您考虑到每排房屋的顺序以及 y 位置,您可以绘制一个小社区。

希望这足以开始。 (对于更高级的方法,例如绘图工具,这可能涉及 OOP/类,但这些旧的答案可能很方便: 拖动绘制矩形 无 ControlP5 版本:

ArrayList<Rectangle> rectList = new ArrayList<Rectangle>();

Rectangle selection = new Rectangle(0, 0, 0, 0);

void setup() {

  size(1000, 1000);
  rectList = new ArrayList<Rectangle>();

}

void draw() {
  background(255);
  // draw previous rectangles (black)
  stroke(0);
  for (int i = 0; i < rectList.size(); i++) {
    rectList.get(i).display();
  }
  // draw current selection (green)
  stroke(0, 192, 0);
  selection.display();
}

void mousePressed(){
  // store selection start
  selection.x = mouseX;
  selection.y = mouseY;
}

void mouseDragged(){
  // update selection dimension as the difference between the current mouse coordinates and the previous ones (selection x, y)
  selection.w = mouseX - selection.x;
  selection.h = mouseY - selection.y;
}

void mouseReleased(){
  // add a new rectangle to the list: a copy of the selection
  rectList.add(selection.copy());
  // reset selection
  selection.reset();
}

class Rectangle{
  
  private int x, y, w, h;
  
  Rectangle(int x, int y, int w, int h){
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
  }
  
  void display(){
    rect(x, y, w, h);
  }
  
  Rectangle copy(){
    return new Rectangle(x, y, w, h);
  }
  
  void reset(){
    x = y = w = h = 0;
  }

}

用于绘制形状的简单 UI)

© www.soinside.com 2019 - 2024. All rights reserved.