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

Processing Beginners
1

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.

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();
}
1 Like
2

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

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();
}
1 Like
3

This does the trick…

Alternatively add mouse position to all positions

1 Like
4

So, to break those two options down:

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

or

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().

1 Like
5

Thank you all for the answers it really helped!

1 Like