› › ›

Make an object with multiple parts move with the mouse

Sam12496Sam12496
edited February 2018 in Arduino

Hi I'm completely new to processing and stuck with an assignment. I have to make a drone like object move with my mouse. It should look something like this (https://drive.google.com/open?id=10-_ZW6T4q-o3Hhx01RsRXMZP4ifbxk_k). I am done with most of it but not sure how to make the rectangular body and the lines connecting it move. Any suggestions will be very helpful thank you. Here's my code (sorry if I made any stupid mistakes I'm still learning):

final float CANVAS_SIZE = 500;
final float SCALE_DRONE = 0.5;
final float PROP_FRAME_DIA = ((CANVAS_SIZE*9)/25)*SCALE_DRONE;//propeller frame diameter
final float INNER_CIRCLE_DIA = (CANVAS_SIZE/25)*SCALE_DRONE;//inner circle diameter
final float CEN_X_LEFT = (CANVAS_SIZE/5)*SCALE_DRONE;//top-left and bottom-left cicrcle center X
final float CEN_X_RIGHT = ((CANVAS_SIZE*4)/5)*SCALE_DRONE;//top-right and bottom-right cicrcle center X
final float CEN_Y_TOP = (CANVAS_SIZE/5)*SCALE_DRONE;//top-left and top-right cicrcle center Y
final float CEN_Y_BOTTOM = ((CANVAS_SIZE*4)/5)*SCALE_DRONE;//bottom-left and bottom-right cicrcle center Y
final float RECT_WIDTH = ((CANVAS_SIZE*3)/10)*SCALE_DRONE;//width of rectangular drone body
final float RECT_HEIGHT = ((CANVAS_SIZE*3)/5)*SCALE_DRONE;//height of the rectangular drone body
final float X_80 = ((CANVAS_SIZE*4)/25)*SCALE_DRONE;//x-value 80
final float X_60 = ((CANVAS_SIZE*3)/25)*SCALE_DRONE;//x-value 60
final float X_40 = ((CANVAS_SIZE*2)/25)*SCALE_DRONE;//x-value 40
final float X_20 = ((CANVAS_SIZE)/25)*SCALE_DRONE;//x-value 20

void setup() {
background(255);//canvas background
size(500,500);//canvas size
}


void draw() {
background(255);
drawBody();
drawTopLeftProp();
drawTopRightProp();
drawBottomLeftProp();
drawBottomRightProp();
}

void drawBody() {
//drone body

fill(0,0,255);//blue color
strokeWeight(20);//rectangle border width
rect(PROP_FRAME_DIA, CEN_Y_TOP, RECT_WIDTH, RECT_HEIGHT);//rectangular drone body 
}

void drawTopLeftProp(){
//propeller frame
fill(255);//white color
strokeWeight(5);//top-left propeller frame border width
ellipse(mouseX - CEN_X_LEFT, mouseY - CEN_Y_TOP, PROP_FRAME_DIA, PROP_FRAME_DIA);//Top-left circle

//inner circle
fill(0);//black color
ellipse(mouseX - CEN_X_LEFT, mouseY - CEN_Y_TOP, INNER_CIRCLE_DIA, INNER_CIRCLE_DIA);//Top-left inner circle

//mount
strokeWeight(10);//top-left mount width
line(CEN_X_LEFT, CEN_Y_TOP, CEN_X_LEFT + X_80, CEN_Y_TOP + X_40);//Top-left mount

//fan
//top-left
strokeWeight(5);
fill(255,0,0);//red color
triangle(mouseX - CEN_X_LEFT, mouseY - (CEN_Y_TOP - X_60), mouseX - CEN_X_LEFT, mouseY - CEN_Y_TOP, mouseX - (CEN_X_LEFT + X_20), mouseY - (CEN_Y_TOP - X_20));//propeller 1
triangle(mouseX - CEN_X_LEFT, mouseY - CEN_Y_TOP, mouseX - CEN_X_LEFT, mouseY - (CEN_Y_TOP + X_60), mouseX - (CEN_X_LEFT - X_20), mouseY - (CEN_Y_TOP + X_20));//propeller 2
}

void drawTopRightProp(){
//propeller frame
fill(255);//white color
strokeWeight(5);//top-right propeller frame border width
ellipse(mouseX + CEN_X_RIGHT, mouseY - CEN_Y_TOP, PROP_FRAME_DIA, PROP_FRAME_DIA);//Top-right circle

//inner circle
fill(0);//black color
ellipse(mouseX + CEN_X_RIGHT, mouseY - CEN_Y_TOP, INNER_CIRCLE_DIA, INNER_CIRCLE_DIA);//Top-right inner circle

//mount
strokeWeight(10);//top-right mount width
line(CEN_X_RIGHT, CEN_Y_TOP, CEN_X_RIGHT - X_80, CEN_Y_TOP + X_40);//Top-right mount

//fan
//top-right
strokeWeight(5);
fill(255,0,0);//red color
triangle(mouseX + CEN_X_RIGHT, mouseY - (CEN_Y_TOP - X_60), mouseX + CEN_X_RIGHT, mouseY - CEN_Y_TOP, mouseX + (CEN_X_RIGHT + X_20), mouseY - (CEN_Y_TOP - X_20));//propeller 3
triangle(mouseX + CEN_X_RIGHT, mouseY - CEN_Y_TOP, mouseX + CEN_X_RIGHT, mouseY - (CEN_Y_TOP + X_60), mouseX + (CEN_X_RIGHT - X_20), mouseY - (CEN_Y_TOP + X_20));//propeller 4
}

void drawBottomLeftProp(){
//propeller frame
fill(255);//white color
strokeWeight(5);//bottom-left propeller frame border width
ellipse(mouseX - CEN_X_LEFT, mouseY + CEN_Y_BOTTOM, PROP_FRAME_DIA, PROP_FRAME_DIA);//Bottom-left circle

//inner circle
fill(0);//black color
ellipse(mouseX - CEN_X_LEFT, mouseY + CEN_Y_BOTTOM, INNER_CIRCLE_DIA, INNER_CIRCLE_DIA);//Bottom-left inner circle

//mount
strokeWeight(10);//bottom-left mount width
line(CEN_X_LEFT, CEN_Y_BOTTOM, CEN_X_LEFT + X_80, CEN_Y_BOTTOM - X_40);//Bottom-left mount

//fan
//bottom-left
strokeWeight(5);
fill(255,0,0);//red color
triangle(mouseX -CEN_X_LEFT, mouseY + (CEN_Y_BOTTOM - X_60), mouseX - CEN_X_LEFT, mouseY + CEN_Y_BOTTOM, mouseX - (CEN_X_LEFT + X_20), mouseY + (CEN_Y_BOTTOM - X_20));//propeller 5 
triangle(mouseX -CEN_X_LEFT, mouseY + CEN_Y_BOTTOM, mouseX - CEN_X_LEFT, mouseY + (CEN_Y_BOTTOM + X_60), mouseX - (CEN_X_LEFT - X_20), mouseY + (CEN_Y_BOTTOM + X_20));//propeller 6
}

void drawBottomRightProp(){
//propeller frame
fill(255);//white color
strokeWeight(5);//bottom-right propeller frame border width
ellipse(mouseX + CEN_X_RIGHT, mouseY + CEN_Y_BOTTOM, PROP_FRAME_DIA, PROP_FRAME_DIA);//Bottom-right circle

//inner circle
fill(0);//black color
ellipse(mouseX + CEN_X_RIGHT, mouseY +CEN_Y_BOTTOM, INNER_CIRCLE_DIA, INNER_CIRCLE_DIA);//Bottom-right inner circle

//mount
strokeWeight(10);//bottom-right mount width
line(CEN_X_RIGHT, CEN_Y_BOTTOM, CEN_X_RIGHT - X_80, CEN_Y_BOTTOM - X_40);//Bottom-right mount

//fan
//bottom-right
strokeWeight(5);
fill(255,0,0);//red color
triangle(mouseX + CEN_X_RIGHT, mouseY + (CEN_Y_BOTTOM - X_60), mouseX + CEN_X_RIGHT, mouseY + CEN_Y_BOTTOM, mouseX + (CEN_X_RIGHT + X_20), mouseY + (CEN_Y_BOTTOM - X_20));//propeller 7
triangle(mouseX + CEN_X_RIGHT, mouseY + CEN_Y_BOTTOM, mouseX + CEN_X_RIGHT, mouseY + (CEN_Y_BOTTOM + X_60), mouseX + (CEN_X_RIGHT - X_20), mouseY + (CEN_Y_BOTTOM + X_20));//propeller 8
}

}

