Students explore the different animations they can create using a single number
Students write the draw-state function for a reactor using a single number
Make sure students have completed units 1 through 3 before starting this lesson.
The Blank Single Number draw-state file preloaded on student machines
draw-state for a Single NumberThe 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 Blank Single Number draw-state file and take a look at the code. Before hitting ’Run’, can you guess what this code will do?
- Notice how there is no data block in this file. Both the next-state-tick and the draw-state function consume a single number, and the initial value given to the reactor is also a single number (in this case, 1.)
Click ’Run’. What do you see?
- Accordingto the next-state-tick function, on every clock tick the state (a single number) will increase by one, which is exactly what happens. Since we didn’t tell the reactor how to draw the state (the to-draw part of the reactor is commented out), when the reactor runs we see the state of the reactor (a single number) increasing, instead of an animation.
What do you think would happen if we had a reactor with a complete draw-state function, but a next-state-tick function that never updated the state? (Consuming and producing the same value.)
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!
Change the draw-state function so that it consumes a Number and produces an image. Then, uncomment the to-draw: draw-state line in the reactor to see an animation when the program runs!
Encourage students to brainstorm and share ideas for the draw-state function before beginning. Some possible options include:
Drawing 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.