Make an object with multiple parts move with the mouse

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
}

}

Answers

  • 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.

  • 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.

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

  • So you repay our helpfulness by deleting your question?

  • 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.