# Issue With Making a House

**URL:** <https://discourse.processing.org/t/issue-with-making-a-house/13875>\
**Category:** Coding Questions\
**Created:** [September 8, 2019, 1:37pm UTC](https://discourse.processing.org/t/issue-with-making-a-house/13875 "2019-09-08T13:37:25Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Katerina\_P](https://avatars.discourse-cdn.com/v4/letter/k/e95f7d/32.png) [@Katerina\_P](https://discourse.processing.org/u/Katerina_P)\
**Post date:** [September 8, 2019, 1:37pm UTC](https://discourse.processing.org/t/issue-with-making-a-house/13875/1 "2019-09-08T13:37:25Z")

</div>

Hi Guys, Im trying to make a house and my code isn’t running. Can someone please tell me why?

This is the code:

```auto
void setup()
{
  size(200, 200);
  background(255);
  smooth();
}

void draw ()
{
 fill(#1E4609);
 rect (0, 500, 800, 600);
 fill (#E6F2E8);
 ellipse (240, 80, 100, 50);
 ellipse (200, 100, 100, 50);
 ellipse (220, 150, 100, 50);
 fill(#EBF233);
 ellipse(700, 75, 75, 75);
 }
 
 {
  fill(#714B11);
  rect (98, 388, 250, 125);
  fill (#837C71);
  rect (131, 420, 50, 50);
}

```

Thanks!

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [September 8, 2019, 1:40pm UTC](https://discourse.processing.org/t/issue-with-making-a-house/13875/2 "2019-09-08T13:40:51Z")

</div>

little cleanup, resize …  
and posted with \</\> code formatter

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

void draw () {
  background(255);
  fill(#1E4609);
  rect (0, 500, 800, 600);
  fill (#E6F2E8);
  ellipse (240, 80, 100, 50);
  ellipse (200, 100, 100, 50);
  ellipse (220, 150, 100, 50);
  fill(#EBF233);
  ellipse(700, 75, 75, 75);
  fill(#714B11);
  rect (98, 388, 250, 125);
  fill (#837C71);
  rect (131, 420, 50, 50);
}

```

you have clouds over the house, and still no roof, hurry up! rain is coming!

---

<div class="post-metadata">

**Author:** ![Katerina\_P](https://avatars.discourse-cdn.com/v4/letter/k/e95f7d/32.png) [@Katerina\_P](https://discourse.processing.org/u/Katerina_P)\
**Post date:** [September 8, 2019, 1:43pm UTC](https://discourse.processing.org/t/issue-with-making-a-house/13875/4 "2019-09-08T13:43:32Z")

</div>

Thank you so much! Appreciate it a lot 😁

I want to make a triangular roof, where would i add that in the code?

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [September 8, 2019, 1:45pm UTC](https://discourse.processing.org/t/issue-with-making-a-house/13875/5 "2019-09-08T13:45:44Z")

</div>

use the  
[https://processing.org/reference/triangle\_.html](https://processing.org/reference/triangle_.html)

and use it ?after the rectangle of the house?

please document your code like

```auto
// house:
fill()
rect()
fill()
stroke()
strokeWeight()
triangle()

```

but next step in coding would be  
-a- make the house a function  
-b- make it so that you can position it

```auto
void myHouse(int posx, int posy) {
  push();
  // graphic elements using relative to position 
  pop();
}

```

and call it like

```auto
  myHouse(100,400);

```

from draw()

---

<div class="post-metadata">

**Author:** ![Katerina\_P](https://avatars.discourse-cdn.com/v4/letter/k/e95f7d/32.png) [@Katerina\_P](https://discourse.processing.org/u/Katerina_P)\
**Post date:** [September 8, 2019, 1:57pm UTC](https://discourse.processing.org/t/issue-with-making-a-house/13875/6 "2019-09-08T13:57:32Z")

</div>

Ive done this so far and can’t seem to get it. I don’t know where to place the points of the triangle

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

void draw () {
  background(255);
  fill(#1E4609);
  rect (0, 500, 800, 600);
  fill (#E6F2E8);
  triangle (100,115, 58, 20, 86, 75);
  ellipse (100, 100, 100, 50);
  ellipse (300, 100, 100, 50);
  ellipse (500, 100, 100, 50);
  fill(#EBF233);
  ellipse(700, 75, 75, 75);
  fill(#714B11);
  rect (98, 388, 250, 125);
  fill (#837C71);
  rect (131, 420, 50, 50);
} ```
````

---

<div class="post-metadata">

**Author:** ![Katerina\_P](https://avatars.discourse-cdn.com/v4/letter/k/e95f7d/32.png) [@Katerina\_P](https://discourse.processing.org/u/Katerina_P)\
**Post date:** [September 8, 2019, 1:58pm UTC](https://discourse.processing.org/t/issue-with-making-a-house/13875/7 "2019-09-08T13:58:07Z")

</div>

![33%20pm](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7761edd59edac44daf8100a80a04c9daea0ccc8c.png)

---

<div class="post-metadata">

**Author:** ![Katerina\_P](https://avatars.discourse-cdn.com/v4/letter/k/e95f7d/32.png) [@Katerina\_P](https://discourse.processing.org/u/Katerina_P)\
**Post date:** [September 8, 2019, 1:59pm UTC](https://discourse.processing.org/t/issue-with-making-a-house/13875/8 "2019-09-08T13:59:03Z")

</div>

Here the triangle is in the cloud, and I get really confused about where to place them in relation to the rectangle.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 8, 2019, 2:09pm UTC](https://discourse.processing.org/t/issue-with-making-a-house/13875/9 "2019-09-08T14:09:44Z")

</div>

Hello!

In `draw()` write `println (mouseX,mouseY);`

(or `if (mousePressed) println (mouseX,mouseY);` )

- Start program
- Move mouse to where you want to have the corners of the triangle
- Make notes where they are on a sheet of paper
- Use them for your triangle

The coordinate system:

- The upper left corner of the screen is your `0,0`.
- x goes right, y goes down.

see also [https://www.processing.org/tutorials/drawing/](https://www.processing.org/tutorials/drawing/)

Chrisir

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [September 8, 2019, 2:12pm UTC](https://discourse.processing.org/t/issue-with-making-a-house/13875/10 "2019-09-08T14:12:46Z")

</div>

> [@Katerina\_P](#):
>
> where to place them in relation to the rectangle.

first step:

```auto
  myHouse();
}
void myHouse() {
  push();
  fill(#714B11);
  rect (100, 400, 250, 125);
  fill (#837C71);
  rect (131, 420, 50, 50);
  fill(0,200,100);
  stroke(0,0,100);
  strokeWeight(15);
  triangle (100, 400, 225, 320, 350, 400);
  pop();
}

```

next step: relative positioning

```auto
  myHouse(100,400);
}
void myHouse(int posx,int posy) {
  push();
  fill(#714B11);
  rect (posx, posy, 250, 125);
  fill (#837C71);
  rect (posx+31, posy+20, 50, 50);
  fill(0,200,100);
  stroke(0,0,100);
  strokeWeight(15);
  triangle (posx, posy, posx+125, posy-80, posx+250,posy);
  pop();
}

```

if you now try

```auto
  myHouse(mouseX,mouseY);

```

you see how good that function and position thing can be.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 8, 2019, 8:15pm UTC](https://discourse.processing.org/t/issue-with-making-a-house/13875/11 "2019-09-08T20:15:00Z")

</div>

> [@Katerina\_P](#):
>
> ellipse(700, 75, 75, 75);  
> } // end of draw()
> 
> { // No. ---------------------  
> fill(#714B11);  
> rect (98, 388, 250, 125);  
> fill (#837C71);  
> rect (131, 420, 50, 50);  
> } // No. --------------

The initial problem from your first post were these brackets { }

You can’t have a block of brackets outside of a function.

Instead, have these lines inside the function draw().

(inside draw() you can even use a block of brackets `{...}` )

---

<div class="post-metadata">

**Author:** ![Katerina\_P](https://avatars.discourse-cdn.com/v4/letter/k/e95f7d/32.png) [@Katerina\_P](https://discourse.processing.org/u/Katerina_P)\
**Post date:** [September 9, 2019, 12:09am UTC](https://discourse.processing.org/t/issue-with-making-a-house/13875/12 "2019-09-09T00:09:58Z")

</div>

Awesome! I tried running those codes but it kept coming up with error ‘it looks like you’re mixing active and static modes’, so I kept the code like this:

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

void draw () {
  background(255);
  fill(#1E4609);
  rect (0, 500, 800, 600);
  fill (#6F4C19);
  triangle (100,400, 225, 320, 350, 400);
  fill (#E6F2E8);
  ellipse (100, 100, 100, 50);
  ellipse (100,150, 100, 60);
  ellipse (300, 150, 100, 60);
  ellipse (300, 100, 100, 50);
  ellipse (500, 150, 100, 60);
  ellipse (500, 100, 100, 50);
  fill(#EBF233);
  ellipse(700, 75, 75, 75);
  fill(#B77512);
  rect (98, 388, 250, 125);
  fill (#DBBB8B);
  rect (260, 420, 50, 50);
  rect (131, 420, 50, 50);
  fill (#76592D);
  rect (205, 452, 30,60);
}

```

Now i want to animate the clouds to move up and down, how exactly do i do this? I’ve tried following the processing website instructions, but i keep coming up with error.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [September 9, 2019, 12:16am UTC](https://discourse.processing.org/t/issue-with-making-a-house/13875/13 "2019-09-09T00:16:47Z")

</div>

> [@Katerina\_P](#):
>
> Awesome! I tried running those codes but it kept coming up with error

how can it be awesome, if you can not test it?

sorry, i give example of making the house a own function.

and you learn that first and get that running.

> **[void / Reference](https://processing.org/reference/void.html)**
>
> Keyword used to indicate that a function returns no value. Each function must either return a value of a specific datatype or use the keyword void to specify it returns nothing.

fixing problems is number one for coders…

then you make same for the clouds  
-a- a own function  
-b- with relative positioning

and THEN we talk about a animation loop over that.

---

<div class="post-metadata">

**Author:** ![Katerina\_P](https://avatars.discourse-cdn.com/v4/letter/k/e95f7d/32.png) [@Katerina\_P](https://discourse.processing.org/u/Katerina_P)\
**Post date:** [September 9, 2019, 12:29am UTC](https://discourse.processing.org/t/issue-with-making-a-house/13875/14 "2019-09-09T00:29:08Z")

</div>

Why does it need to be a function?

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [September 9, 2019, 12:37am UTC](https://discourse.processing.org/t/issue-with-making-a-house/13875/15 "2019-09-09T00:37:01Z")

</div>

because you again not document anything in your code…  
and this way it reads very clear,  
and as i said, it will come handy for a animation.  
actually the play example with the usage of

```auto
 myHouse(mouseX,mouseY);

```

was to introduce you to moving element groups…

( but right: IT NOT NEED TO )

```auto
void setup() {
  size(800, 800);
  noStroke();
}

int x =200;

void draw () {
  background(175);
  myGround();
  myClouds(x,100);
  mySun(700, 75);
  myHouse(100,400);
}

```

and imagine you want a street with houses?

 ![myHouseCloudsMove](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/8c59daead2e3c2fe3986bd32128fb8e83287cbd4.png)