我正在处理处理,我想知道是否可以使用命令宽度或高度来使事情变小。 例如
square(300, 250, 400);
rect(450, 50, 50, 200);
triangle(350, 250, 850, 250, 600, 50);
如何使用命令宽度或/和高度使这些变小? 如果我在解释自己,请告诉我! 预先感谢您!
在上面的示例中,您使用宽度高度常量。 您可以动态地使用变量。
这是一个绘制矩形的基本示例,当您拖动鼠标时,该矩形会改变宽度和高度:
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;
}
}