Best Answers

Answers

  • koogskoogs
    Answer ✓

    Look at translate() in the reference. You can skip the mouseX, mouseY stuff in all your shape commands and just call translate before calling them. (Similarly your 4 props look like that same code just translated so you could reduce them to a single method)

    Beware, though, that translation is accumulative so you'll need pushMatrix / popMatrix as well.

  • TfGuy44TfGuy44
    edited February 2018 Answer ✓

    All these things you are drawing - ellipses, lines, rectangles, etc - all use parameters to the functions that draw them to determine where they should be.

    For the drawn items making up the propellers, you are adding the mouseX and mouseY values to the position. This allows them to move when the mouse moves. Are you doing this for the body of the drone too? Could you?

    You might also look into using the translate() function.

  • koogskoogs

    (ha ha)

  • Sam12496Sam12496

    Thank you very much that was very helpful! Wow this method was way organized than my noob approach lol.

  • koogskoogs

    So you repay our helpfulness by deleting your question?

  • GoToLoopGoToLoop 
    final float CANVAS_SIZE = 500;
final float SCALE_DRONE = 0.5;
final float PROP_FRAME_DIA = ((CANVAS_SIZE*9)/25)*SCALE_DRONE;//propeller frame diameter
final float INNER_CIRCLE_DIA = (CANVAS_SIZE/25)*SCALE_DRONE;//inner circle diameter
final float CEN_X_LEFT = (CANVAS_SIZE/5)*SCALE_DRONE;//top-left and bottom-left cicrcle center X
final float CEN_X_RIGHT = ((CANVAS_SIZE*4)/5)*SCALE_DRONE;//top-right and bottom-right cicrcle center X
final float CEN_Y_TOP = (CANVAS_SIZE/5)*SCALE_DRONE;//top-left and top-right cicrcle center Y
final float CEN_Y_BOTTOM = ((CANVAS_SIZE*4)/5)*SCALE_DRONE;//bottom-left and bottom-right cicrcle center Y
final float RECT_WIDTH = ((CANVAS_SIZE*3)/10)*SCALE_DRONE;//width of rectangular drone body
final float RECT_HEIGHT = ((CANVAS_SIZE*3)/5)*SCALE_DRONE;//height of the rectangular drone body
final float X_80 = ((CANVAS_SIZE*4)/25)*SCALE_DRONE;//x-value 80
final float X_60 = ((CANVAS_SIZE*3)/25)*SCALE_DRONE;//x-value 60
final float X_40 = ((CANVAS_SIZE*2)/25)*SCALE_DRONE;//x-value 40
final float X_20 = ((CANVAS_SIZE)/25)*SCALE_DRONE;//x-value 20

