Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
//In my interactive drawing catPlay, you can wave the mouse around in order to play with the cat character. If you place the mouse on the spot on the floor he will catch it. Mouse clicks and keyboard buttons are inactive.


//These are the variables.

//This first block of variables all control positions of various body regions.
float headY=100;
float body1Y=180;
float body2Y=260;
float handX=35;//this represents the distance from either side's hand to the x of 200, not its final x position
float handY=300;
float eyelidYAdd;

//The second block stretches shapes as needed.
int legTopYAdd;
int pupilWidth;

//this block tracks the x and y distnce from the "catch spot".
int spotXRadius;
int spotYRadius;




void setup(){
  
  size(400,400);

  noStroke();//remove outlines
    
}

void draw(){
  
  //clear();
  
  spotXRadius=abs(200-mouseX);
  spotYRadius=abs(360-mouseY);//tracks distance from mouse to "catch spot"
  
  headY=100;
  body1Y=180;
  body2Y=270;
  handX=35;
  handY=300;
  legTopYAdd=10;//sets defaults of position 1. if these are unchanged by the following position transitions, they will stay that way.
  
    if(mouseY>230){
    pupilWidth=10;//PUPIL DILATE
    if(mouseY<300){
      eyelidYAdd=-2*mouseY/7+69;//EYELIDS UP
    }
  }
  else{
    pupilWidth=5;
    eyelidYAdd=0;
  }//This block devoted to eye movement is active for all positions except 1.
  
  
  //POS 1 / POS 2 TRANSITION ---------------------------------------------------------
  

  
  if(mouseY>240 && (spotXRadius>40 || spotYRadius>20)){//if mouse is in zone 1 and not zone 2
  
  if( mouseY<320){
      headY=2*(mouseY)-383;//HEAD DOWN
      body1Y=((7*mouseY)/8)-29;//BODY1 DOWN
      body2Y=((mouseY*3)/-8)+358;//BODY2 UP
    }  
     else{//if below zone
      headY=260;
      body1Y=250;
      body2Y=240;//end positions for these body regions
    }
  }
    //POS 2 / POS 3 TRANSITION ---------------------------------------------------------
    
  if( (spotXRadius<=40 && spotYRadius<=40) && (spotXRadius>10 || spotYRadius>10)  ){//if mouse is in zone 2 and not zone 3
    headY=(2 * dist(200, 360, mouseX, mouseY))/3 + 230;//HEAD UP
    body1Y=(2 * dist(200, 360, mouseX, mouseY))/3 + 220;//BODY1 UP
    body2Y=240;//BODY2 KEEP SAME                                                 (this is here so it looks like the end of position 2 instead of the default, position 1.)
    handX= (-7 * dist(200, 360, mouseX, mouseY) )/6+78;//HANDS EXTEND OUT
    handY= (-2 * dist(200, 360, mouseX, mouseY) )/3 +325;//HANDS EXTEND OUT
  }
    
    //POS 3 / POS 4 TRANSITION ---------------------------------------------------------
    
      if( (spotXRadius<=10 && spotYRadius<=10)  ){//if mouse is in zone 3
        headY=( -6 * dist(200, 360, mouseX, mouseY)) + 300;//HEAD DOWN
        handY= (-5 * dist(200, 360, mouseX, mouseY))+360;//HANDS CLOSE IN
        handX= (7 * dist(200, 360, mouseX, mouseY) );//HANDS CLOSE IN
        body1Y= (-4 * dist(200, 360, mouseX, mouseY) +270 );//BODY1Y DOWN
        body2Y= (dist(200, 360, mouseX, mouseY) +230 );//BODY2 DOWN
        legTopYAdd=25;//TOP OF LEGS OUT OF SIGHT
      }

    
    
  
  

  
  background(255,252,214);//Wall Color
  
  fill(147,152,191);//set color periwinkle fur
   
  ellipse(200,body1Y,100,120);//body1
  
  ellipse(200,body2Y,120,140);//body2
  
  ellipse(145,250,40,80);
  ellipse(255,250,40,80);//hindlegs
  
  fill(239,195,230);//set color pink
  
  rect(0,280,400,400);//floor
  
  fill(219,175,210);//set color dark pink
  ellipse(200,360,80,40);//floor spot
  
  fill(199,155,190);//set color darker pink
  ellipse(200,360,15,10);//centric floor spot

  fill(147,152,191);//set color periwinkle fur
  
  ellipse(200,280,114,26);//3D tummy bottom
  
  fill(255);//set color white
  ellipse(140,280,30,22);
  ellipse(260,280,30,22);
  
  fill(159,164,203);//set color light periwinkle fur

  
  triangle(205,body1Y+legTopYAdd,245,body1Y+legTopYAdd,200+handX,handY);
  triangle(195,body1Y+legTopYAdd,155,body1Y+legTopYAdd,200-handX,handY);//frontlegs
  
  triangle(140,headY-5,200,headY-5,140,headY-75);
  triangle(260,headY-5,200,headY-5,260,headY-75);//ears
  
  
  ellipse(200,headY,120,90);//head
  
  fill(255);//set color white
  
  ellipse(200+handX,handY,30,22);
  ellipse(200-handX,handY,30,22);//front feet
  
  ellipse(230,headY,20,30);
  ellipse(170,headY,20,30);//eyes
  
  //pupils
  fill(0);
  ellipse((2*mouseX)/50+222,headY,pupilWidth,20);
  ellipse((2*mouseX)/50+163,headY,pupilWidth,20);
  
  
  fill(159,164,203);//set color light periwinkle fur
  
  ellipse(200,headY+14,62,40);//bottom lids
  
  fill(255);//set color white
  
  ellipse(200,headY+20,60,50);//snout
  
  fill(159,164,203);//set color light periwinkle fur
  

  triangle(160, headY+eyelidYAdd, 160, headY-20+eyelidYAdd, 200,headY-20+eyelidYAdd);
  triangle(240, headY+eyelidYAdd, 240, headY-20+eyelidYAdd, 200,headY-20+eyelidYAdd);//eyelids
  
  stroke(259,215,250);//set line color pink
  strokeWeight(10);
  line(200,headY+20,200,headY+55);//tongue
  
  
  
  fill(259,215,250);//set color pink
  ellipse(200,headY+12,20,20);//nose
  
  //ear insides
  
  noStroke();//set outline invisible
  fill(255);//set color white
  
  ellipse(187,headY+30,35,45);
  ellipse(213,headY+30,35,45);//lipcheeks
  
  

  
}