# Understanding Answer Key From Curriculum: Lesson 4.1 Playing with Shapes • ### 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:

GraphicsWindow.Hide()

gw = 620

gh = 450

endtime = Clock.ElapsedMilliseconds

starttime = 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

GetShapeXY()

ElseIf x < px + 200 And y < py + 100 Then

sh = petal1

bsh = petals

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

GetShapeXY()

ElseIf x < px + 200 And y < py + 300 then

sh = petal3

bsh = petals

GetShapeXY()

ElseIf x < px+90 And y < py + 400 Then

sh = petal4

bsh = petals

GetShapeXY()

ElseIf x < px + 200 And y < py + 400 Then

sh = leaf2

bsh = leafs

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"

Shapes.Move(stick, 174, 238)

GraphicsWindow.BrushColor = "Pink"

Shapes.Move( petals, 93, 115)

Shapes.Rotate( petals, 15)

Shapes.Move(petals, 148, 81)

Shapes.Rotate(petals, 105)

Shapes.Move( petals, 185, 135 )

Shapes.Rotate( petals, 200 )

Shapes.Move( petals, 135, 175)

Shapes.Rotate( petals, 90)

GraphicsWindow.BrushColor = "Yellow"

Shapes.Move(circ, 162, 140)

GraphicsWindow.BrushColor = "Green"

For i = 1 To 2

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"

Shapes.Move(leaf1, px + 20, py + 40)

Shapes.Move(leaf2, px + 115, py + 340)

GraphicsWindow.BrushColor = "Pink"

Shapes.Move(petal1, px + 105, py + 30)

Shapes.Rotate(petal1, 15)

Shapes.Move(petal2, px + 20, py + 230)

Shapes.Rotate(petal2, 105)

Shapes.Move(petal3, px + 105, py + 230)

Shapes.Rotate(petal3, 200)

Shapes.Move(petal4, px + 20, py + 330)

Shapes.Rotate(petal4, 90)

GraphicsWindow.BrushColor = "Brown"

Shapes.Move(stik, px + 40, py + 130)

GraphicsWindow.BrushColor = "Yellow"

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"

Controls.SetSize(Submitbtn, 70, 35)

end = Clock.ElapsedMilliseconds

start = 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

• 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 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 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 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 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 Friday, August 1, 2014 9:05 PM
Friday, August 1, 2014 9:02 PM