void setup() {
background(255);//canvas background
size(500,500);//canvas size
}


void draw() {
background(255);
drawBody();
drawTopLeftProp();
drawTopRightProp();
drawBottomLeftProp();
drawBottomRightProp();
}

void drawBody() {
//drone body

fill(0,0,255);//blue color
strokeWeight(20);//rectangle border width
rect(PROP_FRAME_DIA, CEN_Y_TOP, RECT_WIDTH, RECT_HEIGHT);//rectangular drone body 
}

void drawTopLeftProp(){
//propeller frame
fill(255);//white color
strokeWeight(5);//top-left propeller frame border width
ellipse(mouseX - CEN_X_LEFT, mouseY - CEN_Y_TOP, PROP_FRAME_DIA, PROP_FRAME_DIA);//Top-left circle

//inner circle
fill(0);//black color
ellipse(mouseX - CEN_X_LEFT, mouseY - CEN_Y_TOP, INNER_CIRCLE_DIA, INNER_CIRCLE_DIA);//Top-left inner circle

//mount
strokeWeight(10);//top-left mount width
line(CEN_X_LEFT, CEN_Y_TOP, CEN_X_LEFT + X_80, CEN_Y_TOP + X_40);//Top-left mount

//fan
//top-left
strokeWeight(5);
fill(255,0,0);//red color
triangle(mouseX - CEN_X_LEFT, mouseY - (CEN_Y_TOP - X_60), mouseX - CEN_X_LEFT, mouseY - CEN_Y_TOP, mouseX - (CEN_X_LEFT + X_20), mouseY - (CEN_Y_TOP - X_20));//propeller 1
triangle(mouseX - CEN_X_LEFT, mouseY - CEN_Y_TOP, mouseX - CEN_X_LEFT, mouseY - (CEN_Y_TOP + X_60), mouseX - (CEN_X_LEFT - X_20), mouseY - (CEN_Y_TOP + X_20));//propeller 2
}

