Page of5 O ZOOM + Question 2 (8 points): Purpose: To practice using nested loops. To revisit an old problem with new tools. Degree of Diliiculty: Moderate In an earlier assignment. you drew a 4x4 checkerboard of black-and-white squares. Back then. the code to do this was rather tedious; you needed to manually write a call to rect () for every square (or maybe for every 2nd square. depending on your approach) on the board. For this question. you will revisit this problem by drawing full-sized checkerboards of various sizes on the canvas. This time. your program must use loops and allow the user to change the size of the board with key presses. Figure 2: Four examples of checkerboards - a 2x2 board (smallest allowed), an 8x8 board (starting size). an 11x11 board (odd number) and a 16x16 board (Largest allowed) Start with a dark gray background on a 400x400 pixel canvas. Your task is to draw an N-by-N black-and- white checkerboard in Processing. where N can be any Integer between 2 and 16. Have the top-leftmost tile coloured white Like in the gure. You should not allow the user to make the board smaller than 2x2 or larger than 16x16. A 16x16 grid will ll the entire canvas. as seen above, When the user presses the + key. one additional row and column should be added to the checkboard. up to the maximum of 16 rows and columns. When the user presses the - key. one row and column should be removed from the checkboard. down to the minimum of 2 rows and columns. Start the program with an 8x8 checkerboard. For this question. you must use loops to draw the checkerboard. Your oode Itself must use rect () no more than twice (and once is even better)! Use loops. ranges and extra variables as needed to keep track of (a) where to draw the current square. and (b) what color the current square should be (black or white). 0 Hint: Good use of Model-View-Controller design makes this question easier. Use one model variable to store the number of rows and columns to be drawn. Your controller should update this variable in response to key presses. Your view is responsible for drawing the correct number of rows and columns based on the value of the model variable. - Hint: When you did this question for A1. you may have set the background color to either white or black as a shortcut to avoid extra calls to recto. That approach will not help for this problem. as you are required to use a dark gray background and recto no more than twice. What To Hand In: Your code in a le named a7q2.pyde