Building a yellow house with a red roof

We are standing by the computer and in the room there are about 16 other kids, most of them making computer games using Scratch, the software from MIT to create small games and animations.

By Bobbie and David Cuartielles.

This post was originally published in the Medea publication Prototyping Futures.

B looks at me, I can see the excitement in her eyes, she is always happy to join me at CoderDojo to build things together. I am not sure what will come from this experiment. While still on the bus on our way here, B insisted that she wanted to have a yellow house with a staircase and a red rooftop. She is almost five, doesn’t know how to read more than a few letters, and she can barely write her mum’s name, or her own.

Taking B to a programming activity might seem as if I was pushing too hard, but she wants to come. To me it is enough to have her interacting with the other computer-interested kids and see what they are doing in order to imagine the possibilities. B is not only an average of 6 years younger than any of the other kids, but also a little shy. Therefore my role in this event is dual: first, I am B’s connection to the abstract world of computing, second, I am the ice-breaker. I don’t speak Swedish, but I am responsible for somehow establishing a communication link with the teens in the room to discuss programming and bring together their interests and the ones from my daughter.

I open up the computer and while the processing boots, I bring out from my backpack the box where we carry our Arduino board, a shield to easily connect sensors to it, some wires, LEDs, a USB cable and the most precious jewel in B’s eyes: the slider.

She simply loves the slider. You can use this sensor to dim a lamp or to change the speed of a motor. B loves to hold it in one hand and to move it back and forth along its axis. She’s learned how to plug the slider into the shield and the shield to the Arduino board and explain to me how she does it. I keep an eye on her as I start typing:

void setup() {
}

void draw() {
}

That is the scaffolding of our interactive animation. I prepared the Arduino board before leaving my studio today. A small program in it will read the slider and send the information to the computer. That way I only need to focus on writing the code for the animation. By default those are very small 100×100 pixels, so I make the window a little bigger.

void setup() {
size(800, 600);
}

Yeah, 800×600 pixels is pretty decent, B will see a big grey window, and her house will pop up in the centre of that. I start a conversation with her:

– You said you wanted a house?
– Yes, she answers, it has to be yellow …
– Ok, I will start by drawing a square, is that ok with you? Shall we start that way?

She doesn’t even look at me, she takes it for granted that I will get it to work, what else am I there for?

void draw() {
fill(255,255,0);
rect(width/2-100,height/2-100,100,100);
}

– But daddy, that is not the yellow that I want.

She happens to be pretty specific about the colour she wants for the house.

fill(255,215,0);

Building a Yellow House 1

I change the square’s background colour, and she nods, confirming that I got it right this time. I realise the square is too little and it is then when I get the idea that the size of the house has to be controlled using the slider, that will be optimal. I need to introduce the concept of scale to my code and I need to test it, but B is still plugging things into the Arduino board, therefore I cannot use the slider, but I can use the mouse. I also notice that the square is not really centred …

float s = 1; // scale

void setup() {
size(800,600);
}

void draw() {
background(200);
fill(255,215,0);
s = (width – mouseX)/100;
float w = 200*s/2; // w – house’s Width
translate(width/2-w/2,height/2-w/2);
rect(0,0,w,w);
}

I also realize that the background needs to be repainted, otherwise the screen will never be refreshed the right way. B looks at me and comments on the house, and says it is lacking a roof.

– Shall we make it red?
– Of course, and she looks to the ceiling, making that expression where she asks herself if I am crazy for not getting it right at first.

Mmm, this requires a slight change in the strategy, I need to rethink how I am going to draw the basic figures:

void draw() {
background(200);
s = (width – mouseX)/100;
float w = 200*s/2; // w – house’s Width
pushMatrix();
fill(255,215,0);
translate(width/2-w/2,height/2-w/2);
rect(0,0,w,w);
popMatrix();
pushMatrix();
fill(255,0,0);
translate(width/2-3*w/4,height/2-w);
triangle(3*w/4,0,0,w/2,3*w/2,w/2);
popMatrix();
}

Building a Yellow House 2

I needed to reassign things here and there, but I think it will turn out nice. B looks satisfied at the screen and requests a door in the house, she helps me in finding the right shade of brown for it, as well as the windows, those have to be white – here I managed to skip designing pink curtains somehow, it was pretty difficult.

Building a Yellow House 3

// the door
pushMatrix();
fill(184,134,11);
translate(width/2-w/8,height/2+w/8);
ellipse(w/8,w/8,w/4,w/4);
rect(0,w/8,w/4,w/4);
popMatrix();

// the windows
pushMatrix();
fill(255,255,255);
stroke(0);
strokeWeight(s);
translate(width/2-3*w/8,height/2-3*w/8);
rect(0,w/8,w/4,w/4);
rect(w/2,w/8,w/4,w/4);
popMatrix();

Building a Yellow House 4

– I want the slider, how can I connect it?
– Let me see, we need to use the code to connect the Serial port where the Arduino board is plugged in to use the slider, I talk to her as if she understands, and she seems to follow, it is not the first time we have done this.
– Papi!, she screams …

She pulls my arm hinting she likes what we are doing … but also makes it impossible for me to keep on typing. We hug and we plug our Arduino into the computer and I import the serial library in the program and run it again. B plays with the slider, looking at the Yellow House with the Red Roof on the screen changing size. She is in control, but most importantly, she designed that house, she programmed it and she’s ready to play with it.

Find the full Processing code to the house at GitHub.com/dcuartielles.