void drawTopRightProp(){
//propeller frame
fill(255);//white color
strokeWeight(5);//top-right propeller frame border width
ellipse(mouseX + CEN_X_RIGHT, mouseY - CEN_Y_TOP, PROP_FRAME_DIA, PROP_FRAME_DIA);//Top-right circle

//inner circle
fill(0);//black color
ellipse(mouseX + CEN_X_RIGHT, mouseY - CEN_Y_TOP, INNER_CIRCLE_DIA, INNER_CIRCLE_DIA);//Top-right inner circle

//mount
strokeWeight(10);//top-right mount width
line(CEN_X_RIGHT, CEN_Y_TOP, CEN_X_RIGHT - X_80, CEN_Y_TOP + X_40);//Top-right mount

//fan
//top-right
strokeWeight(5);
fill(255,0,0);//red color
triangle(mouseX + CEN_X_RIGHT, mouseY - (CEN_Y_TOP - X_60), mouseX + CEN_X_RIGHT, mouseY - CEN_Y_TOP, mouseX + (CEN_X_RIGHT + X_20), mouseY - (CEN_Y_TOP - X_20));//propeller 3
triangle(mouseX + CEN_X_RIGHT, mouseY - CEN_Y_TOP, mouseX + CEN_X_RIGHT, mouseY - (CEN_Y_TOP + X_60), mouseX + (CEN_X_RIGHT - X_20), mouseY - (CEN_Y_TOP + X_20));//propeller 4
}

void drawBottomLeftProp(){
//propeller frame
fill(255);//white color
strokeWeight(5);//bottom-left propeller frame border width
ellipse(mouseX - CEN_X_LEFT, mouseY + CEN_Y_BOTTOM, PROP_FRAME_DIA, PROP_FRAME_DIA);//Bottom-left circle

//inner circle
fill(0);//black color
ellipse(mouseX - CEN_X_LEFT, mouseY + CEN_Y_BOTTOM, INNER_CIRCLE_DIA, INNER_CIRCLE_DIA);//Bottom-left inner circle

//mount
strokeWeight(10);//bottom-left mount width
line(CEN_X_LEFT, CEN_Y_BOTTOM, CEN_X_LEFT + X_80, CEN_Y_BOTTOM - X_40);//Bottom-left mount

//fan
//bottom-left
strokeWeight(5);
fill(255,0,0);//red color
triangle(mouseX -CEN_X_LEFT, mouseY + (CEN_Y_BOTTOM - X_60), mouseX - CEN_X_LEFT, mouseY + CEN_Y_BOTTOM, mouseX - (CEN_X_LEFT + X_20), mouseY + (CEN_Y_BOTTOM - X_20));//propeller 5 
triangle(mouseX -CEN_X_LEFT, mouseY + CEN_Y_BOTTOM, mouseX - CEN_X_LEFT, mouseY + (CEN_Y_BOTTOM + X_60), mouseX - (CEN_X_LEFT - X_20), mouseY + (CEN_Y_BOTTOM + X_20));//propeller 6
}

void drawBottomRightProp(){
//propeller frame
fill(255);//white color
strokeWeight(5);//bottom-right propeller frame border width
ellipse(mouseX + CEN_X_RIGHT, mouseY + CEN_Y_BOTTOM, PROP_FRAME_DIA, PROP_FRAME_DIA);//Bottom-right circle

//inner circle
fill(0);//black color
ellipse(mouseX + CEN_X_RIGHT, mouseY +CEN_Y_BOTTOM, INNER_CIRCLE_DIA, INNER_CIRCLE_DIA);//Bottom-right inner circle

//mount
strokeWeight(10);//bottom-right mount width
line(CEN_X_RIGHT, CEN_Y_BOTTOM, CEN_X_RIGHT - X_80, CEN_Y_BOTTOM - X_40);//Bottom-right mount

//fan
//bottom-right
strokeWeight(5);
fill(255,0,0);//red color
triangle(mouseX + CEN_X_RIGHT, mouseY + (CEN_Y_BOTTOM - X_60), mouseX + CEN_X_RIGHT, mouseY + CEN_Y_BOTTOM, mouseX + (CEN_X_RIGHT + X_20), mouseY + (CEN_Y_BOTTOM - X_20));//propeller 7
triangle(mouseX + CEN_X_RIGHT, mouseY + CEN_Y_BOTTOM, mouseX + CEN_X_RIGHT, mouseY + (CEN_Y_BOTTOM + X_60), mouseX + (CEN_X_RIGHT - X_20), mouseY + (CEN_Y_BOTTOM + X_20));//propeller 8
}
This discussion has been closed.