# Custom classes with many drawing components?

**URL:** <https://discourse.processing.org/t/custom-classes-with-many-drawing-components/2853>\
**Category:** Coding Questions\
**Created:** [August 22, 2018, 3:51pm UTC](https://discourse.processing.org/t/custom-classes-with-many-drawing-components/2853 "2018-08-22T15:51:46Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [August 22, 2018, 4:23pm UTC](https://discourse.processing.org/t/custom-classes-with-many-drawing-components/2853/2 "2018-08-22T16:23:22Z")

</div>

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:

> [@Guidelines—Asking Questions](https://discourse.processing.org/t/guidelines-tips-on-asking-questions/2147):
>
> Summary (TL;DR) Ask complete questions to get better answers! Be specific. For example: I want to load an image. I tried using createImg() , and I expected the image to be on canvas, but what happened instead was the image showing up below the canvas. Isolate your problem and work in small steps. Share only the code directly related to your problem if it is part of a bigger project, and if something isn’t working, try the smallest code that could do the thing you want. Can we run your code to …

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

```auto
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:

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

```

---

_[View the full topic](https://discourse.processing.org/t/custom-classes-with-many-drawing-components/2853)._