How To Code Animals (Or Any Shapes) So That They Can Be Re-Sized

The basic idea to creating animals that you can resize is similar to how we changed the animals from having fixed X and Y coordinates so that we can animate them. Recall to do that, you defined a variable like xPos and every shape that had an X parameter, you changed it to make the parameter relative to xPos. For instance, if your animal had rect(120, 100, 50, 60); and you declared var xPos=100, then you changed your rectangle to rect(xPos+20, 100, 50, 60); because the original x parameter in the rectangle was 120, which is 20 more than xPos.s value (which is 100).

To resize animals, you do a similar thing to the height and width parameters of shapes. The technique is to find the biggest shape in your animal and use that to set the height. For instance, in the code below, the bear.s face is the biggest shape and its ellipse has a height of 150, so we set var bearHeight=150. Then we find all hard-coded numbers and multiply them by the ratio bearHeight/150. Here is an example (try pasting these into Khan). The original program is

//Bear
var yPos = 100;
var xPos = 100;

noStroke();
// ears
fill(89, 52, 17);
ellipse(xPos-60, yPos-60, 70, 70);
ellipse(xPos+60, yPos-60, 70, 70);
// face
fill(163, 113, 5);
ellipse(xPos, yPos, 150, 150);
// eyes (outer ring)
fill(207, 147, 56);
ellipse(xPos-30, yPos-30, 50, 50);
ellipse(xPos+30, yPos-30, 50, 50);
// pupils
fill(0, 0, 0);
ellipse(xPos-30, yPos-30, 20, 20);
ellipse(xPos+30, yPos-30, 20, 20);
// mouth
fill(89, 52, 17);
ellipse(xPos, yPos+25, 70, 40);
stroke(0, 0, 0);
line(xPos-10, yPos+30, xPos-10, yPos+20);
line(xPos+10, yPos+30, xPos+10, yPos+20);

Below is the same program but with all hard-coded numbers multiplied by the ratio bearHeight/150. Print this out and put the two programs next to each other.


//Bear
var yPos = 100;
var xPos = 100;
var bearHeight = 150;

noStroke();
// ears
fill(89, 52, 17);
ellipse(xPos-(bearHeight/150*60), yPos-(bearHeight/150*60), bearHeight/150*70, bearHeight/150*70);
ellipse(xPos+(bearHeight/150*60), yPos-(bearHeight/150*60), bearHeight/150*70, bearHeight/150*70);
// face
fill(163, 113, 5);
ellipse(xPos, yPos, bearHeight/150*150, bearHeight/150*150);
// eyes (outer ring)
fill(207, 147, 56);
ellipse(xPos-(bearHeight/150*30), yPos-(bearHeight/150*30), bearHeight/150*50,bearHeight/150* 50);
ellipse(xPos+(bearHeight/150*30), yPos-(bearHeight/150*30), bearHeight/150*50, bearHeight/150*50);
// pupils
fill(0, 0, 0);
ellipse(xPos-(bearHeight/150*30), yPos-(bearHeight/150*30), bearHeight/150*20, bearHeight/150*20);
ellipse(xPos+(bearHeight/150*30), yPos-(bearHeight/150*30), bearHeight/150*20, bearHeight/150*20);
// mouth
fill(89, 52, 17);
ellipse(xPos, yPos+(bearHeight/150*25), bearHeight/150*70, bearHeight/150*40);
stroke(0, 0, 0);
line(xPos-(bearHeight/150*10), yPos+(bearHeight/150*30), xPos-(bearHeight/150*10), yPos+(bearHeight/150*20));
line(xPos+(bearHeight/150*10), yPos+(bearHeight/150*30), xPos+(bearHeight/150*10), yPos+(bearHeight/150*20));

Paste this program into Khan. Try changing the value of bearHeight and watching the bear change.