如何在 p5.js 中获得顶视图的房子

Question

我是 p5.js 的初学者，这是我目前的代码：

function setup() {
  createCanvas(600, 600);
}

function draw() {
  background(50, 168, 82);
  road();
  house();
}

function road() {
  fill(54, 59, 55);
  noStroke();
  rect(200, 0, 220, 600);


  fill(197, 222, 202);
  rect(300, 50, 40, 70);

  fill(197, 222, 202);
  rect(300, 200, 40, 70);

  fill(197, 222, 202);
  rect(300, 350, 40, 70);

  fill(197, 222, 202);
  rect(300, 500, 40, 70);
}

function house() {
  fill(209, 207, 61);
  rect(50, 50, 100, 100);
}

<script src="https://cdn.jsdelivr.net/npm/p5@1.3.1/lib/p5.js"></script>

这是结果： code result

我想要一个看起来像房子的顶视图房子，而不是那个黄色的矩形 ;) 我试过了，但我找不到房子。如果有人能为我做到这一点，我会很高兴。

如果你不明白top-view house是什么意思，可以看这张图：

房子可以是这些房子的形状。

Answer 1

如果你只想要一个简单的房子，你可以把正方形的两半做成不同的颜色（以显示不同的光线照射到屋顶的两侧）：

function setup() {
  createCanvas(400, 400);
  background(0);
  noStroke();
  fill(125);
  rect(100, 100, 200, 100);
  fill(200);
  rect(100, 200, 200, 100);
}

如果你想让它不那么简单，你至少需要使用 triangle(), probably also quad()。对于这两个命令，您都指定形状中每个点的 x 和 y 坐标。这是一个稍微复杂一点的房子的例子：

function setup() {
  createCanvas(400, 400);
  background(0);
  noStroke();
  fill(100);
  quad(50, 100, 
       350, 100, 
       300, 200, 
       100, 200
      );
  fill(200);
  quad(100, 200, 
       300, 200, 
       350, 300, 
       50, 300
      );
  fill(125);
  triangle(50, 100, 
           125, 200, 
           50, 300
          );
  triangle(350, 100, 
           275, 200, 
           350, 300
          );
}

如何在 p5.js 中获得顶视图的房子

How to get a top-view house in p5.js

javascript

p5.js