locked
Understanding Answer Key From Curriculum: Lesson 4.1 Playing with Shapes RRS feed

  • Question

  • Hello, I am currently reading (and experimenting) the sample code in lesson 4.1 of the curriculum. I attempted the "Show What You Know" and made little success so I decided to study the answer key. It was very insightful and I learned some new programming techniques. However, there are two lines of code that I can't seem to decipher. I marked the two lines of code in the program below.Could someone please explain how those lines work in the program?  Any help would be much appreciated. 

    Solution:
    
    ' Copyright (c) Microsoft Corporation.  All rights reserved.
    
    GraphicsWindow.Hide()
    
    gw = 620
    
    gh = 450
    
    endtime = Clock.ElapsedMilliseconds
    
    starttime = Clock.ElapsedMilliseconds
    
    blinktime = Clock.ElapsedMilliseconds
    
    gamestarttime = Clock.ElapsedMilliseconds
    
    GraphicsWindow.CanResize = "False"
    
    GraphicsWindow.Width = gw
    
    GraphicsWindow.Height = gh
    
    GraphicsWindow.Top = ( Desktop.Height - gh ) / 2
    
    GraphicsWindow.Left = ( Desktop.Width - gw ) / 2
    
    GraphicsWindow.Title = "Flower"
    
    GraphicsWindow.BrushColor ="Pink"
    
    GraphicsWindow.Show()
    
    CreateUI()
    
    GraphicsWindow.MouseDown = MouseAction
    
    Controls.ButtonClicked = OnclickButton
    
    starttimer()
    
    Sub MouseAction     
    
      x = GraphicsWindow.MouseX
    
      y = GraphicsWindow.MouseY
    
      GraphicsWindow.MouseMove = MouseMove
    
      If x > px And x < px + 180 And y > py And y < py + 400 Then    
    
        GraphicsWindow.MouseUp = onMouseUpEvent
    
        If x < px + 90 and y < py + 100 Then          
    
          sh = leaf1   
    
          bsh = leafs[1]
    
          GetShapeXY()
    
        ElseIf x < px + 200 And y < py + 100 Then   
    
          sh = petal1
    
          bsh = petals[1]
    
          GetShapeXY()                                                            
    
        ElseIf x < px + 90 and y < py + 200 Then
    
          sh = stik
    
          bsh = stick
    
          GetShapeXY()       
    
        ElseIf x < px + 200 And y < py + 200 Then 
    
          sh = circle 
    
          bsh = circ
    
          GetShapeXY()               
    
        ElseIf x < px + 90 And y < py + 300 Then
    
          sh = petal2
    
          bsh = petals[2]
    
          GetShapeXY()               
    
        ElseIf x < px + 200 And y < py + 300 then
    
          sh = petal3 
    
          bsh = petals[3]
    
          GetShapeXY()             
    
        ElseIf x < px+90 And y < py + 400 Then
    
          sh = petal4 
    
          bsh = petals[4]
    
          GetShapeXY()       
    
        ElseIf x < px + 200 And y < py + 400 Then
    
          sh = leaf2
    
          bsh = leafs[2]
    
          GetShapeXY()       
    
        EndIf 
    
      EndIf
    
    EndSub
    
    Sub GetShapeXY  
    
      shx = shapes.GetLeft(sh)
    
      shy = shapes.GetTop(sh)
    
    EndSub
    
    Sub CreateUI    
    
      GraphicsWindow.DrawRectangle(10, 10, 380, 420)
    
      GraphicsWindow.DrawRectangle(410, 10, 200, 420)       
    
      GraphicsWindow.BrushColor = "Brown"   
    
      stick = Shapes.AddRectangle(5, 180) 
    
      Shapes.Move(stick, 174, 238)     
    
      GraphicsWindow.BrushColor = "Pink"
    
      petals[1] = Shapes.AddEllipse(70, 55) 
    
      Shapes.Move( petals[1], 93, 115)
    
      Shapes.Rotate( petals[1], 15)
    
      petals[2] = Shapes.AddEllipse(70, 55) 
    
      Shapes.Move(petals[2], 148, 81)
    
      Shapes.Rotate(petals[2], 105) 
    
      petals[3] = Shapes.AddEllipse(75, 55)
    
      Shapes.Move( petals[3], 185, 135 )
    
      Shapes.Rotate( petals[3], 200 )
    
      petals[4] = Shapes.AddEllipse(75, 55) 
    
      Shapes.Move( petals[4], 135, 175)
    
      Shapes.Rotate( petals[4], 90) 
    
      GraphicsWindow.BrushColor = "Yellow"
    
      circ = Shapes.AddEllipse(25, 25) 
    
      Shapes.Move(circ, 162, 140)
    
      GraphicsWindow.BrushColor = "Green"
    
      For i = 1 To 2
    
        leafs[i] = Shapes.AddEllipse(50, 25) 
    
        Shapes.Move(leafs[i], 223 -(i * 48), 258)
    
        Shapes.Rotate(leafs[i], 180 * i) 
    
      EndFor
    
      Hide() 
    
      px = 420
    
      py = 20
    
      pw = 90
    
      ph = 100
    
      GraphicsWindow.DrawRectangle(px, py, 180, 200)
    
      GraphicsWindow.DrawRectangle(px, 220, 180, 200)
    
      GraphicsWindow.DrawRectangle(px, py, pw, ph)
    
      GraphicsWindow.DrawRectangle(px + 90, py, pw, ph)
    
      GraphicsWindow.DrawRectangle(px, py + 100, pw, ph) 
    
      GraphicsWindow.DrawRectangle(px + 90, py + 100, pw, ph)
    
      GraphicsWindow.DrawRectangle(px, py + 200, pw, ph)
    
      GraphicsWindow.DrawRectangle(px + 90, py + 200, pw, ph)
    
      GraphicsWindow.DrawRectangle(px, py + 300, pw, ph)
    
      GraphicsWindow.DrawRectangle(px + 90, py + 300, pw, ph)
    
      GraphicsWindow.BrushColor = "Green"
    
      leaf1 = Shapes.AddEllipse(50, 25) 
    
      Shapes.Move(leaf1, px + 20, py + 40)
    
      leaf2 = Shapes.AddEllipse(50, 25) 
    
      Shapes.Move(leaf2, px + 115, py + 340) 
    
      GraphicsWindow.BrushColor = "Pink"
    
      petal1 = Shapes.AddEllipse(65, 50) 
    
      Shapes.Move(petal1, px + 105, py + 30)
    
      Shapes.Rotate(petal1, 15)
    
      petal2 = Shapes.AddEllipse(65, 50) 
    
      Shapes.Move(petal2, px + 20, py + 230)
    
      Shapes.Rotate(petal2, 105)
    
      petal3=Shapes.AddEllipse(65, 50) 
    
      Shapes.Move(petal3, px + 105, py + 230)
    
      Shapes.Rotate(petal3, 200) 
    
      petal4 = Shapes.AddEllipse(65, 50) 
    
      Shapes.Move(petal4, px + 20, py + 330)
    
      Shapes.Rotate(petal4, 90)
    
      GraphicsWindow.BrushColor = "Brown"
    
      stik = Shapes.AddRectangle(5, 50) 
    
      Shapes.Move(stik, px + 40, py + 130)
    
      GraphicsWindow.BrushColor = "Yellow"
    
      circle = Shapes.AddEllipse(25, 25) 
    
      Shapes.Move(circle, px + 120, py + 130)
    
    EndSub
    
    Sub Hide
    
      For i = 1 To 8
    
        Shapes.SetOpacity(petals[i], 10)  
    
      EndFor
    
      For i = 1 To 2
    
        Shapes.SetOpacity(leafs[i], 10)  
    
      EndFor
    
      Shapes.SetOpacity(circ, 10)
    
      Shapes.SetOpacity(stick, 10)
    
    EndSub
    
    Sub MouseMove 
    
      x = GraphicsWindow.MouseX
    
      y = GraphicsWindow.MouseY
    
      If Mouse.IsLeftButtonDownThen
    
        Shapes.Move(sh, x, y)     
    
      EndIf 
    
    EndSub 
    
    Sub onMouseUpEvent
    
      If bsh = stick Then
        '????????? This Line Below ??????????? HELP HERE!
        If (Shapes.GetLeft(sh) + 10) >= Shapes.GetLeft(bsh) And  (Shapes.GetLeft(sh) - 10) <= Shapes.GetLeft(bsh) Then
    
          Shapes.SetOpacity(bsh, 100)
    
          Shapes.Remove(sh)    
    
          dropped = dropped + 1            
    
        Else
    
          Shapes.Move(sh, shx, shy)       
    
        EndIf
    
      EndIf   
      '???????? This Line Below ??????? HELP HERE!
      If (Shapes.GetLeft(sh) + 10) >= Shapes.GetLeft(bsh) And  (Shapes.GetLeft(sh) - 10) <= Shapes.GetLeft(bsh) And (Shapes.GetTop(sh) + 10) >= Shapes.GetTop(bsh) And  (Shapes.GetTop(sh) - 10) <= Shapes.GetTop(bsh) Then
    
        Shapes.SetOpacity(bsh, 100)
    
        Shapes.Remove(sh)       
    
        dropped=dropped + 1         
    
      Else
    
        Shapes.Move(sh, shx, shy)   
    
      EndIf
    
    EndSub
    
    Sub starttimer
    
      GraphicsWindow.BrushColor = "Black"
    
      Submitbtn = Controls.AddButton("Submit", 300, 390)
    
      Controls.SetSize(Submitbtn, 70, 35)
    
      end = Clock.ElapsedMilliseconds
    
      start = Clock.ElapsedMilliseconds
    
      blink = Clock.ElapsedMilliseconds
    
      gamestart = Clock.ElapsedMilliseconds
    
      init = 0
    
      While init < 1
    
        game = Clock.ElapsedMilliseconds - start
    
        GraphicsWindow.BrushColor = "#3975e5"        
    
        GraphicsWindow.FontSize = 15
    
        GraphicsWindow.FillRectangle(250, 20, 120, 25)
    
        GraphicsWindow.BrushColor = "Black"
    
        tsecamt = Math.Round(game / 1000) 
    
        tsec    = Math.Remainder(tsecamt, 60)
    
        tming   = Math.Floor(tsecamt / 60)
    
        tmin    = Math.Remainder(tming, 60)
    
        thour   = Math.Floor(tming / 60)
    
        If tsec < 10 Then
    
          strSec = Text.Append(":0", tsec)
    
        Else
    
          strSec = Text.Append( ":", tsec)  
    
        EndIf 
    
        If tmin < 10 Then
    
          strMin = Text.Append( "0", tmin)
    
        Else
    
          strMin = Text.Append( "", tmin)
    
        EndIf  
    
        sec = Text.Append(strMin, strSec)
    
        GraphicsWindow.DrawText(250, 22, " Time:  " + thour + ":" + sec )         
    
        GraphicsWindow.FontSize = 10
    
        end = Clock.ElapsedMilliseconds 
    
        fps = 0                                               
    
        Program.Delay(1000)
    
      EndWhile         
    
    EndSub
    
    Sub OnclickButton
    
      If Controls.GetButtonCaption(Controls.LastClickedButton) = "Submit" Then        
    
        IF dropped = 8 Then
    
          init = 2     
    
          GraphicsWindow.ShowMessage("Congratulations! You took " + thour +":"+ tsec + " seconds to complete the flower.","Result") 
    
          Program.End()   
    
        EndIf
    
      EndIf
    
    EndSub
    

    Thursday, July 31, 2014 6:35 PM

