CS 100 Spring 2014 Lab 9

drawObject(size) & color/size animation

---

Using the Processing language/environment answer the questions below.

Consider the following code written using functions.

int gridDiv = 6;

void setup() {
  size(800, 500);
  noStroke();
}

void draw() {
  background(36, 30, 80);
  
  noStroke();
  fill(30, 100, 42);
  rect(0, 3/4.0*height, width, height-3/4.0*height);

  float centerX = 400;
  float centerY = 100;
  float starSize = 120;

  // 1. draw the other side of the star
  // 2. move the lines of code to draw a star in a function called drawStar
  //       - the function takes parameters
  // 3. test the function definition
  //       - call once to produce the same result than in 1.
  //       - call many times : draw stars at various location 
  //         using different sizes 
  
  fill(200, 230, 20);

  beginShape();
  //top apex (1)  
    vertex(centerX, centerY-starSize/2.0);
    //clockwise vertex in  
    vertex(centerX+starSize/6.0, centerY-starSize/6.0);
    //apex (2)
    vertex(centerX+starSize/2.0, centerY-starSize/6.0);
    //vertex in
    vertex(centerX+starSize/4.0, centerY+starSize/12.0);
    //apex(3)
    vertex(centerX+starSize/3.0, centerY+starSize/2.0);
    //vertex in (opposite of top apex)
    vertex(centerX, centerY+starSize/4.0);
     
    //complete the drawing by defining the left side
    //...
    
  endShape(CLOSE);

    
  //move this part to the drawStar function as well
  gridDiv = 6;
  drawGrid(centerX, centerY, starSize, starSize, gridDiv);
}




void drawGrid(float cX, float cY, float objWidth, float objHeight, int d) {
  strokeWeight(2);
  stroke(255, 0, 0);

  noFill();

  float boundaryBoxX = cX-objWidth/2.0;
  float boundaryBoxY = cY-objHeight/2.0;
  rect(boundaryBoxX, boundaryBoxY, objWidth, objHeight); 

  strokeWeight(1);
  fill(0);
  float incY = 1/d * objHeight;
  float incX = 1.0/d * objWidth;
   
  //uniform grid: keep the smallest
  float inc = incX;
  if (incY>inc)
     inc = incY;
   println("grid space " + inc);
 
 
  float lineY =  boundaryBoxY + inc;
  while (lineY < boundaryBoxY+objHeight) {
    line(boundaryBoxX, lineY, boundaryBoxX+objWidth, lineY);
    lineY =  lineY + inc;
  }

  float lineX =  boundaryBoxX + inc;
  while (lineX < boundaryBoxX+objWidth) {
    line(lineX, boundaryBoxY, lineX, boundaryBoxY+objHeight);
    lineX =  lineX + inc;
  }

  strokeWeight(6);
  point(cX, cY);
  strokeWeight(1);
}

Before running the program

• read carefully and
• considering the image below think on paper the vertex calls that complete the star.

1. [5 pts] Copy and paste the code above into a file drawStar.pde.
Run the program and modify it as follow.

1. Draw the other side of the star.
2. Move the lines of code to draw a star in a function called drawStar(..).
3. Test the function definition.
   • Call the function once to produce the same result as in 1.
   • Call multiple times, i.e. draw stars at various locations using different sizes, as the image below demonstrates.

2. [5 pts] Consider the following function: drawRabbit(...). As with the duck, the function is defined to draw the object according to dimension parameters: rabbitWidth and rabbitHeight.

void drawRabbit(float cX, float cY, float rabbitWidth, float rabbitHeight) {
              
  noStroke();
  strokeWeight(1);   
  //the rabbit is defined on a grid 4x7 (drawn last line)
  //notice the 4 and 7 in the relations: use the grid to trace the code
  gridDiv = 7;
    
  //tail
  fill(200);
  ellipse(cX-3/8.0*rabbitWidth, cY, 1/5.0*rabbitWidth, 1/7.0*rabbitHeight);
      
  float bellyX = cX-1/8.0*rabbitWidth;
  //3/14=1/7h+1/14h (1 grid + 0.5 grid)
  float bellyY = cY+3/14.0*rabbitHeight;
  
  fill(100, 60, 30);
  float headX = cX+1/4.0*rabbitWidth;
  float headY = cY-1/14.0*rabbitHeight;
  //add the head
  
  float hear1X = headX+1/8.0*rabbitWidth;
  float hearY = cY-2.0*rabbitHeight/7;
  float hear2X = headX-1/8.0*rabbitWidth;
  float hearLength = 3*rabbitHeight/7.0;
  float hearWidth = rabbitWidth/6.0;

  ellipse(hear1X, hearY, hearWidth, hearLength);
  //add other hear

  fill(200);
  ellipse(hear1X, hearY, hearWidth/2.0, hearLength/2.0);
  //add the inside of the other hear


  float footX = cX+1/8.0*rabbitWidth;
  float footY = bellyY+3/14.0*rabbitHeight;
  fill(200);

  ellipse(footX, footY, 1/3.0*rabbitWidth, 1/4.0*rabbitWidth);
  fill(100, 60, 30);
  ellipse(footX-2, footY, 1/4.0*rabbitWidth, 1/4.0*rabbitWidth);

  //belly  
  ellipse(bellyX, bellyY, 3/4.0*rabbitWidth, 4/7.0*rabbitHeight);

  stroke(255, 0, 0);

  //to help debug
  strokeWeight(6);
  point(hear1X, hearY);

  point(hear2X, hearY);
  point(headX, headY);
  point(bellyX, bellyY);
  point(cX, cY);
  println("belly " + bellyX + " " + bellyY);
  println("center " + cX + " " + cY);

  drawGrid(cX, cY, rabbitWidth, rabbitHeight, gridDiv);
}

• Read carefully: check the fraction values of the code with respect to the grid.
• Cut and paste in your previous code.
• Add in draw() a call to drawRabbit with 80, 140 as dimensions (3rd and 4th arguments)
• Complete the rabbit as shown below: use the grid.

Bonuses Modify/add to your code some animations.
Check this demo for inspiration.