Sunday, July 26, 2015

How to Draw a Circle in Scratch – Part 5


   In Part 4 of this series on How to Draw a Circle in Scratch the G-poly (center, radius) script was completed. It will take just the addition of a single block to convert the G-poly (center, radius) script to the G-poly (center, radius, arc) script. A comparison of the two scripts is shown below.
   Where did the added block come from? In Part 4 we decided to fix the number of sides of the regular polygon at 60. The [turn (right 360/(number of sides)] block then reduced to [turn (right 360/60)] that reduces to [turn right (6)].
   We can set up the proportion for 60 sides to 360º as shown below and solve for x, the length of the side that corresponds to 1º.
60:360 = x:1
x = 0.1666…
   A new [set] block named (arc length)º and a new variable named arc are created. The variable arc is then multiplied by 0.01666… and stored in (arc length)º.
   Now the script will draw a full circle if arc is set to 360 or the arc for any angle from 0º to 360º.
   For all practical purposes, we have created a geometry compass in Scratch! I made a new background for the G-poly (circle, center, radius, arc) script and renamed the script Geometry Compass. In the following graphic the center was set at (15, -25), the radius to 125, and the arc to 281º.
   The Geometry Compass project can be viewed and downloaded at this link.
   Click on the Play button to watch a short video of the Geometry Compass in action.

   Parts 1–5 of this series of Circle posts (in separate PDF files) can be obtained at no cost by sending an email request to grandadscience@gmail.com.

Wednesday, July 15, 2015

How to Program a Circle in Scratch – Part 4


   In Part 3 of this series we ended with a Scratch script that draws a generalized polygon and then sends the ant sprite to the center of the polygon. Along the way we found an expression for the radius in terms of the (length of side) and (number of sides) variables and developed the expression for turning the ant sprite so that it points along a radius. Then the script sent the ant sprite to the center of the polygon. But why not start at the center of the regular polygon? All we need to do is write the G-polyFTC.sb2 script backwards! Build the following code and check that it does indeed work backwards.
   In the above script, all of the action is still controlled by the variables (number of sides) and (length of side). That is, we are still working with the polygon concept where the number of sides variable is large enough to create the illusion of a circle.
   But the goal is to create a Scratch Circle (center, radius) script. The question now is, can we replace the (number of sides) and (length of side) sliders with a single, radius slider?

   To answer the question, let's revisit the math.

   We argued that the perimeter of a regular polygon P is equal to the (number of sides) multiplied by the (length of each side). We agreed that for a large number of sides, the regular polygon cannot be distinguished from a circle. In equation form,

P = 2πr
(length of side)(number of sides) = 2πr.
    We solved this expression algebraically for the radius r, to express the relationship as

radius = r =(length of side)(number of sides)/2π

   The G-poly script for drawing the regular polygon is working well, so let's keep it. At the screen resolution available on most computers, a regular polygon with sixty sides is very close to a true circle. 
   So, to get rid of the (number of sides) slider, let's set the (number of sides) to 60. We can now delete the (number of sides) variable and replace its every occurrence in the script with the number 60 because a polygon with 60 sides is indistinguishable from a circle.
   Since we’ve set the (number of sides) to 60 we can now express the (length of side) variable in terms of the radius. Here comes more algebraic thinking in the form of symbol manipulation.  The equations are,
60(length of side) = 2πr.
(length of side) = 2πr/60
   The (length of side) variable is now expressed in terms of r, the radius. Create a new variable named radius, make it a slider, and then use the radius value set by the slider in the (length of side) variable. Now, when the desired radius is set, the (length of side) variable is adjusted so that it draws the 60-sided polygon with the desired radius with the ant sprite stopping at the point it started from to close the polygon.
   The Scratch script shown on the next page has made these adjustments to the code at the top of page one of this post.
   Here is a cleaner version of the code.
   Success! Below is a Scratch circle centered at (0, 0) with a radius of 100 units created by the above script.
   There's one short hop to the Scratch program, Circle (center, radius, arc) that draws  the arc of a circle, from 1º to 360º when given the center and radius. That's the topic for the last post in this series.
   A free version of this post as a pdf file is available on request by emailing grandadscience@gmail.com

Thursday, July 9, 2015

How to Program a Circle in Scratch - Part 3


   Scratch does not have a block that will draw a circle or arc of a circle if given the center (x, y) and the radius. The problem is not a small problem so we will do what problem-solvers often do and that is to break the problem into a series of smaller problems.

   To begin, you should have written a generalized polygon script that generates any regular polygon with n sides of side length m. If you haven’t completed this step, go back and read the How to Program a Circle in Scratch – Part 2 post at http://www.scratch-blog.com/2015/07/how-to-program-circle-in-scratch-part-2.html. At the conclusion of  of this post you had written and tested a general polygon script called G-poly.sb2.

   When playing with G-poly it's hard to miss the fact that as the number of sides increases, the polygon approaches the shape of a circle.  We will make use of this fact in our effort to write a script that draws a circle or arc of a given radius but first, it will help to review a few basic properties of regular polygons.

    From the list of polygon properties you will notice that the center of a regular polygon is defined as the common center of the inscribed and circumscribed circle. The radius of a regular polygon is also defined. It’s the line joining any vertex with the center. Note that every vertex of any regular polygon lies on the circumscribed circle.
   An important property of G-poly is that it doesn’t draw over any previously drawn sides. In other words, no matter what settings appear in the slider windows, the algorithm always closes the polygon and stops at the point it started!
   Consider the case where G-poly has drawn a regular pentagon and the ant sprite has returned to its starting point as shown in the following figure. To get to the center of the polygon, the ant sprite first has to turn through the angle indicated by x and move along the radius drawn in red.

   Angle x is found by applying the properties of a regular polygon. In a regular polygon, the central angle is found by dividing 360º by the number of sides, n. Since all radii of the same regular polygon are equal, the triangle formed by the central angle and the enclosed side is isosceles. The base angles (x) of an isosceles triangle are equal. The angle sum of a triangle equals 360º. Solve for x.
   We now know the turn angle, x, that directs the sprite towards the center of the regular polygon. The next step is to find the length of the radius.
   The number of sides of a regular polygon do not have to be large for the screen resolution to hide the fact that the shape drawn to the screen is an n-sided polygon and not a circle. From this point on, assume the number of sides given as input to G-poly is large enough to make the G-poly polygon indistinguishable from a circle.
   In respect to a regular polygon with a large number of sides, a mathematician would say, “As the number of sides n approaches and the length of each side m approaches 0, the perimeter P of the polygon approaches C, where C is the circumference of a circle.”      If the screen resolution makes a polygon with a relatively small number of sides look like a circle, then the perimeter P of the polygon can be substituted for C, the circumference of the circumscribed circle. In fact, from here on in this discussion, 'circle' means a regular polygon indistinguishable from a true circle.

   To get G-poly to the center of the polygon, we can take advantage of the fact that for all practical purposes, the perimeter of the polygon closely approximates the circumference of the circumscribed circle!
Circumference ≈ Perimeter
   The circumference of a circle is equal to 2πr where r is the radius. Therefore, we can set the perimeter of the polygon to also equal 2πr.
 P = 2πr
   The perimeter of a regular polygon is the product of the length of a side and the number of sides.
   Now we express this relationship algebraically by expressing the relationship in terms of the radius.
radius = (length of side)(number of sides)/2π
   The radius can therefore be implemented in Scratch by using this block.

   Now that we’ve done the math, the algorithm becomes clear. Use G-poly to draw the polygon as shown in the graphic. With the ant sprite back at its starting point the sprite turns right xº, and moves the length of the radius to the center. Let’s name this script G-poly FTC for G-poly Finds the Center.

   Here is a screen shot of a 40-sided polygon with a side length of 24 units drawn by G-polyFTC. The ant sprite then moves to the center.

Monday, July 6, 2015

How to Program a Circle in Scratch – Part 2



I’ve taken a cue from Dr. Papert (the inventor of Logo, the grandfather of Scratch) and decided that geometry provides the best context, at least in the beginning, for learning the rudiments of Scratch. Everyone is friendly with triangles and squares.
   You have most likely created a Scratch algorithm (see A) that drew a square with a side length of 100 steps. Scratch could draw the square anywhere on the screen but only that particular square.
   In a later script (see B), you created a variable named length of side and took a step towards generalizing your square script so that it would draw a square of any size as set by the minimum and maximum values in a slider. But still, it could only draw a square.  
   A square is a quadrilateral but it’s also a polygon. But so is a triangle a polygon. Let’s extend what you’ve learned and create a Scratch script that draws any regular polygon. This script will require that both the number of sides in the polygon and the length of each side be controlled by variables. We will call this script G-poly.
The Generalized Polygon Algorithm (G-poly)
   When you first drew a square in Scratch you didn’t have to think about interior and exterior angles (see A) because in a square, they are both equal to 90º. 
   Perhaps your first attempt to draw an equilateral triangle produced the path seen in graphic B.  Your experience with polygons had always focused on the interior angles of the polygon. Therefore, it was natural to think that your program to draw an equilateral triangle would require a turn angle of 60º when in fact it requires a turn angle of 120º, the measure of the exterior angle.  
   Knowing the relationship between the interior and exterior angle when drawing a square and a triangle is the first step towards building G-poly, the code that will generate a closed polygon with any number of sides and side length. For example, our generalized polygon (G-poly) program will draw a closed polygon with 17 sides, each side with a length of 30 units. Or a polygon with 41 sides and a side length of 10 units.
   But first, let's step away from the computer and use paper and pencil and our knowledge of mathematics to collect data that will help identify the needed relationships. Knowing that the sprite turns through the exterior angle to draw a regular polygon, take time to complete the following table.
 
   In the Scratch code to draw a square of a variable size, (length of side) is the variable that controls the size of the square. You could make the (length of side) variable into a slider and set the slider to the value you wanted or you could ask for input directly from the keyboard. Either way, the Scratch script works fine.
   The (length of side) variable was easy to identify but what about the (turn right) variable? This is where the data from the above table becomes helpful. For a square, the turn angle is 90º. Note that column A x B is always 360º. This is because the product of the Number of Sides column and the Measure of One Exterior Angle column is always 360º. This guarantees that the regular polygon will close, that is, the ant will end at the point it started.
   The [turn right___degrees] block needs to know the external angle to turn through. From the data in the table, the relationship between column A x B and the Number of Sides column is
   Once you have defined the length of side variable (click on the data tab) you can drop it into the [move _____] block. Get a green divide operator and type 360 in the top white space, drop a (number of sides) variable in the bottom white space, and set the operator in the [turn _______] block as shown below.
   Drop a (number of sides)variable in the [repeat _______] block.
   Since the move and turn blocks work together. set them inside the repeat block.

   This repeat[(number of sides)] block is the working part of the code, the code that draws the generalized regular polygon.
   Now that the heavy thinking has been done its time to go to the computer and put the pieces together. It’s a good idea to clear the screen every time the script is run to keep the screen from filling up with distractions. It’s also a good idea to start the sprite (ant) at the same location every time the script is run. I call this step housecleaning because its purpose is to keep the screen tidy.
   Here’s where you can pick the pen color and the pen size to suit your artistic tastes. The pen up and pen down blocks are in the correct logical places although it doesn’t make any practical difference the order in which you place the [pen down] block, the [set pen color to ____] block, or the [set pen size to ____] block.
   The algorithm is complete once the above set of blocks is attached to the bottom of the code that takes care of clearing the screen, setting the sprite’s position, and setting the pen’s color and size.
   Go to your Scratch offline editor or login to the browser and build the code as shown above. You may think it’s correct but until you actually test it, you won't know for sure so click on the green flag and test it by drawing several different polygons. 
   If you would like to use the top view of an ant sprite moving on a bed of sand then request the Scratch file G-poly (start).sb2 at grandadscience@gmail.con. Note that the file already has the variables (length of side) and (number of sides) defined. The min and max for each of the variables has been set so that the ant cannot hit any one of the four sides. A sprite is well behaved as long as it's moving within the boundaries of the screen. If it hits an edge of the screen, it can move in ways not predicted or controlled by your algorithm.
   A pdf version of this post can also be had by emailing a request to grandadscience@gmail.com.
  In the next post we will modify G-poly so that it can find the center of any regular polygon. This is the next step in developing the code that will draw a circle or arc of a circle from a given point with a given radius.