Math

Tuesday, May 14, 2013

Happy Mother's Day

     For the last couple of days, I have been coding a mother's day program. In this post, I will copy and paste the code, as well as explain how it works. Unfortunately, Blogger does not support files, so I can't show it moving. In the program, The two flowers grow from the bottom, elapsing 20 seconds total. here is what the program looks like at the end:





     Now, here's the code, throughout which you will see explanations of each segment.




This is where I tell the computer what variables I will be using in this program.

int mNum = 0;
boolean programStart = false;
PFont progFont;
int preProgMNum= 0;


Here I make a window and tell the computer what each of the variables will be equal to:

void setup() {
  size(700, 700);
  progFont = loadFont("Helvetica-48.vlw");
  mNum = millis();
  textFont(progFont, 50);
}

Here I draw a background, then wait until the mouse is pressed to start the program. Where it says
"firstFlower()" and "secondFlower()", it is doing commands that I program later in the program.

void draw() {
  background(0);
  if (programStart) {
    mNum = millis() - preProgMNum;
    firstFlower();
    secondFlower();
    if(mNum > 20000){
      text("Happy Mother's Day!", 100,100);
    }
 
  }
  else {
    preProgMNum = millis();
    text("Click the screen to start", 85, 300);
  }
}

Here's where I start the program when the mouse is clicked

void mouseClicked() {
  programStart = true;
}


//Here's where I draw the Daisy-ish flower:
void firstFlower() {

  //Here's the stem:
  stroke(40, 240, 12);
  strokeWeight(13);
  noFill();
  if (mNum > 500) {
    arc(170, 650, 100, 100, HALF_PI + QUARTER_PI, PI + QUARTER_PI);
  }
  if (mNum > 1000) {
    arc(98, 580, 100, 100, 0-QUARTER_PI, 0+QUARTER_PI);
  }
  if (mNum > 1500) {
    noFill();
    arc(170, 510, 100, 100, HALF_PI + QUARTER_PI, PI + QUARTER_PI);
  }
  if (mNum > 2000) {
    noFill();
    arc(98, 440, 100, 100, 0-QUARTER_PI, 0+QUARTER_PI);
  }
  if (mNum >2500) {
    arc(170, 370, 100, 100, HALF_PI + QUARTER_PI, PI + QUARTER_PI);
  }
  if (mNum > 3000) {
    arc(98, 300, 100, 100, 0-QUARTER_PI, 0+QUARTER_PI);
  }
  // The leaves:
  if (mNum > 3500) {
    fill(40, 240, 12);
    pushMatrix();
    translate(185, 550);
    rotate(QUARTER_PI);
    ellipse(0, 0, 40, 90);
    popMatrix();
  }
  if (mNum>4000) {
    fill(40, 240, 12);
    pushMatrix();
    translate(90, 460);
    rotate(-QUARTER_PI);
    ellipse(0, 0, 40, 90);
    popMatrix();
  }
  //The yellow center:
  if (mNum>4500) {
    fill(255, 248, 33);
    noStroke();
    ellipse(125, 270, 50, 50);
  }


  //The petals:
  if (mNum > 5000) {
    fill(240);
    pushMatrix();
    translate(125, 270);
    for (int i = 0; i < 36; i++) {
      ellipse(0, -60, 30, 80);
      rotate(PI/6);
    }
    popMatrix();
  }
}


