Your own Drawing Functions

Agenda

• 30 mindraw-state for a Single Number

• 30 mindraw-state for Two Numbers

English

add translation

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

Standards and Evidence Statements:

Standards with prefix BS are specific to Bootstrap; others are from the Common Core. Mouse over each standard to see its corresponding evidence statements. Our Standards Document shows which units cover each standard.

• BS-DR.4: The student can solve word problems that involve data structures

• BS-IDE: The student is familiar with using a REPL, entering expressions properly, and interpreting error messages

• BS-M: The student models a problem in context and determines the data needed to describe the problem

• BS-PL.1: The student is familiar with declaring values and applying built-in functions using the programming language

• BS-PL.4: The student is familiar with the syntax for conditionals

• BS-R: The student is able to write interactive programs using the ’Reactor’ construct

Length: 60 Minutes

Materials:

Preparation:

• Make sure students have completed units 1 through 3 before starting this lesson.

• The Blank Single Number draw-state file preloaded on student machines

• The Blank 2 Number draw-state file preloaded on student machines

Types	Functions	Values
Number	+ - * / sqr sqrt expt	1 ,4 ,44.6
String	string-append string-length	"hello"
Image	rectangle circle triangle ellipse star scale rotate put-image	(circle 25 "solid" "red")

draw-state for a Single Number

Overview

Students explore the different animations they can create using a single number

Learning Objectives

Evidence Statementes

Product Outcomes

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

Materials

Preparation

• 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 Number (Time 30 minutes)

• 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?

   include image include reactors # next-state-tick :: Number -> Number fun next-state-tick(n): n + 1 end # draw-state :: Number -> Image fun draw-state(n): "fix me!" end num-react = reactor: init: 1, # to-draw: draw-state, on-tick: next-state-tick end interact(num-react)

• 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.

draw-state for Two Numbers

Overview

Students explore the different animations they can create using a state consisting of two numbers

Learning Objectives

Evidence Statementes

Product Outcomes

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

Materials

Preparation

• Make sure students have completed units 1 through 3 before starting this lesson.

• The Blank 2 Number draw-state file preloaded on student machines

draw-state for Two Numbers (Time 30 minutes)

• draw-state for Two NumbersYou’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 Blank 2 Number draw-state file and take a look at the code.

•  include image include reactors 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 state-react = reactor: init: START, # to-draw: draw-state, on-tick: next-state-tick end interact(state-react) 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.

  How could you define a draw-state function to show something interesting when the program runs? Branstorm with your partner, then change the existing, broken draw-state function to consume an AnimationState and produce an image. Then, comment out 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 coordinates of an image, moving down and to the right across a background as the reactor runs.

  Have students share back what they brainstormed before beginning, then share the completed draw-state functions they wrote, and the animations they created!

Bootstrap:Reactive by Emma Youndtsmith, Emmanuel Schanzer, Kathi Fisler, Shriram Krishnamurthi, and Joe Politz is licensed under a Creative Commons 4.0 Unported License. Based on a work at www.BootstrapWorld.org. Permissions beyond the scope of this license may be available by contacting schanzer@BootstrapWorld.org.