running sunset-react

[Reetu Singh]

Hello,

my students and I are working on completing the sunset animation (UNIT 3 - Boot strap reactive)

we have typed in the reactor, but are getting an error

"the left side was not an object" referring to the line in the draw-state function highlighted below

fun draw-state(a-sunsetState):

  put-image(ground, 300, 0, (put-image(sun, a-sunsetState.xpos, a-sunsetState.ypos, sky)))

end

we couldn't figure out what this meant or how to debug it.

Thank you in advance for your help!

[Joe Gibbs Politz]

Thanks for reaching out!

Could you share the code you wrote for creating the reactor?

You can paste it here directly or use the "Publish..." option on the
top menu to share a link with us.

> --
> You received this message because you are subscribed to the Google Groups "Bootstrap-Teachers"
> group.
> To unsubscribe from this group and stop receiving emails from it, send an email to bootstrap-disc...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
>

[Reetu Singh]

Below is a copy of the code:

include image

include reactors

sun = circle(40, "solid", "yellow")

sky = rectangle(600, 460, "solid", "light-blue")

ground = rectangle(600, 200, "solid", "brown")

background = put-image(sun, 150, 300, put-image(ground, 300, 0, sky))

#a sunset State is position of the sun given an x coordinate and y coordinate

data sunsetState:

  |sunset(

      xpos:: Number,

      ypos:: Number)

end

#draw-state:: sunsetState -> Image

#the sun will appear where the sunsetState is and sun will be behind the horizon

fun draw-state(a-sunsetState):

  put-image(ground, 300, 0, (put-image(sun, a-sunsetState.xpos, a-sunsetState.ypos, sky)))

end

#next-state-tick::sunsetState->sunsetState

#x-coordinate changes by 8 larger, y-coordinate changes by 4 smaller

examples:

next-state-tick(sunset(300, 20))

    is sunset(300 + 50, 20 - 10)

next-state-tick(sunset(400, 15))

    is sunset(400 + 50, 15 - 10)

end

fun next-state-tick(a-sunsetState):

  draw-state(sunset(a-sunsetState.xpos + 50, a-sunsetState.ypos - 10))

end            

sunset-react=reactor:

  init: sunset(10, 300),

  on-tick: next-state-tick,

  to-draw: draw-state

end

--

Reetu Singh

Join the battle for fighting blood cancers http://pages.teamintraining.org/nyc/halfnyc14/rsingh926

[Matthew Dunn]

I am just getting started with the Boostrap Reactive. I did copy and pasted the code into Pyret and pressed run. Results 0 out of 2 Tested failed. Is there additional code necessary to get the solution to work. Do program solutions exist for each unit and other exercises.

Matt

Matthew Dunn,  MBA,  MA

Business & Technology Instructor

Interboro High School 

---

From: bootstra...@googlegroups.com <bootstra...@googlegroups.com> on behalf of Reetu Singh <rsin...@gmail.com>
Sent: Tuesday, January 15, 2019 11:30 AM
To: Joe Gibbs Politz
Cc: bootstra...@googlegroups.com
Subject: Re: running sunset-react

 

[Joe Gibbs Politz]

Thanks for sharing the code! This is a terrific question. Great job
writing contracts and examples, which make understanding the issue in
the code here much more straightforward.

Note that the 0 out of 2 tests passed is telling us something
important about the behavior of the next-state-tick method as
implemented (screenshot attached for one of the test failures).

That message is saying that the *expected* value for the result of

next-state-tick(sunset(300, 20))

is

sunset(300 + 50, 20 - 10)

I totally agree with this – it also matches the contract for
next-state-tick, which consumes a sunsetState and produces a
sunsetState. (I will note that it doesn't quite match the purpose
statement, which says the x coordinate should grow by 8 and the y
coordinate should shrink by 4.)

However, the result *produced* from calling next-state-tick is not a
sunset value, but rather an Image.

This should draw our attention to the body of the next-state-tick
function definition, which isn't producing the kind of value we said
we wanted in the contract and the example.

The step in the Design Recipe where we create the function body tells
us that we should take our examples, find what changed, and build the
function body by replacing the parts that change with information from
the function's parameters.

In this case, it looks like this was done, but then an *extra*
function call to draw-state was added in next-state-tick. Adding this
Image creation step makes the result of next-state-tick not match the
contract and examples we decided on, which is where the test failures
is coming from.

Based on this, how should next-state-tick change to match its examples
and contract?



It's important that the contract for next-state-tick is sunsetState ->
sunsetState, because the on-tick handler of the reactor is expected to
consume and produce a value of the same type. The error when running
the *reactor* happens because on the first tick, the next-state-tick
function produces an Image, which becomes the reactor's state. This
Image is then used as the argument to draw-state, which is expecting a
sunsetState, not an Image, causing the field-not-found error (Images
don't have an xpos field, sunsetStates do).



There are a few lessons here:

- The test failures tell use useful information that can pinpoint the
error based on examples – here the error when running the reactor
appeared to blame draw-state, but the problem is in next-state-tick
- When we get a test failure about mismatched values, we should
consult the contract and examples for the function that didn't pass
the tests to see where we made a mistake


Let us know if you have more questions!



On January 15, 2019 at 9:38:08 AM, Matthew Dunn

(matthe...@interborosd.org) wrote:
>
>
> I am just getting started with the Boostrap Reactive. I did copy and pasted the code into
> Pyret and pressed run. Results 0 out of 2 Tested failed. Is there additional code necessary
> to get the solution to work. Do program solutions exist for each unit and other exercises.
>
>
> Matt
>
>
> Matthew Dunn, MBA, MA
> Business & Technology Instructor
> Interboro High School
> ________________________________
> From: bootstra...@googlegroups.com

> on behalf of Reetu Singh

[Schanzer (Director)]

Hi Matt - you can make a reactor run by typing interact(<reactor name>). In this case, the name of the reactor is sunset-react.

(You can find this in Unit 3, in the section on animations, just below Step 4.)

[Reetu Singh]

Hello! 

Thank you for the feedback.  I made the needed changes to my examples so that the examples pass.

Now, when I type interact(sunset-react), I'm getting the same error but in the draw-state function copied below:

#draw-state:: sunsetState -> Image

#the sun will appear where the sunsetState is and sun will be behind the horizon

fun draw-state(a-sunsetState):

  put-image(ground, 300, 0, (put-image(sun, a-sunsetState.xpos, a-sunsetState.ypos, sky)))

end

the error says "the left side is not an object" and highlights a-sunsetState.xpos

I don't know what this is referring to.  Do I need to show examples for draw-state?

Thank you again!

On Tue, Jan 15, 2019 at 4:54 PM Schanzer (Director) <scha...@bootstrapworld.org> wrote:

Hi Matt - you can make a reactor run by typing interact(<reactor name>). In this case, the name of the reactor is sunset-react.

(You can find this in Unit 3, in the section on animations, just below Step 4.)

--

You received this message because you are subscribed to the Google Groups "Bootstrap-Teachers" group.
To unsubscribe from this group and stop receiving emails from it, send an email to bootstrap-disc...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Joe Gibbs Politz]

Thanks for following up!

Are you sure the *examples* were what needed to change? When I did my
analysis, I thought the examples you had originally were great, but
the body of next-state-tick was the problem.

Changing the examples shouldn't have any effect on what happens when
the reactor is run, which uses the function definition do the work of
updating the state on each tick.

On January 16, 2019 at 7:49:53 AM, Reetu Singh (rsin...@gmail.com) wrote:
> Hello!
> Thank you for the feedback. I made the needed changes to my examples so
> that the examples pass.
> Now, when I type interact(sunset-react), I'm getting the same error but in
> the draw-state function copied below:
>
> #draw-state:: sunsetState -> Image
> #the sun will appear where the sunsetState is and sun will be behind the
> horizon
>
> fun draw-state(a-sunsetState):
> put-image(ground, 300, 0, (put-image(sun, a-sunsetState.xpos,
> a-sunsetState.ypos, sky)))
> end
>
> the error says "the left side is not an object" and highlights
> a-sunsetState.xpos
>
> I don't know what this is referring to. Do I need to show examples for
> draw-state?
>
> Thank you again!
>
> On Tue, Jan 15, 2019 at 4:54 PM Schanzer (Director) <
> scha...@bootstrapworld.org> wrote:
>

> > Hi Matt - you can make a reactor run by typing interact(**).

[Reetu Singh]

Thanks for the reply.

I'm copying my whole sunset code below.  When I hit run, it's highlighting a-sunsetState.xpos in my draw-state function

I don't understand the error message "the left side is not an object".  Can you further explain what this means?  

include image

include reactors

sun = circle(40, "solid", "yellow")

sky = rectangle(600, 460, "solid", "light-blue")

ground = rectangle(600, 200, "solid", "brown")

background = put-image(sun, 150, 300, put-image(ground, 300, 0, sky))

#a sunset State is position of the sun given an x coordinate and y coordinate

data sunsetState:

  |sunset(

      xpos:: Number,

      ypos:: Number)

end

#draw-state:: sunsetState -> Image

#the sun will appear where the sunsetState is and sun will be behind the horizon

examples:

  draw-state(sunset(300, 200))

    is put-image(ground, 300, 0, (put-image(sun, 300, 200, sky)))

  draw-state(sunset(150, 250))

    is put-image(ground, 300, 0, (put-image(sun, 150, 250, sky)))

end

fun draw-state(a-sunsetState):

  put-image(ground, 300, 0, (put-image(sun, a-sunsetState.xpos, a-sunsetState.ypos, sky)))

end

#next-state-tick::sunsetState->sunsetState

#x-coordinate changes by 50 larger, y-coordinate changes by 10 smaller

examples:

next-state-tick(sunset(300, 20))

    is draw-state(sunset(300 + 50, 20 - 10))

next-state-tick(sunset(400, 15))

    is draw-state(sunset(400 + 50, 15 - 10))

end

fun next-state-tick(a-sunsetState):

  draw-state(sunset(a-sunsetState.xpos + 50, a-sunsetState.ypos - 10))

end            

sunset-react=reactor:

  init: sunset(10, 300),

  on-tick: next-state-tick,

  to-draw: draw-state

end

Thank you so much for all the help!

[Schanzer (Director)]

Hi Reetu,

a-sunsetState.xpos is divided into a "left side" and "right side" by the dot. In human language, it means "a-sunsetState is an object, and we need to look inside of it to grab the xpos value." The error you're getting is telling you that a-sunsetState (the "lefthand side") is not an object, and therefore it can't look up the value of xpos.

But if it's not an object, what is it? I'll give you a hint: it's an image.

Now you might be asking, "how the heck is draw-state being called with an image??" If so, that's the right question to ask, and it means you're now on the right track. Look back at Joe's latest reply: are you sure the examples for next-state-tick needed to change before? (Here's another hint: there is no bug whatsoever in your draw-state function.)

One more thing: rather than copying and pasting your code, check out Joe's initial reply. You can instead click "publish", and paste a link to your actual program. Not only does it prevent pages and pages of text, but it also prevents any copy/paste errors.

[Reetu Singh]

We got it!

Thank you for your prompts and not just giving the answer :)

students are interested in how can we change the background color each frame as the sun is setting?

I believe we have to add a sky-color data structure to sunsetState...

and that's about the extent that I know.  

My students have such creative ideas!

Thank you again

On Thu, Jan 17, 2019 at 9:09 AM Schanzer (Director) <scha...@bootstrapworld.org> wrote:

Hi Reetu,

a-sunsetState.xpos is divided into a "left side" and "right side" by the dot. In human language, it means "a-sunsetState is an object, and we need to look inside of it to grab the xpos value." The error you're getting is telling you that a-sunsetState (the "lefthand side") is not an object, and therefore it can't look up the value of xpos.

But if it's not an object, what is it? I'll give you a hint: it's an image.

Now you might be asking, "how the heck is draw-state being called with an image??" If so, that's the right question to ask, and it means you're now on the right track. Look back at Joe's latest reply: are you sure the examples for next-state-tick needed to change before? (Here's another hint: there is no bug whatsoever in your draw-state function.)

--

You received this message because you are subscribed to the Google Groups "Bootstrap-Teachers" group.
To unsubscribe from this group and stop receiving emails from it, send an email to bootstrap-disc...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Schanzer (Director)]

Wonderful to hear!!

And yes, your intuition for changing the background image is exactly right. *grin*