CS 115 Lab 4, Part A: Locate the user's mouse clicks

[Back to lab instructions]

As you work through this section, be sure that you really understand each of the programs, and call for help if you don't!

Mouse click-points

Open PyCharm and then the project Lab04. Create a new python file and call it lab04a_1.py. Copy-paste the following program into the new window, substituting your name for the italicized text:

"""
    Program: CS 115 Lab 4a_1    
    Author: Your name here.
    Description: This program uses the graphics package 
        to interact with the user.
"""
from graphics import *


def main():
    window = GraphWin('Lab 4a_1', 400, 600)

    for i in range(5):
        click_point = window.getMouse()
        click_point_x = click_point.getX()
        click_point_y = click_point.getY()
        print('x = ', click_point_x, ', y = ', click_point_y, sep="")
    window.getMouse()
    window.close()

main()

Run the program and click the mouse in the window that it launches. After each click, look at the console (text) output. There, you will see the values of the x- and y-coordinates of the 5 points where the user clicked.

Some explanation:

Recall that the following statement prompts the user for a name and and then saves what the user types into a variable whose name is user_input and whose data type is str:
```
user_input = input('Enter a name: ')   
```
Similarly, the statement
```
click_point = window.getMouse()
```
waits for the user to click the mouse in the graphics window. Then, it saves the coordinates of the point where the mouse click occurred into a variable whose name is click_point and whose data type is Point.
The Point object that gets created as a result of the above code is similar to the following:
```
center = Point(120, 110)
```
This code creates a Point variable with x- and y-coordinates of 120 and 110.

In the example of window.getMouse(), Python uses the x and the y of the point the user clicked to create click_point.
Once you have a variable whose data type is Point, you can extract its x- and y-coordinates using variable_name.getX() and variable_name.getY(), respectively.

Once you have understood these explanations, answer Question 13 in your writeup.

Modify the above program to draw a circle centered at the point of each mouse-click. You can refer to your lab03 to remember the syntax for creating circles. Use 20 for the radius of the circle.

At the end, you should see 5 circles in the graphics window for the 5 points the user clicked.

Drawing Rectangles

As you have seen, you create a rectangle by providing the coordinates of two of its opposite vertices. Create a Python program called lab04a_2.py and copy and paste the following program in it.

"""
    Program: CS 115 Lab 4a_2
    Author: Your name here.
    Description: This program draw a few rectangles and fills them.
"""
from graphics import *


def main():
    window = GraphWin('Lab 4a_2', 400, 600)

    palette_top_left_x = 10
    palette_top_left_y = 20
    width = 60
    height = 60
    yellow_top_left = Point(palette_top_left_x, palette_top_left_y)
    yellow_bottom_right = Point(palette_top_left_x + width, palette_top_left_y + height)
    yellow_rectangle = Rectangle(yellow_top_left, yellow_bottom_right)
    yellow_rectangle.setFill('yellow')
    yellow_rectangle.draw(window)

    for i in range(5):
        c_point = window.getMouse()
        x_c_point = c_point.getX()
        y_c_point = c_point.getY()
        if (yellow_top_left.getX() <= x_c_point <= yellow_bottom_right.getX() and
           yellow_top_left.getY() <= y_c_point <= yellow_bottom_right.getY()):
            print('The click with x =', c_point.getX(), 'and y =',
                  c_point.getY(), 'is in the yellow square.')
        else:
            print('The click with x =', c_point.getX(), 'and y =', 
                  c_point.getY(), 'is not in the yellow square.')

    window.getMouse()
    window.close()

main()

The program draws a square (a rectangle) and then fills it with yellow color. Then, it enters a loop. Read the code for the loop, and answer Questions 14 through 17 in your writeup.

Add two additional squares to this program and color them pink and blue, similar to the following image. Use helpful variable names so that you can easily distinguish the different squares.
Row of colored boxes: yellow, then pink, then blue

After adding the new squares, modify your program so that if the user clicks on any of the squares, you can identify and print the square's color. The output of your program should be like this:

The click with x = 41 and y = 50 is in the yellow square.
The click with x = 261 and y = 239 is not in any of the squares.
The click with x = 48 and y = 40 is in the yellow square.
The click with x = 132 and y = 46 is in the blue square.
The click with x = 230 and y = 55 is not in any of the squares.
The click with x = 106 and y = 103 is not in any of the squares.
The click with x = 88 and y = 44 is in the pink square.
The click with x = 33 and y = 41 is in the yellow square.
The click with x = 6 and y = 36 is not in any of the squares.
The click with x = 53 and y = 10 is not in any of the squares.

When you are done, demo your code and then continue to Part B.