Picking Up Inspiration

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);

Characters: Cinderella and Fairy

Characters: The Sisters

In the first part of the animation, there's a scene that Cinderella's two sisters walking out of the house. I tried to tell that these her sisters looked really beautiful and proud of their self, so that we can say Cinderella want to go to the ball as pretty as her sisters.

I tried several version of drawings, for example for the book Tezuka School of Animation and The Animators Survival Kit. but the 2d walking cycles didn't look quite like a female.

Walking Cycle from The Animators Survival Kit

So I accept Felix and Rudy's idea about download a fashion show video from youtube and picked some frame to simulate.

I picked two dresses in this video and selected 1 frame in each 4 frames. Drew them in AI and color with PS. And with the 8 images, I made the animation with the following codes:

class Character {

int xpos, ypos;

int xpos0, ypos0;

float scale;

PImage[] images;

int count;

int increase;

Character(int xpos, int ypos, float scale, PImage[] images, int increase) {

this.xpos = xpos;

this.ypos = ypos;

this.xpos0 = xpos;

this.ypos0 = ypos;

this.scale = scale;

this.images = images;

this.increase = increase;

for(int i =0; i < images.length; i++) {

images[i].resize((int)(images[i].width * scale), (int)(images[i].height * scale));

}

count = 0;

}

void move() {

ypos += increase ;

if(ypos > ypos0 + 200) {

ypos = ypos0 + 200;

return;

}

if(increase != 0)

xpos = xpos0 - (int)(((ypos - ypos0) * (ypos - ypos0) / 400));

count += 1;

}

void draw() {

image(images[count % images.length], xpos, ypos);

}

Reference:

1. The animator's survival kit(Williams, Richard, 2001)

2. Tezuka School of Animation, 1: Learning the Basics(Tezuka Productions, 2003)

3. 2009 Love collection by Enzoani Runway Video(http://www.youtube.com/watch?v=UXPxEnKR0AU

Characters: the Magical Button

The button is used in the animation part to get access to the next section. Also in the magic mirror part to finish the test choices.

The design is an animation flower which can cause attention and fill with magic. The coding was inspired by a sakura in OpenProcessing, which use offset to simulate a flower.

for (float a = 0; a <= 360; a += 45){

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

float f = radians (a+offset+i * 4f);

float h = radians (b+i * 0.2f);

noStroke();

float alf = 255f/8f * (float)i;

fill(c1,c2,c3, alf);

float x = posX - 30 + cos (f) * (15 + sin (b+i * 0.2f)*20);

float y = posY - 20 + sin (f) * (15 + sin (b+i * 0.2f)*20);

ellipse (x, y, abs(sin (b+i * 0.2f)*10), abs(sin (b+i * 0.2f)*10));

//fill(231-(cos(b)*60), 131, 109);

}