Custom classes with many drawing components?

Processing Coding Questions
1

Hello! I’m trying to take a drawing of a cat face i’ve made and put it into custom classes that follow a mouse as it moves. I’m a bit confused as to the differences between the base class and an implemented child class. How does one go putting a fairly complex drawing into classes? I know I need to implement a float x = mouseX; and float y = mouseY; into my shapes as well to make them follow the mouse but i’m very confused. Here is my code so far.

size(500, 500);
noStroke();
background(250);
fill(197, 224, 220);
rect(0, 500, 600, 200);
stroke(224, 142, 121);
strokeWeight(4);
//ears
fill(209);
triangle(130, 100, 120, 300, 400, 300);
triangle(470, 100, 480, 300, 200, 300);
fill(224, 142, 121);
triangle(150, 150, 130, 300, 500, 280);
triangle(450, 150, 480, 300, 100, 280);
//whiskers
line(120, 280, 40, 260);
line(480, 280, 560, 260);
line(120, 300, 60, 300);
line(480, 300, 540, 300);
line(120, 320, 40, 340);
line(480, 320, 560, 340);
//face
fill(209);
ellipse(300, 300, 400, 300);
//nose
fill(224, 142, 121);
triangle(300, 340, 280, 320, 320, 320);
line(300, 340, 260, 360);
line(300, 340, 340, 360);
//eyes
noStroke();
fill(0, 200, 250);
ellipse(200, 280, 30, 30);
ellipse(400, 280, 30, 30);

any help would be greatly appreciated …

2

Please, edit your post by clicking the small pen icon on the top right of your post, selecting your code and clicking the </> icon in the editor.
Note that you can also hit ctrl+t in processing to indent everything properly.

You can find all the information here:

Now for your question, you can use the translate function to move your cat around. Here an example:

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

void draw() {
  translate(mouseX-height/2, mouseY-width/2); // This is the important line, the rest is all your code
  
  noStroke();
  background(250);
  fill(197, 224, 220);
  rect(0, 500, 600, 200);
  stroke(224, 142, 121);
  strokeWeight(4);
  //ears
  fill(209);
  triangle(130, 100, 120, 300, 400, 300);
  triangle(470, 100, 480, 300, 200, 300);
  fill(224, 142, 121);
  triangle(150, 150, 130, 300, 500, 280);
  triangle(450, 150, 480, 300, 100, 280);
  //whiskers
  line(120, 280, 40, 260);
  line(480, 280, 560, 260);
  line(120, 300, 60, 300);
  line(480, 300, 540, 300);
  line(120, 320, 40, 340);
  line(480, 320, 560, 340);
  //face
  fill(209);
  ellipse(300, 300, 400, 300);
  //nose
  fill(224, 142, 121);
  triangle(300, 340, 280, 320, 320, 320);
  line(300, 340, 260, 360);
  line(300, 340, 340, 360);
  //eyes
  noStroke();
  fill(0, 200, 250);
  ellipse(200, 280, 30, 30);
  ellipse(400, 280, 30, 30);
}

For your class, it would be pretty simple. If the only thing you want is to draw and follow the mouse you just need to create a class Cat and add a show function inside that is a copy paste of the previous draw() function. Like this:

// The class that will handle the cat display
class Cat {
 void show() {
  // This function is a copy/paste of the draw() function above
  translate(mouseX-height/2, mouseY-width/2);
  
  noStroke();
  background(250);
  fill(197, 224, 220);
  rect(0, 500, 600, 200);
  stroke(224, 142, 121);
  strokeWeight(4);
  //ears
  fill(209);
  triangle(130, 100, 120, 300, 400, 300);
  triangle(470, 100, 480, 300, 200, 300);
  fill(224, 142, 121);
  triangle(150, 150, 130, 300, 500, 280);
  triangle(450, 150, 480, 300, 100, 280);
  //whiskers
  line(120, 280, 40, 260);
  line(480, 280, 560, 260);
  line(120, 300, 60, 300);
  line(480, 300, 540, 300);
  line(120, 320, 40, 340);
  line(480, 320, 560, 340);
  //face
  fill(209);
  ellipse(300, 300, 400, 300);
  //nose
  fill(224, 142, 121);
  triangle(300, 340, 280, 320, 320, 320);
  line(300, 340, 260, 360);
  line(300, 340, 340, 360);
  //eyes
  noStroke();
  fill(0, 200, 250);
  ellipse(200, 280, 30, 30);
  ellipse(400, 280, 30, 30);
 }
}


Cat myCat;

void setup() {
  size(500, 500);
  myCat = new Cat();
}

void draw() {
  myCat.show();
}
3

Thank you very much for your help so quickly. I greatly appreciate it!