Need help adding a class and animations to a simple pet drawing?

问题

float x = 100;
float y = 100;
float p = 150;
float l = 10;
float a = 100;
float b = 100; 
float n =20;
int value = 255;
int r = 150;
int t = 100;
int s = 100;
int w = 60;
int h = 60;
int z = 11; 
int eyeSize = 10;
int pigNose = 30;
int pigBody = 30;
int pigEars = 35;
int pigTail = 20;
int otherpigTail = 200;
int speed = 1;

void setup () {
  size (600, 600);
  a = width/2.5;
  b = height/2;
}

void draw() {
  background(184, 233, 249);

   //Draw legs
   stroke(0);
  fill(249, 137, 244);
  rect(x+(2*w), y+h/3.5, z, 2*z);
  rect(x+(w), y+h/3, z, 2*z);
  rect(x+(1.5*w), y+h/3, z, 2*z);
   rect(x+(2.5*w), y+h/3.5, z, 2*z);


  ////draw body 
  stroke(0);
  fill(249, 137, 244);
  ellipse(110+x,y-pigBody, p, p-20);

 //draw tail
 fill(0);
 line(185+x, y-pigTail, x+otherpigTail, y-(2*pigTail));


   // Draw payer's head
  fill(249, 137, 244);
  ellipse(x,y-pigNose,t,t);

  // Draw player's eyes
  fill(0);
  ellipse(x-w/3+1,y-h/2,eyeSize,eyeSize);
  ellipse(x+w/3-1,y-h/2,eyeSize,eyeSize);

  //Draw nose
  stroke(0);
  fill(198, 105, 194);
  ellipse(x, y, pigNose, pigNose);

  //draw ears
  stroke(0);
  fill(198, 105, 194);
  ellipse(x-(w/2),y-h, pigEars, pigEars);
  ellipse(x+(w/2),y-h, pigEars, pigEars);

  //draw obstacles
  fill(value);
  ellipse(a, b, s, s);
  ellipse(300+a, 200+b, s, s);
  ellipse(300-a, 400+b, s, s);
  ellipse(300-a, 600+b, s, s);
  ellipse(300-a, b, s, s);
  ellipse(300+a, 800+b, s, s);





  }

I need help turning this code into something similar to this:

/*
 This is a very rudimentary virtual pet. It can sit,
 lie down, and wag it's tail.
 */
class Pet {
  int x, y;
  int pose;
  int WAG = 1, SLEEP = 2, SIT = 3;
  float tailWag, wagSpeed;

  Pet(int x, int y) {
    this.x = x;
    this.y = y;
    pose = SIT;
  }

  // adjust pose and stop tail wagging
  void sit() {
    pose = SIT;
    wagSpeed = 0;
    tailWag = 0;
  }
  // adjust pose and start tail wagging
  void wag() {
    pose = WAG;
    wagSpeed = .1;
  }
  // adjust pose and stop tail wagging
  void sleep() {
    pose = SLEEP;
    wagSpeed = 0;
    tailWag = 0;
  }

  // draw in selected pose
  void draw() {
    pushMatrix();
    translate(x, y);
    if (pose == SIT) {
      drawSitting();
    }
    else if (pose == WAG) {
      wagTail();
      drawSitting();
    }
    else {
      drawLaying();
    }
    popMatrix();
  }

  void drawLaying() {
    // needs work :-)
    ellipse(0, 0, 150, 60);
  }

  void wagTail() {
    float maxTailWag = .5; // controls how much the tail wags back and forth
    tailWag = tailWag + wagSpeed;
    // reverse wag direction if the wag limit is reached
    if (tailWag > maxTailWag || tailWag < -maxTailWag) {
      wagSpeed = -wagSpeed;
    }
  }

  // not pretty but gets the idea across
  // origin is the center of the torso 
  void drawSitting() {
    // torso
    pushMatrix();
    rotate(radians(-30));
    ellipse(0, 0, 80, 120);
    popMatrix();
    ellipse(-20, -70, 60, 60); // head
    // nose
    pushMatrix();
    translate(-55, -55);
    rotate(radians(-15));
    arc(0, 0, 40, 30, radians(20), radians(310), OPEN); 
    popMatrix();
    // eyes
    ellipse(-40, -85, 15, 15); // left eye
    ellipse(-25, -80, 15, 15); // right eye
    //ear
    pushMatrix();
    translate(15, -50);
    rotate(radians(-20));
    ellipse(0, 0, 20, 40);
    popMatrix();
    //tail
    pushMatrix();
    translate(40, 30);
    rotate(radians(45)+tailWag);
    arc(0, -35, 30, 60, radians(-220)-tailWag, radians(80), OPEN);
    popMatrix();
    // back leg
    ellipse(0, 60, 50, 20);
    // front leg
    pushMatrix();
    translate(-50, 30);
    rotate(radians(15));
    ellipse(0, 0, 30, 60);
    popMatrix();
  }
}

with classes and whatnot so that I can start working on adding in my own animations for the pet. I'm just not sure where to put everything/how to organize it like that using my drawing.

回答1:

If I were you, I would start with something simpler. For example, here's a program that uses 4 variables to show a ball bouncing around:

float circleX = 50;
float circleY = 50;

float xSpeed = 1;
float ySpeed = 2;

void draw() {
  background(200);

    circleX += xSpeed;
    if (circleX < 0 || circleX > width) {
      xSpeed *= -1;
    }

    circleY += ySpeed;
    if (circleY < 0 || circleY > height) {
      ySpeed *= -1;
    }

    ellipse(circleX, circleY, 20, 20);
}

_{(source: happycoding.io)}

From here, we can encapsulate those 4 variables into a class:

class Circle{
 float x;
 float y;
 float xSpeed;
 float ySpeed;

 Circle(float x, float y, float xSpeed, float ySpeed){
   this.x = x;
   this.y = y;
   this.xSpeed = xSpeed;
   this.ySpeed = ySpeed;
 }

}

Now that we have a class, we can use an instance of that class to control our ball.

Circle circle = new Circle(50, 50, 1, 2);

void draw() {
  background(200);

    circle.x += circle.xSpeed;
    if (circle.x < 0 || circle.x > width) {
      circle.xSpeed *= -1;
    }

    circle.y += circle.ySpeed;
    if (circle.y < 0 || circle.y > height) {
      circle.ySpeed *= -1;
    }

    ellipse(circle.x, circle.y, 20, 20);
}

class Circle{
 float x;
 float y;
 float xSpeed;
 float ySpeed;

 Circle(float x, float y, float xSpeed, float ySpeed){
   this.x = x;
   this.y = y;
   this.xSpeed = xSpeed;
   this.ySpeed = ySpeed;
 }

}

Your code would follow a similar pattern: create a class, encapsulate your data by moving your variables inside the class, and then create an instance of that class and call its methods to draw your figure. Start with something simpler, and just create a class that draws a single circle. Get that working first, and then add variables to that class to draw two circles (a head and a body), and keep working in small steps like that until you're drawing your whole figure.

I really suggest trying something out and posting an MCVE if you get stuck. Good luck.

Shameless self-promotion: I've written a tutorial on creating classes in Processing available here.

来源：https://stackoverflow.com/questions/40877281/need-help-adding-a-class-and-animations-to-a-simple-pet-drawing

标签

java

processing