CMU 15-112: Fundamentals of Programming and Computer Science
Week 2: Graphics

• Trace #1 of 2: Note: Use a pencil when solving this problem. Trust us.
  Given that the box below is your canvas, with a width and height of 400 each, draw what the following code will display. You can assume that this is called within the appropriate graphics helper code.
  Hint: Each of the small boxes on the canvas is 50x50 pixels.
  def redrawAll(app): step = app.width//4 for i in range(2): for j in range(2): color = "white" if (i + j) % 2 == 1 else "black" drawCircle(step + 2 * step * i, step + 2 * step * j, step / 2, border="black", fill=color) drawRect(step, step, 2 * step, 2 * step, border="black", fill="white") drawLine(0, app.height, app.width, 0) drawLine(step, step, 2 * step, 2 * step)
  
  
• Trace #2 of 2:
  def drawCT1(app, m, n): d = app.width x = 0 y = 0 for i in range(n): if i%2 == 0: color = 'black' else: color = 'white' drawRect(x, y, d, d, fill=color, border='black') d-= m x += m//2 y += m//2 drawLabel("112 Rocks", app.width//2, app.height//2, align='center', fill='black') def redrawAll(app): drawCT1(app, 100, 4) runApp()
  Given that the box below is your canvas, with a width and height of 400 each, draw what the above code would display. You can assume that this is called within the appropriate graphics helper code.
  Hint: Each of the small boxes on the canvas is 50x50 pixels.
  
  

• drawStackCoins
Fill in the code for the function drawStackCoins(app,coinCells), which draws a 6x7 board game, with a total of 42 cells. The function takes as an input the string coinCells that specify the cells at which green coins are currently inserted. Each cell is represented as two numbers that map to rowID 0,1,2,...,5 and columnID 0,1,2,...,6; where cell(00) is the corner left top cell in the board.
For example, drawStackCoins(app, "02,25") draws two green coins/circles; one at cell 02 (i.e. row0 column2) and the other at cell 25 (i.e. row2 column5). Consider the following examples (note that the printed row and column numbers are there to help your understanding, they are not present in the actual game):

You can assume that app.width==app.height. The cells should be drawn to span the canvas width. Each cell should be drawn as a blue square with a black border and a circle centered in the square. The color of the circle depends on whether the cell is empty ('white') or has a ('green') coin. Your code should be able to handle window resize. You can assume that cmu_graphics is already imported and there is a function redrawAll(app) that will call your function.
def drawStackCoins(app, coinCells): numRows = 6 numCols = 7 sideL = app.width // numCols for r in range(numRows): for c in range(numCols): x = ____________________________________________________________________ y = ____________________________________________________________________ drawRect(x, y,__________________________________________________________) if _________________________________ in ________________________________: circleColor = 'green' else: circleColor = 'white' drawCircle(_____________________________________________________________)


• drawTowerGraphs
Fill in the blanks (A,B,C,D,E) so that this code draws the given image (shown below). Do not add any new lines. Just fill in the blanks. The image does not need to resize and you may assume the canvas is 400x200.

You can assume that app.width==app.height. The cells should be drawn to span the canvas width. Each cell should be drawn as a blue square with a black border and a circle centered in the square. The color of the circle depends on whether the cell is empty ('white') or has a ('green') coin. Your code should be able to handle window resize. You can assume that cmu_graphics is already imported and there is a function redrawAll(app) that will call your function.
from cmu_graphics import * def drawTower(app, width ,height): x = 100 # Width of top-most rectangle dy = 50 # Height of top-most rectangle for i in range(4): x0 = ___________________________ # (A) y0 = i*dy x1 = ____________________________ # (B) y1 = ____________________________ # (C) col = ____________________________ # (D) drawRect(x0, y0, x1, y1, fill=col) drawLabel(_______________________________) (E) def redrawAll(app): drawTower(app, 400, 200) def main(): runApp() main()

1. drawFlags
   Google the flags of the following countries and use CMU graphics to draw at least two of them.
   • Belgium
   • England
   • Switzerland
   • Palestine
   • Japan
   
   
2. drawClock
   Draw a clock with colours of your choice that shows the current time on your system.
   


3. drawAbacusRow
Write the function drawAbacusRow(app, rowStr), which draws a set of 10 horizontally aligned circles that represent a row of sliding beads in an Abacus. The length of the row is equal to 12 times the diameter, which means there are always two empty slots in the row. Here’s one example:

The function receives as input a string rowStr that specifies the beads’ color and positions. The string starts with the color name and ends with 12 characters. Each character of the last twelve refers to one slot and specifies whether there’s a bead or not in the specific slot in the row: a 0 indicates that there is a bead, and a- indicates that there is no bead in the corresponding slot. For instance, calling drawAbacusRow(app, 'red000000--0000')produces the graphics above. You can assume that app.width > app.height. The row should span the entire width of the window. Your code should be able to handle window resizes. A line depicting the rod should be seen in the empty slots. You can assume that cmu_graphics is already imported and there a function redrawAll(app) that will call your function. Here’s another example calling drawAbacusRow(app, 'lightBlue00-00000000-')



4. drawRGBTarget
Write the function drawRGBTarget(canvas, width, height, n), which draws a target with n concentric circles with alternating colors (red, green, blue) and the label RGB as shown below:

In this example, the number of concentric circles is 10. You can assume that the canvas has equal width and height. The biggest circle should span the entire canvas and always be red. The font should be bold, and its size should equal the radius of the smallest circle. Your code should be able to handle window resizes. As usual, this question will have partial credit. Here’s another example with n = 6:




5. drawNiceFlower
Write the function drawNiceFlower(app, n), which draws a nice flower using ('pink')-colored ovals and a ('lightCyan')-colored circle centered in the flower. The function takes as an input an integer n representing the number of ovals that are used to draw the flower. Consider the following two examples:

You can assume that app.width==app.height. The ovals and the circle should be centered on the canvas. The oval’s height should be 2/3 of the canvas height and its width should be 1/3 of the canvas width. The circle should fit inside the last oval. You can assume that cmu_graphics is already imported and there is a function redrawAll(app) that will call your function.
Hint: Remember that shapes can be rotated using an argument to the function that draws the shape.


6. drawTicTacToe
Write the function drawTicTacToe(app, s), which draws a 3x3 TicTacToe board game with Xs and Os. The function takes as an input a string s that specifies the content of the nine board cells. Each character of s refers to one cell and specifies whether it has X ('x'), O ('o'), or Nothing ('_'). The first character in s corresponds to the first cell which is the top-left one and the last character corresponds to the last cell which is the right-bottom one. Consider the following two examples:

YYou can assume that app.width==app.height. The nine cells should be drawn to span the entire canvas. Your code should be able to handle window resize. To simplify things for you, feel free to draw the Xs and Os as text instead of drawing them manually. You can assume that cmu_graphics is already imported and there is a function redrawAll(app) that will call your function.