# Need help figuring out how to make triangle and custom shape follow cursor

**URL:** <https://discourse.processing.org/t/need-help-figuring-out-how-to-make-triangle-and-custom-shape-follow-cursor/14021>\
**Category:** Beginners\
**Created:** [September 17, 2019, 6:02am UTC](https://discourse.processing.org/t/need-help-figuring-out-how-to-make-triangle-and-custom-shape-follow-cursor/14021 "2019-09-17T06:02:09Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Adrian1998](https://avatars.discourse-cdn.com/v4/letter/a/0ea827/32.png) [@Adrian1998](https://discourse.processing.org/u/Adrian1998)\
**Post date:** [September 17, 2019, 6:02am UTC](https://discourse.processing.org/t/need-help-figuring-out-how-to-make-triangle-and-custom-shape-follow-cursor/14021/1 "2019-09-17T06:02:09Z")

</div>

So I am very confused on how to make a triangle and a custom shape follow my cursor, with ellipses and rectangles it is very simple because I can just switch the x and y values to mouseX and mouse Y,  
but with a triangle I do not want to change anything about the shape I just want it to follow the cursor but I am clueless on how to do that, same thing goes for the custom shape I do not know how to make it follow my cursor.

```auto
void setup() {
  size(600,600);
}

void draw() {
   noStroke();
    background(200,230,250);
   fill(105,232,37);
  rect(mouseX,mouseY,130,20);
  //Face
  fill(188,96,9);
  ellipse(mouseX+65,mouseY-40,100,100);
  fill(255);
  ellipse(mouseX+40,mouseY-45,15,15);
  ellipse(mouseX+85,mouseY-45,15,15);
  // I need help here
  triangle(280,160,320,160,300,180);  
  //Hands
  fill(189,96,9);
ellipse(mouseX,mouseY+10,30,30);
ellipse(mouseX+120,mouseY+10,30,30);
//TORSO
//I need help here
beginShape();
noStroke();
fill(8,30,255);
vertex(260,205);
vertex(260,350);
vertex(275,350);
vertex(275,260);
vertex(320,260);
vertex(320,350);
vertex(335,350);
vertex(335,205);
endShape();
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [September 17, 2019, 6:26am UTC](https://discourse.processing.org/t/need-help-figuring-out-how-to-make-triangle-and-custom-shape-follow-cursor/14021/2 "2019-09-17T06:26:55Z")

</div>

a dirty way first,  
clean the px,py hack later by subtract these from the fix x,y settings  
so they can be replaced by 0,0

```auto
void setup() {
  size(600, 600);
  noStroke();
}

void draw() {
  background(200, 230, 250);
  bob();
}
 
void bob() {
  push();
  translate(mouseX,mouseY);
  int px = 35, py = 85;
  fill(105, 232, 37);
  rect(px, py, 130, 20);
  //Face
  fill(188, 96, 9);
  ellipse(px+65, py-40, 100, 100);
  fill(255);
  ellipse(px+40, py-45, 15, 15);
  ellipse(px+85, py-45, 15, 15);
  triangle(80, 60, 120, 60, 100, 80);  
  //Hands
  fill(189, 96, 9);
  ellipse(px, py+10, 30, 30);
  ellipse(px+120, py+10, 30, 30);
  //TORSO
  beginShape();
  noStroke();
  fill(8, 30, 155);
  vertex(60, 105);
  vertex(60, 250);
  vertex(75, 250);
  vertex(75, 160);
  vertex(120, 160);
  vertex(120, 250);
  vertex(135, 250);
  vertex(135, 105);
  endShape();
  pop();
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 17, 2019, 8:05am UTC](https://discourse.processing.org/t/need-help-figuring-out-how-to-make-triangle-and-custom-shape-follow-cursor/14021/3 "2019-09-17T08:05:31Z")

</div>

> [@kll](#):
>
> translate(mouseX,mouseY);

This does the trick…

Alternatively add mouse position to all positions

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 18, 2019, 10:57pm UTC](https://discourse.processing.org/t/need-help-figuring-out-how-to-make-triangle-and-custom-shape-follow-cursor/14021/4 "2019-09-18T22:57:21Z")

</div>

> [@Chrisir](#):
>
> Alternatively add mouse position to all positions

So, to break those two options down:

```auto
void draw(){
  translate(mouseX, mouseY);
  triangle(0, 0, 40, 0, 20, 20);
}

```

or

```auto
void draw(){
  triangle(mouseX, mouseY,
           mouseX + 40, mouseY + 0,
           mouseX + 20, mouseY + 20);
}

```

Note that the translate option is cleaner, but you may need to isolate it from other non-translated drawing that comes after with `pushMatrix()` / `popMatrix()`.

Also: `rect()` works because its second pair of variables are width/height…by default. If you change `rectMode()`, you encounter the same problem – then translate help you work around it, just as with `triangle()`.

---

<div class="post-metadata">

**Author:** ![Adrian1998](https://avatars.discourse-cdn.com/v4/letter/a/0ea827/32.png) [@Adrian1998](https://discourse.processing.org/u/Adrian1998)\
**Post date:** [September 19, 2019, 10:39pm UTC](https://discourse.processing.org/t/need-help-figuring-out-how-to-make-triangle-and-custom-shape-follow-cursor/14021/5 "2019-09-19T22:39:48Z")

</div>

Thank you all for the answers it really helped!