//Here's the rose:
void secondFlower() {
  stroke(40, 240, 12);
  strokeWeight(13);
  noFill();

This is where I draw the rose's stem:

if (mNum > 5500) {
    arc(565, 650, 100, 100, HALF_PI + QUARTER_PI, PI + QUARTER_PI);
  }
  if (mNum > 6000) {
    arc(493, 580, 100, 100, 0-QUARTER_PI, 0+QUARTER_PI);
  }
  if (mNum > 6500) {
    arc(565, 510, 100, 100, HALF_PI + QUARTER_PI, PI + QUARTER_PI);
  }
  if (mNum > 7000) {
    arc(493, 440, 100, 100, 0-QUARTER_PI, 0+QUARTER_PI);
  }
  if (mNum > 7500) {
    arc(565, 370, 100, 100, HALF_PI + QUARTER_PI, PI + QUARTER_PI);
  }
  if (mNum > 8000) {
    arc(493, 300, 100, 100, 0-QUARTER_PI, 0+QUARTER_PI);
  }
  if (mNum > 8500) {
    arc(565, 230, 100, 100, HALF_PI + QUARTER_PI, PI + QUARTER_PI);
  }



The leaves on the stem are here:

if (mNum > 9000) {
    pushMatrix();
    noStroke();
    fill(40, 240, 12);
    translate(575, 400);
    rotate(QUARTER_PI);
    ellipse(0, 0, 40, 90);
    popMatrix();
  }
  if (mNum > 9500) {
    pushMatrix();
    noStroke();
    fill(40, 240, 12);
    translate(485, 500);
    rotate(-QUARTER_PI);
    ellipse(0, 0, 40, 90);
    popMatrix();
  }


And, here's the rose itself. To make it look like it is growing, it starts from the innermost petal and adds one every half second. To make it seem as if the petal I'm adding is under the others, I have to draw all of the other petals again after I draw the one I'm adding. That is why this part is so long and repetitive.

strokeWeight(2);
  stroke(0);
  fill(237, 14, 14);
  if (mNum > 19500) {
    ellipse(515, 215, 70, 70);
    ellipse(520, 190, 60, 60);
    ellipse(525, 230, 56, 56);
    ellipse(543, 212, 53, 53);
    ellipse(530, 215, 50, 50);
    ellipse(516, 215, 50, 50);
    ellipse(520, 194, 47, 47);
    ellipse(533, 195, 45, 45);
    ellipse(525, 215, 40, 40);
    ellipse(530, 205, 37, 37);
    ellipse(525, 195, 35, 35);
    ellipse(517, 205, 32, 32);
    ellipse(528, 207, 27, 27);
    ellipse(524, 203, 25, 25);
    ellipse(530, 200, 20, 20);
    ellipse(525, 195, 20, 20);
    ellipse(525, 200, 15, 15);
  }
  if (mNum > 19000) {
    ellipse(520, 190, 60, 60);
    ellipse(525, 230, 56, 56);
    ellipse(543, 212, 53, 53);
    ellipse(530, 215, 50, 50);
    ellipse(516, 215, 50, 50);
    ellipse(520, 194, 47, 47);
    ellipse(533, 195, 45, 45);
    ellipse(525, 215, 40, 40);
    ellipse(530, 205, 37, 37);
    ellipse(525, 195, 35, 35);
    ellipse(517, 205, 32, 32);
    ellipse(528, 207, 27, 27);
    ellipse(524, 203, 25, 25);
    ellipse(530, 200, 20, 20);
    ellipse(525, 195, 20, 20);
    ellipse(525, 200, 15, 15);
  }
  if (mNum > 18500) {
    ellipse(525, 230, 56, 56);
    ellipse(543, 212, 53, 53);
    ellipse(530, 215, 50, 50);
    ellipse(516, 215, 50, 50);
    ellipse(520, 194, 47, 47);
    ellipse(533, 195, 45, 45);
    ellipse(525, 215, 40, 40);
    ellipse(530, 205, 37, 37);
    ellipse(525, 195, 35, 35);
    ellipse(517, 205, 32, 32);
    ellipse(528, 207, 27, 27);
    ellipse(524, 203, 25, 25);
    ellipse(530, 200, 20, 20);
    ellipse(525, 195, 20, 20);
    ellipse(525, 200, 15, 15);
  }
  if (mNum > 18000) {
    ellipse(543, 212, 53, 53);
    ellipse(530, 215, 50, 50);
    ellipse(516, 215, 50, 50);
    ellipse(520, 194, 47, 47);
    ellipse(533, 195, 45, 45);
    ellipse(525, 215, 40, 40);
    ellipse(530, 205, 37, 37);
    ellipse(525, 195, 35, 35);
    ellipse(517, 205, 32, 32);
    ellipse(528, 207, 27, 27);
    ellipse(524, 203, 25, 25);
    ellipse(530, 200, 20, 20);
    ellipse(525, 195, 20, 20);
    ellipse(525, 200, 15, 15);
  }
  if (mNum > 17500) {
    ellipse(530, 215, 50, 50);
    ellipse(516, 215, 50, 50);
    ellipse(520, 194, 47, 47);
    ellipse(533, 195, 45, 45);
    ellipse(525, 215, 40, 40);
    ellipse(530, 205, 37, 37);
    ellipse(525, 195, 35, 35);
    ellipse(517, 205, 32, 32);
    ellipse(528, 207, 27, 27);
    ellipse(524, 203, 25, 25);
    ellipse(530, 200, 20, 20);
    ellipse(525, 195, 20, 20);
    ellipse(525, 200, 15, 15);
  }
  if (mNum > 17000) {
    ellipse(516, 215, 50, 50);
    ellipse(520, 194, 47, 47);
    ellipse(533, 195, 45, 45);
    ellipse(525, 215, 40, 40);
    ellipse(530, 205, 37, 37);
    ellipse(525, 195, 35, 35);
    ellipse(517, 205, 32, 32);
    ellipse(528, 207, 27, 27);
    ellipse(524, 203, 25, 25);
    ellipse(530, 200, 20, 20);
    ellipse(525, 195, 20, 20);
    ellipse(525, 200, 15, 15);
  }
  if (mNum > 16500) {
    ellipse(520, 194, 47, 47);
    ellipse(533, 195, 45, 45);
    ellipse(525, 215, 40, 40);
    ellipse(530, 205, 37, 37);
    ellipse(525, 195, 35, 35);
    ellipse(517, 205, 32, 32);
    ellipse(528, 207, 27, 27);
    ellipse(524, 203, 25, 25);
    ellipse(530, 200, 20, 20);
    ellipse(525, 195, 20, 20);
    ellipse(525, 200, 15, 15);
  }
  if (mNum > 16000) {
    ellipse(533, 195, 45, 45);
    ellipse(525, 215, 40, 40);
    ellipse(530, 205, 37, 37);
    ellipse(525, 195, 35, 35);
    ellipse(517, 205, 32, 32);
    ellipse(528, 207, 27, 27);
    ellipse(524, 203, 25, 25);
    ellipse(530, 200, 20, 20);
    ellipse(525, 195, 20, 20);
    ellipse(525, 200, 15, 15);
  }
  if (mNum > 15500) {
    ellipse(525, 215, 40, 40);
    ellipse(530, 205, 37, 37);
    ellipse(525, 195, 35, 35);
    ellipse(517, 205, 32, 32);
    ellipse(528, 207, 27, 27);
    ellipse(524, 203, 25, 25);
    ellipse(530, 200, 20, 20);
    ellipse(525, 195, 20, 20);
    ellipse(525, 200, 15, 15);
  }
  if (mNum > 15000) {
    ellipse(530, 205, 37, 37);
    ellipse(525, 195, 35, 35);
    ellipse(517, 205, 32, 32);
    ellipse(528, 207, 27, 27);
    ellipse(524, 203, 25, 25);
    ellipse(530, 200, 20, 20);
    ellipse(525, 195, 20, 20);
    ellipse(525, 200, 15, 15);
  }
  if (mNum > 14500) {
    ellipse(525, 195, 35, 35);
    ellipse(517, 205, 32, 32);
    ellipse(528, 207, 27, 27);
    ellipse(524, 203, 25, 25);
    ellipse(530, 200, 20, 20);
    ellipse(525, 195, 20, 20);
    ellipse(525, 200, 15, 15);
  }
  if (mNum >14000) {
    ellipse(517, 205, 32, 32);
    ellipse(528, 207, 27, 27);
    ellipse(524, 203, 25, 25);
    ellipse(530, 200, 20, 20);
    ellipse(525, 195, 20, 20);
    ellipse(525, 200, 15, 15);
  }
  if (mNum > 13500) {
    ellipse(528, 207, 27, 27);
    ellipse(524, 203, 25, 25);
    ellipse(530, 200, 20, 20);
    ellipse(525, 195, 20, 20);
    ellipse(525, 200, 15, 15);
  }
  if (mNum > 13000) {
    ellipse(524, 203, 25, 25);
    ellipse(530, 200, 20, 20);
    ellipse(525, 195, 20, 20);
    ellipse(525, 200, 15, 15);
  }
  if (mNum > 12500) {
    ellipse(530, 200, 20, 20);
    ellipse(525, 195, 20, 20);
    ellipse(525, 200, 15, 15);
  }
  if (mNum > 12000) {
    ellipse(525, 195, 20, 20);
    ellipse(525, 200, 15, 15);
  }
  if (mNum > 11500) {
    ellipse(525, 200, 15, 15);
  }


And finally , here are the thorns.

  noStroke();
  fill(40, 240, 12);
  if (mNum > 10000) {
    triangle(510, 646, 510, 654, 490, 650);
  }
  if (mNum > 10500) {
    triangle(549, 576, 545, 584, 569, 580);
  }
  if (mNum > 11000) {
    triangle(510, 376, 510, 364, 490, 370);
  }
}

