CS 100 Spring 2014
Lab 9
drawObject(size) &
color/size animation
Due Monday April, 28th

Using the Processing language/environment answer the questions below.

Consider the following code written using functions.

int gridDiv = 6;

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

void draw() {
  background(36, 30, 80);
  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);

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

  //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) {
  stroke(255, 0, 0);


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

  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;

  point(cX, cY);
Before running the program

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

  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;

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

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

  stroke(255, 0, 0);

  //to help debug
  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);

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