Answers

  • They are checking for an overlap of 2 shapes.

    If the Left and Right X values for 2 shapes are:

    L1, R1 and L2, R2

    Then they overlap if:

    R1 >= L2 And L1 <= R2.

    Draw some rectangles on paper to be sure.

    The +/-10 are just to control the overlap - bsh left edge is within +/- 10 of the left edge of sh - the Y top bottom is just the same.

    • Marked as answer by Ezra94 Friday, August 1, 2014 5:26 PM
    Thursday, July 31, 2014 7:11 PM
  • Others have found this answer to the "show what you know" very hard to follow, I did.

    It's a really good build exercise but comes with a difficult to follow sample.

    Here's an alternative solution: BFM261 (needs a clock)

    I think it's the stage in the curriculum where people can start to think about taking a bit of a top down approach to building a program.

    I would start with seeing if I could add 2 shapes of similar size, drag one to the vicinity of the other and release it on top and detect if the shape was close enough to the other to make the match.

    Then build in all the details around this, bit by bit, testing each part as I go.

    • Marked as answer by Ezra94 Saturday, August 2, 2014 3:15 PM
    Friday, August 1, 2014 8:17 PM

All replies

  • They are checking for an overlap of 2 shapes.

    If the Left and Right X values for 2 shapes are:

    L1, R1 and L2, R2

    Then they overlap if:

    R1 >= L2 And L1 <= R2.

    Draw some rectangles on paper to be sure.

    The +/-10 are just to control the overlap - bsh left edge is within +/- 10 of the left edge of sh - the Y top bottom is just the same.

    • Marked as answer by Ezra94 Friday, August 1, 2014 5:26 PM
    Thursday, July 31, 2014 7:11 PM
  • Thank you litdev. I'm still a bit confused but from what I understood the first line I mentioned, located after line 'if bsh = stick then' . . . , creates a bubble like boundary around 'sh'. The -10 and +10 defines the bubble boundary of 'sh'. When 'sh' is dragged and its +/- 10 (20) pixel boundary overlaps the specified area, Shapes.GetLeft(bsh), then it initiates the specified action: increasing the opacity of 'bsh' and removing 'sh'. The line after this is similar but associates with y coordinates as well. Did I explain that correctly? 

    Thursday, July 31, 2014 9:47 PM
  • Yes that sounds right to me, its all variants (bubbles) on R1 >= L2 And L1 <= R2.
    Friday, August 1, 2014 11:40 AM
  • Others have found this answer to the "show what you know" very hard to follow, I did.

    It's a really good build exercise but comes with a difficult to follow sample.

    Here's an alternative solution: BFM261 (needs a clock)

    I think it's the stage in the curriculum where people can start to think about taking a bit of a top down approach to building a program.

    I would start with seeing if I could add 2 shapes of similar size, drag one to the vicinity of the other and release it on top and detect if the shape was close enough to the other to make the match.

    Then build in all the details around this, bit by bit, testing each part as I go.

    • Marked as answer by Ezra94 Saturday, August 2, 2014 3:15 PM
    Friday, August 1, 2014 8:17 PM
  • Thank you for the advice. That's the best programming advice there is and I work by that: just take it one piece at a time. I agree it is quite a leap compared to the other lessons in the curriculum, but I learned quite a bit from taking apart its code and evaluating it. 

    • Edited by Ezra94 Friday, August 1, 2014 9:05 PM
    Friday, August 1, 2014 9:02 PM