instagram

This lesson removes earlier scaffolding from working with Reactors, having students brainstorm an original animation of their own and implement it from start-to-finish. This requires them to plan out what kind of data structure they will need, and how it will be drawn and updated.

Product Outcomes

  • Students write the draw-state function for a reactor using a single number

  • Students write the draw-state function for a reactor using a state containing two numbers

Materials

🔗Drawing with a Single Number 30 minutes

Overview

Students practice writing a simple function to draw the state of a Reactor, when that state consists of only a single number.

Launch

The majority of reactive programs you’ll write in this course will use data structures consisting of multiple pieces of data, whether that be Numbers, Strings, Images, or Booleans. However, it’s not required to have a full data structure in order to use a reactor. In fact, we can create an animation based on just a single number!

Open the Single-Number State Starter File file and take a look at the code. Can you guess what this code will do?

# next-state-tick :: Number -> Number
fun next-state-tick(n):
  n + 1
end

# draw-state :: Number -> Image
fun draw-state(n):
  "fix me!"
end
 
r = reactor:
  init: 1,
  # to-draw: draw-state,
  on-tick: next-state-tick
end

r.interact()

Notice how there is no data block in this file. Both the next-state-tick and the draw-state function consume a single number, so the initial value given to the reactor is just a number (in this case, 1.)

  • Click "Run". What do you see?

    • Just a single number, increasing in increments of 1

  • Why is the number increasing by 1?

    • That’s what next-state-tick does

  • Why don’t we see any picture, or even the "fix me" from draw-state?

    • The reactor has the to-draw handler commented out.

  • What do you think would happen if we had a reactor hooked up to a complete draw-state function, but a next-state-tick function that never updated the state?

    • We’d see an image, but it would never change because the state doesn’t change.

Reinforce the fact that, although the draw-state and next-state-tick functions work together within a reactor to produce an animation, each function can work without the other. In this example, next-state-tick will update the state even without a function to draw the state.

There are much more interesting things we can display using a number as the state of the reactor, however!

Investigate

  • Change the draw-state function so that it consumes a Number and produces an image. You get to decide what the image is, as long as it uses that number in some way.

  • Un-comment the to-draw: draw-state line in the reactor to see an animation when the program runs!

Some ideas, to get you started:

  • Draw a star of size n, so that it gets larger on each tick

  • Display n as an image using the text function

Have students share back the draw-state functions they wrote.

🔗Drawing with Two Numbers 30 minutes

Overview

This activity turns up the cognitive load: students practice writing a function to draw the state of a Reactor, when that state consists of a structure containing two numbers.

Launch

You’ve practiced writing a draw-state function using a single number as a state, now let’s look at something a bit more familiar.

Open the Two-Number State Starter File and take a look at the code.

data AnimationState:
  | state(
      a :: Number,
      b :: Number)
end

START = state(1, 100)

# next-state-tick :: AnimationState -> AnimationState
fun next-state-tick(s):
  state(s.a + 1, s.b - 1)
end
 
# draw-state :: AnimationState -> Image
fun draw-state(s):
  "fix me!"
end

r = reactor:
  init: START,
# to-draw: draw-state,
  on-tick: next-state-tick
end

r.interact()

This code includes a data structure (called AnimationState) containing two numbers as its fields, a and b. As before, the draw-state function is incomplete, and commented out from the reactor.

Based on the next-state-tick function defined here, what do you think will happen when you hit "Run"? Discuss with your partner, then try it out!

With only the next-state-tick function, we can see the state updating, increasing the first number by 1 and decreasing the second number by 1 each tick.

Investigate

  • How could you define a draw-state function to show something interesting when the program runs?

  • Brainstorm with your partner, then change the existing, broken draw-state function to consume an AnimationState and produce an image.

  • Un-comment the to-draw: draw-state line in the reactor, to see an animation when the program runs!

Some possible ideas for this activity:

  • Display two shapes of size a and b, which get larger and smaller, respectively, as the reactor runs.

  • Make a and b the (x, y) coordinates of an image, moving down and to the right across a background as the reactor runs.

Synthesize

Share back what you brainstormed, and then share the completed draw-state functions you wrote and the animations you created!

These materials were developed partly through support of the National Science Foundation, (awards 1042210, 1535276, 1648684, 1738598, 2031479, and 1501927). CCbadge Bootstrap by the Bootstrap Community is licensed under a Creative Commons 4.0 Unported License. This license does not grant permission to run training or professional development. Offering training or professional development with materials substantially derived from Bootstrap must be approved in writing by a Bootstrap Director. Permissions beyond the scope of this license, such as to run training, may be available by contacting contact@BootstrapWorld.org.

Lessons

    Aligns to: