Little Boxes on the Hillside

Question

There's a satirical song called Little Boxes, originally by Malvina Reynolds, about suburban sprawl that has lyrics as follows:

Little boxes on the hillside,
Little boxes made of ticky-tacky,
Little boxes on the hillside,
Little boxes all the same.
There's a green one and a pink one
And a blue one and a yellow one,
And they're all made out of ticky-tacky
And they all look just the same.

Your job here is, given an integer input n>1 that represents the size of the house, output the four "little boxes" using the following colors (in 0xRRGGBB notation):

Green -- 0x00FF00
Pink --- 0xFF00FF (technically magenta)
Blue --- 0x0000FF
Yellow - 0xFFFF00

If your particular console doesn't have these exact colors, you may use the closest available (e.g., ANSI escape codes).

The houses are constructed with n _ representing the floor and roofline. They are surrounded by n/2 (round-up) | characters representing the walls. The roofs are always 2 high and are two / on the left edge, two \ on the right edge, and n-2 - representing the roof peak. As the houses get larger, the comparative size of the roof gets smaller; this is intended.

Here's a house of size 2:

 /\
/__\
|__|

Here's size 3:

 /-\
/___\
|   |
|___|

Here's size 7:

 /-----\
/_______\
|       |
|       |
|       |
|_______|

Thus given an input of 7, output four houses of size 7 as described above, with the first one in green, the second in pink (magenta), the third in blue, and the fourth in yellow. Output of the colors in that order is important.

Example picture of size 3:

Rules

• The houses can be horizontal or vertical so long as there is a clear separation between them.
• Leading/trailing newlines or other whitespace are optional, provided that the houses line up appropriately.
• Either a full program or a function are acceptable. If a function, you can return the output rather than printing it.
• Output can be to the console, saved as an image, etc.
• Standard loopholes are forbidden.
• This is code-golf so all usual golfing rules apply, and the shortest code (in bytes) wins.

Answer 1

JavaScript (ES6), Chrome / Firefox, 156 148 151 150 bytes

Saved 8 bytes thanks to @Shaggy
Saved 1 byte thanks to @Neil

n=>['0f0','f0f','00f','ff0'].map(c=>console.log(`%c /${'-'[r='repeat'](n-2)}\\
/${s='_'[r](n)}\\
${(`|${' '[r](n)}|
`)[r](~-n/2)}|${s}|`,'color:#'+c))

Demo

Make sure to open the console of your browser to get the colored output.

let f =

n=>['0f0','f0f','00f','ff0'].map(c=>console.log(`%c /${'-'[r='repeat'](n-2)}\\
/${s='_'[r](n)}\\
${(`|${' '[r](n)}|
`)[r](~-n/2)}|${s}|`,'color:#'+c))

f(3)

Answer 2

Python 2, 123 121 119 111 109 108 bytes

• Saved two bytes thanks to caird coinheringaahing; using the actual unprintable ASCII character instead of escaping it (\33)
• Could (and did) save a byte by writing an entire program using input() instead of defining a function
• Saved seven bytes thanks to ElPedro; using the fact that str(90+n) with 0<=n<=9 is "9%s"%n
• Saved two three bytes by using string formatting rather than string concatenation

N=input()
for(n)in"2543":Z="_"*N;print"[9%sm /"%n+~-~-N*"-"+"\ \n/%s\\\n"%Z+~-N/2*("|%s|\n"%" "*N)+"|%s|"%Z

Try it online!

Uses ANSI escape codes for coloring the houses.

Answer 3

Excel VBA, 243 Bytes

Anonymous VBE immediate window function that takes input from A1 and outputs to the range A2:A5

[C1]=vbLf:For i=1To 4:Cells(i+1,1)=[" /"&Rept("-",A1-2)&"\"&C1&"/"&Rept("_",A1)&"\"&C1&Rept("|"&Rept(" ",A1)&"|"&C1,A1/2)&"|"&Rept("_",A1)&"|"]:Cells(i+1,1).Font.Color=Array(32768,&HFF00FF,rgbBlue,65535)(i-1):Next:Cells.Font.Name="Courier New"

Output

Answer 4

Japt, 79 76 74 73 72 bytes

3#²¤r1'f ò3 w £Ol"%c /{ç- ¤}\\
/{ç'_}\\
{/2-½ ç"|{ç}|
"}|{ç'_}|"Xi`¬l:#

Try it (Open your browser's console before hitting "Run").

^{Thanks to ETH for helping me to test this last night while I was working it up on my phone.}

---

Explanation

Implicit input of integer U

3#²¤r1'f ò3 w

First we build an array of 3-digit hex colours to map over. The charcode of ² is 178 so 3#² gives us 3178. We convert that to a base-2 string with ¤ and then replace all occurrences of 1 with f. ò3 splits the string into an array of strings of length 3 and w reverses that array.
_{(I need to figure out a way to shorten that, somehow.)}

£Ol

We map over the array using £ - with X being the current element - and Ol logs to console. We'll be passing 2 strings to that, one containing the house and one containing the CSS.

Xi`¬l:#

The second string is constructed using i to prepend X with the compressed string color:#.

"%c /{ç- ¤}\\

The %c tells the console to use the second string as CSS. The top line of the house is built by repeating (ç) the - character U times and then slicing that from the second element (0-indexed) with ¤. The braces act as a shortcut, of sorts, for string concatenation.

/{ç'_}\\

The second line is built in a similar way, this time repeating the _ character U times.

{/2-½ çRi|²iUç 1}

The body of the house is built by first repeating the | character twice with ² and then inserting a space repeated U times into that string at index 1. The resulting string is then prepended to a newline (R) and that string is repeated U/2-0.5 times.

|{ç'_}|"

Finally, the last line is built in the same way as the second.

Answer 5

Python 2, 120 bytes

n=input()
for i in'2543':s='_'*n;print'[1;3'+i+('m /'+'-'*(n-2)+'\ \n/%s\\\n'%s+(-~n/2-1)*('|'+' '*n+'|\n')+'|%s|\n'%s)

Try it online! (shows escape chars instead of actual colors, tested on local terminal)

Answer 6

Yabasic, 220 bytes

An anonymous function that takes input as an integer, n and outputs 4 colored homes to the terminal.

The lack of a dedicated string repeating or replacement function in yabsic really hurts this response.

Clear Screen
Input""n
b$="__"
c$="|  "
For i=1To n-2
a$=a$+"-"
b$=b$+"_"
c$=c$+" "
Next
c$=c$+"|\n"
For i=1To n-4
d$=d$+c$
Next
For i=0To 3
?Color(Mid$("gremagbluyel",1+3*i,3))" /"+a$+"\\\n/"+b$+"\\\n"+d$+"|"+b$+"|"
Next

This version requires graphics mode and thus does not work on TIO.

Output

The input value for the below is n=7.

Answer 7

SmileBASIC, 115 bytes

INPUT N
H.H 6H 4H 2DEF H C
COLOR C+5?" /";"-"*(N-2);"\
?"/";"_"*N;"\
FOR I=3TO N?"|";" "*N;"|
NEXT?"|";"_"*N;"|
END

Another one which is also 115 bytes:

INPUT N
FOR J=0TO 3COLOR!!J*8-J*2+5?" /";"-"*(N-2);"\
?"/";"_"*N;"\
FOR I=3TO N?"|";" "*N;"|
NEXT?"|";"_"*N;"|
END

The colors codes I need (in 4-bit RGBI) are 5, 11, 9, 7. This is generated using !!J*8-J*2+5 If J is not 0, this is 13-J*2 (giving 11,9,7), and if it is, the result is just 5.