Question

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





  }

我需要帮助将此代码转换为类似于此的代码：

/*
 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();
  }
}

使用类和诸如此类的东西，以便我可以开始为宠物添加我自己的动画。我只是不确定在哪里放置所有内容/如何使用我的绘图来组织它。

Answer 1

如果我是你，我会从更简单的事情开始。例如，这是一个使用4个变量来显示球弹跳的程序：

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

bouncing ball http://happycoding.io/tutorials/processing/images/creating-classes-1.gif

从这里开始，我们可以将这4个变量封装到一个类中：

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

}

现在我们有了一个类，我们可以使用该类的实例来控制我们的球。

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

}

您的代码将遵循类似的模式：创建一个类，通过在类中移动变量来封装数据，然后创建该类的实例并调用其方法来绘制您的数字。从更简单的东西开始，只需创建一个绘制单个圆的类。首先让它工作，然后在该类中添加变量以绘制两个圆圈（头部和主体），并继续按照这样的小步骤工作，直到您绘制整个图形为止。

我真的建议尝试一些事情，如果你遇到问题就张贴MCVE。祝你好运。

无耻的自我推销：我已经编写了一篇关于在Processing available here中创建类的教程。

需要帮助在简单的宠物绘画中添加课程和动画吗？

1 个答案: