Betsy Ross US Flag

CS 112 Design of the Betsy Ross US Flag

Problem. Reproduce the US flag for the original 13 states designed by Betsy Ross. See the following figures for her flag and the current specifications for the US flag. I assume the current specifications comefromthe her flag but with 50 stars replacing 13.

The flag of Betsy Ross has three separate parts: the 13 red and white stripes, the blue rectangle andthecircle of 13 white stars.

I realize that I can reuse the functions fillRectangle() and fillStar() from the previous lab.

So my design will focus on a function to draw a circle of 13 white stars in the upper left corner of the flag. I will call this function drawCircleOfStars(). The figure indicates that the center of the circle is the centerof the blue rectangle. I will use the current specifications for the US flag for the Betsy Ross flag. I decidetouse as the diameter of the circle of stars the value C - E - F from the current specification. Of course I must multiply C-E-F /2 by a constant SIZE, say of 200 pixels. I will call this value of C-E-F /2 circleRadius. The specification also gives the diameter of a star as K. So the radius of eachstaris K/ 2 . I will name this value starRadius.

The letters A through L refer to the values on the above specification in the right figure.

The angle between two adjacent stars in the circle is 2 π/ 13. I will name this variable dt for change of angle t. I decide to point each star north for simplicity. To draw 13 stars requires the use of a for loop and the use of fillStar() from the previous lab. I decide to start drawing the 13 stars with the one atanangleof π/2 named nStar in the following figure. The center of this star is on the circumference of the circle with radiusof circleRadius and with center at the center of the blue rectangle. The center of the circle of 13 stars occurs at the point ( bcx, bcy ) for x and y coordinates of the center of the circle in the blue rectangle. From the specification bcx = D / 2 and bcy = C / 2 .

From trigonometry, the x and y coordinates of a point on the circumference of a unit circle are ( cos( t ), sin( t ) ) where t is the central angle. So the center of the star at angle π /2 is ( bcx, bcy ) + ( circleRadius · cos( angle ), circleRadius · sin( angle ) ). So the parameters to fillStar() from lab 1 are a turtle for drawing, x and y coordinates for the centerofthe star, the radius of the star and the color white. Then I add dt to the angle and repeat the calculations for the center of next star labeled star in the figure with the angle of π/2 + dt. I finish for the remaining stars witha for loop that has 13 steps.

1 nStar star

circleRadius 2π/13

(bcx, bcy)

The pseudo code for drawing a circle of 13 stars follows.

angle = pi / 2 dt = 2 * pi / 13 for i in range( 13 ) cx = bcx + circleRadius * cos( angle ) cy = bcy + circleRadius * sin( angle ) fillStar( turtle, bcx, bcy, starRadius, ’white’ ) angle = angle + dt

The new function named drawCircleOfStars() has the parameters of turtle, coordinates of the center of the circle, radius of the circle, radius for the star and color for the star. def drawCircleOfStars( turtle, bcx, bcy, circleRadius, starRadius, color ) :

The design of this new function drawCircleOfStars() is complete.

I can now consider drawing the stripes. The 13 stripes alternate between the colors red and white. Since the default background for the turtle module is white, I only need to draw the red stripes. After I draw 7 long red stripes, drawing the blue rectangle will overwrite the top 4 long red stripes to produce 4 short red stripes. I will use a for loop to fill the 7 red rectangular stripes with fillRectangle().

I decide to draw the flag in the first quadrant to avoid the use of negative numbers. I can place theoriginin the lower left corner with a call to setworldcoordinates() of the turtle module. That is, screen.setworldcoordinates( 0, 0, B * SIZE, A * SIZE ).

I decide to define a new function drawStripes() to draw the 7 red stripes. Its parameters are a turtle, the horizontal length and the vertical width of a stripe and a color. The upper left x coordinate of each stripe is zero. The upper left y coordinate of the bottom stripe is the vertical width of a stripe. The upper left y coordinate of the second from the bottom stripe is 3 · this width, since I need to skip a white stipe. Similarly for the remaining red stripes. That is, def drawStripes( turtle, length, width, color ) : 2 I use a for loop to draw the 7 red stripes.

ulx = 0 for i in range( 7 ) : uly = ( 2 * i + 1 ) * width fillRectangle( turtle, ulx, uly, length, width, color )

Finally to draw the flag requires the following calls. drawStripes( turtle, B * SIZE, L * SIZE, RED ). fillRectangle( turtle, 0, A * SIZE, D * SIZE, C * SIZE, BLUE) xBlueCenter = D * SIZE / 2 yBlueCenter = ( A - C / 2 ) * SIZE radius = ( C - E - F ) / 2 * SIZE starRadius = K / 2 * SIZE drawCircleOfStars( turtle, xBlueCenter, yBlueCenter, radius, starRadius, ’white’ )

Use of the eyedropper tool in a browser reveals that BLUE is ’#002468’ and RED is ’#c1032d’.

This completes the design for the US flag due to Betsy Ross.