Draw a blue rectangle

edited May 2015 in How To...

Write a program that allows the user to click in 2 locations to draw a blue rectangle (where the 2 points you clicked on serve as the opposite diagonal corners)


  • Answer ✓

    This forum is not for handing out code. Explain why you are stuck writing this yourself and post your efforts so far. Someone will help you from there

    Imagine first the easiest case which is where the user clicks the top-left corner and then the bottom-right corner. The x, y position of the rect() would just be where mouseX, mouseY was during the first click. During the second mouse click the width would be the new mouseX position minus the position of the first mouseX (finding height is similar with mouseY)

  • Can someone just give me the code I've been struggling with this for 30 minutes like honestly I don't get it like I put the mouse x and mouse y for the rectangle but do I have to write mousepressed first like how is a rectangle even drawn from clicking on two points

  • No, it is pretty clear that this is an assignment and you need to do it yourself. We can give you starting code and help you out with specific questions

    Below I made some starting code. There are a few important things going on:

    • The mousePressed() function code gets executed when someone clicks the mouse

    • Inside of the mousePressed() function a variable named clickNumber keeps track of what click is currently happening. I just made this up by adding 1 to a variable each time a click happens

    • During the first click and the second click the corresponding mouseX and mouseY are stored for later use (inside x1, y1, x2, and y2)

    What you need to do is draw a rect() based on x1, y1, x2, and y2. Do the case I mentioned above first, it is the easier case to handle. Basically the rect() will be placed at location x1, y1 and the width and height will have to be calculated by finding the difference of x2-x1 and y2-y1

    // We are going to store the clicks in these integers
    int x1, y1, x2, y2;
    // We are going to keep track of what click happened with this
    // I didn't need to make clickNumber 0 because it is by default
    // but it important that it is 0 at first so I am showing it
    int clickNumber = 0;
    void setup() {
      size(600, 400);
    void draw() {
      background(255, 255, 255);
      // This is just to help you visually
      // It draws a circle at the first click and the second click
      ellipse(x1, y1, 10, 10);
      ellipse(x2, y2, 10, 10);
      // If at least 2 clicks have happened you will have to draw the rectangle
      // Try working on the easier case I mentioned earlier in the comments first
      if (clickNumber >= 2) {
        // Code for drawing the rect() goes here
    void mousePressed() {
      // Every time a click happens we will make clickNumber one bigger
      // We only care about the first click and the second click
      // Store the first click with x1, y1
      if (clickNumber == 1) {
        x1 = mouseX;
        y1 = mouseY;
      // Store the second click with x2, y2
      if (clickNumber == 2) {
        x2 = mouseX;
        y2 = mouseY;
      // No need to store other clicks in this sketch
  • Can someone just give me the code I've been struggling with this for 30 minutes

    So you want to cheat on your homework? Well we are not hear to help you cheat.

    Discussion closed.

This discussion has been closed.