Characters: the House

In this project, I'm trying to finish the animation with ProcessingJs coding instead of traditional images, which can speed up online access and easily interact with.

The House of Cinderella

For the house, what I need to make is the building, the barrier and the path. With coding, they can be scale and translate.

The building was separated into quad, triangle and rectangle, while the windows was made with arc and line, and the door was made of ellipse and rectangle. 

void draw() {

stroke(brown.getRed(), brown.getGreen(), brown.getBlue(), 200);

strokeWeight(2.0f);

fill(background2.getRed(), background2.getGreen(), background2.getBlue(), 150);

quad(posX - 90 * scale, posY, posX + 100 * scale, posY, posX + 120 * scale,

posY + 40 * scale, posX - 110 *scale, posY + 40 * scale);

triangle(posX - 130 * scale, posY + 20 * scale, posX - 65 * scale, posY + 75 * scale, posX - 180 * scale, posY + 75 * scale);

 

fill(background.getRed(), background.getGreen(), background.getBlue());

rect(posX - 95 * scale, posY + 40 * scale, 200 * scale, 120 * scale);

rect(posX - 170 * scale, posY + 75 * scale, 75 * scale, 80 * scale);

line(posX - 120 *scale, posY + 160 * scale, posX + 120 *scale, posY + 160 * scale);

 

rect(posX - 20 * scale, posY + 80 * scale, 40 * scale, 80 * scale);

fill(brown.getRed(), brown.getGreen(), brown.getBlue(), 200);

ellipse(posX + 10 * scale, posY + 120 * scale, 5 * scale, 5 * scale);

 

fill(background.getRed(), background.getGreen(), background.getBlue());

window(posX, posY, 1.0f * scale);

window(posX + 5 * scale, posY + 80 * scale, 0.8f * scale);

window(posX - 110 * scale, posY + 80 * scale, 0.8f * scale);

window(posX - 180 *scale, posY + 110 * scale, 0.7f * scale);

}

void window(float posX, float posY, float scale) {

strokeWeight(4);

fill(background.getRed(), background.getGreen(), background.getBlue());

arc(posX + 70 * scale, posY - 3 * scale, 40 * scale, 40 * scale, -PI * 0.95f, -PI * 0.05f);

noStroke();

rect(posX + 55 * scale, posY - 14 * scale, 30 * scale, 34 * scale);

stroke(brown.getRed(), brown.getGreen(), brown.getBlue(), 200);

strokeWeight(2);

line(posX + 55 * scale, posY - 14 * scale,posX + 55 * scale, posY + 20 * scale);

line(posX + 85 * scale, posY + 20 * scale,posX + 85 * scale, posY - 14 * scale);

stroke(brown.getRed(), brown.getGreen(), brown.getBlue(), 150);

line(posX + 70 * scale, posY + 20 * scale,posX + 70 * scale, posY - 20 * scale);

line(posX + 55 * scale, posY - 5 * scale,posX + 85 * scale, posY - 5 * scale);

strokeWeight(3);

stroke(brown.getRed(), brown.getGreen(), brown.getBlue(), 200);

line(posX + 50 * scale, posY + 20 * scale,posX + 90 * scale, posY + 20 * scale);

}

The barrier was made with ellipse and line, which was similar to the house.

For the path, which was a curve running from the house to the end of the whole scene. So I discuss with a Mathematician Benetin and did some research on math, finally we decided to use Interpolation Polynomials to simulate the curve.

Interpolation Polynomials curve

The expression are p(x) = - 475 - 2960x -5918x^2 -3880x^3 plus a diagonal  x=3(y - 300).

v1.0 of the path

Then I simplified the curve and used some quad to make the path. 

for(int i = 0; i < 15; i++) {

fill(background2.getRed(), background2.getGreen(), background2.getBlue(), 100);

noStroke();

int px = 680 - (int)(i * i * 0.8);

int py = 240 + i * 20 + (i-1) * (i-2)/3;

quad(px - 35 - 3 * i, py, px + 3 * i + 35, py , px + 3 * i + 33, py + 2 * i/4 + 14, px - 39 - 3 * i, py+ 2 * i/4 + 12);

}

Reference:

1. Algorithms for visual design using the Processing language(Terzidis, Kostas, 2009);

2. Processing(Greenberg, Ira, 2007);

3. Interpolation Polynomials (http://www.math.ucla.edu/~ronmiech/Interpolation/HTMDOCS/Introduction/Interpolation_Applet.htm);