Posted by at
Labels: ,

5 comments:

  1. Kerri LoriganMay 14, 2013 at 5:50 PM

    How thoughtful was this animation from my sweet Max! It was a perfect combination of our interests: programming and gardening. xoxo, Mom

    ReplyDelete
  2. Lynn NadeauMay 18, 2013 at 9:35 AM

    Yes, animated it is even better but the result is wonderful.
    Ok I have two questions:
    1. How much did you have to type in? For example, in the command " if (mNum > 8000) {
    arc(493, 300, 100, 100, 0-QUARTER_PI, 0+QUARTER_PI);"
    } did you type that whole sentence or did you grab some commands and fill in numbers?

    2. How long did it take you to create this wonderful program?

    ReplyDelete
  3. Ted N.May 19, 2013 at 7:39 PM

    Max - Really nice drawings & idea! Some code comments...
    1) See if you can separate 'code' from 'data' e.g. could all of the points just be in vectors/arrays & then referred to by code.
    2) reduce duplication, I think the last code section could be simplified significantly as each section repeats most of the following sections (I'd need to play w/ it to see).
    3) Might as well make the comments 'in the code' real comments so it could be cut & pasted into actual code.
    4) Could you make the flowers parametric to some random variables so they'd be different each time?
    Keep up the great work!
    best, Ted

    ReplyDelete
    Replies
    1. MaxMay 20, 2013 at 9:32 AM

      Thanks for the feedback! I will add I will change the comments in the code. I don't know how I would make the flowers be randomized, but it would be interesting to figure out how. Also, I went to your link in the other comment. I really like how you got rid of all the repetitive code.

      Delete
  4. Ted N.May 19, 2013 at 7:55 PM

    Max - I made minor edits (broke the text font stuff) but published it here:
    http://www.dotline.com/processing/Max_MothersDay/web-export/index.html
    (also simplified the end as I removed redundant code).

    Nice!
    Ted.

    ReplyDelete

Subscribe to: Post Comments (Atom)