# Bootstrap:2

Bootstrap:Reactive Bridging to CS K-12 Looooong bridge Algebra still key

College/AP/Industry C-like syntax Programming, not hacking Bridging to CS BootstrapStudents 8000 7000

K-12 Engaged students Bootstrap:1 6000 5000

College/AP/Industry 4000 C-like syntax 3000 Programming, not hacking 2000

1000 Whats next? 0 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 Its about more than the language 1. Low Floor 1. High Ceiling High Ceiling

2. Mainstream syntax Mainstream syntax 3. Popular 2. Circles of Evaluation 3. Algebraic behavior Algebraic behavior 4. Great pedagogy Great pedagogy 1. Low ceiling New Syntax 1. High Floor

2. Weird syntax 2. Not algebraic! 3. Limited bridge to 3. Limited bridge from other languages other languages Goals for this workshop

Introduce you to Pyret Demonstrate Bootstrap:Algebra pedagogy applied to higher level computer science Build sophisticated programs Talk to other teachers Get your feedback Unit 1 Everything you learned in BS:A

code.pyret.org Bootstrap:Reactive Teacher Materials Open the Review file Introducing CPO Infix notation Image module Contracts

: # num-sqrt : Number Number # num-sqr Number

: Number # + : Number, Number Number # - : Number, Number Number

# * : Number, Number Number 8 Contracts circle(75, solid, red) rectangle(20, 30, outline, pink)

ellipse(85, 100, solid, green) text(Hello world!, 50, blue) The Design Recipe triple Number Number

n triple 6 tripl 13 e tripl e 6*3 13 * 3 n n*3

The Design Recipe gt Number gt gt 7 22 gt Image siz

e triangle(7, solid, green) triangle(22, solid, green) size triangle(size, solid, green) Images in Pyret # put-image : Image, Number, Number, Image -> Image # image-width : Image -> Number # image-height : Image -> Number

# flip-horizontal : Image -> Image # flip-vertical : Image -> Image # scale : Number, Image -> Image # rotate : Number, Image -> Image Unit 2 Number, String Image doubleradius Consumes a radius and color, produces an outlined circle of the given color whose radius is twice the given

7, purple circle( 7 * 2, outline, purple) Parachute Jumper What data type should my range be? Number? String? Image? Boolean? Introducing JumperState # jumper

: Number, Number JumperState JumperStates are just another value next-position Number, Number JumperStat

e Consumes an x and y, produce a JumperState with x + 5 and y - 5 next-position 33, x 70 jumper(33 + 5, 70 5) 8, 20

nextposition jumper(8 + 5, 20 5) y Your Bakery Flavor Number of layers Whether or not the cake is an ice cream cake

flavor :: String, layers :: Number, is-iceCream :: Boolean cake(vanilla, 4, true) cake(chocolate, 8, false) cake(vanilla, 4, true) cake(chocolate, 8, false) cake2.flavor cake2.layers cake2.isiceCream Boolea

CakeType, n CakeType Consumes two CakeTypes and asks if the number of layers in the first CakeType is greater than the second taller-than taller-thanbirthday-cake, pb-cake acake1 a-cake2 a-cake2

birthday-cake.layers > pbcake.layers wedding-cake, taller-than strawberry-cake wedding-cake.layers > strawberrycake.layers will-melt CakeType, Number Boolea n

Consumes a CakeType and temp, asks if the temp is greater than 32 degrees AND if the Cake is an ice cream cake will-melt acake cake1, 75 (75 > 32) and cake1.isiceCream will-melt cake2, 29

(29 > 32) and cake2.isiceCream tem p Unit 3 Animating a Sunset Suns x-coord Increases as sun moves across the sky Suns y-coord

Decreases as sun falls in the sky x Number y Number Sunset Sunset sunse t

the x and y-coordinate of the sun x :: Number, y :: Number TOP-LEFT sunset(10, 300) MIDDLE sunset(200, 150) BOTTOM-RIGHT sunset(275, 75)

SunsetState Draw the image of a yellow sun at its x and ycoordinates on the scene circle(25, solid, yellow) rectangle(WIDTH, HEIGHT, solid, light-blue) rectangle(WIDTH, HORIZON-HEIGHT, solid, brown) draw-state a-sunset put-image(rectangle(WIDTH, HORIZON-HEIGHT, solid, brown), 200, 50,

put-image(circle(25, solid, yellow), a-sunset.x, a-sunset.y, blue))) rectangle(WIDTH, HEIGHT, solid, light The Reactor 4 steps to an animation

Define the state to hold the information that changes across frames. Write a function to generate an image of the current state (draw-state). Write a function to generate a new state from a given state (next-state-tick). Define a reactor using an initial instance of the state and the two functions to create an animation. Acting out a Reactor

The reactor: directs the action draw-state: draws the image of the given state next-state-tick: on each clock tick, computes the next state From Animations to Structures Sample animations from Reactive teacher resources page

Workbooks- pg.19 Brainstorm Imagine that you have a data structure consisting of just a single number. Brainstorm what animations you could create with this data. What could that number represent? Brainstorm Imagine that you have a data structure consisting of just two numbers. Brainstorm what animations you could create with this data. What could those numbers represent?

Unit 4 What to Wear? What does wear(50) evaluate to? What does wear(100) evaluate to? What is the domain and range of the wear function?

What is the name of the variable in the wear function? Change the wear function to return the shorts outfit when its cold (less than 30 degrees). Challenge: Change the wear function to use Celsius degrees rather than Fahrenheit. Wheres the Jumper? Colorful Sun Workbook pg. 33: draw-sun

Extensions: Make the sun reset at the top of the screen when it falls below the horizon Change the color of the sky as the sun sets Share back different ways you could change the color of the sun/sky Unit 5

Keypresses & the Reactor Acting out: The reactor: directs the action draw-state: draws the image of the given state next-state-key: on each keypress, computes the next state Moving Character

Extensions: Change the character to one of your choosing, and add a background Add boundaries so your character stays within the scene Use the num-to-string function to display the coordinates at the top of the screen # num-to-string : Number -> String

Hunger level Decreases on each clock tick Decreases on each clock tick Sleep level ------ Your Virtual Pet Workbook pg. 38: Use the Animation Extension worksheet to make cats hunger increase by 10 when f key is presses, and sleep increase by 5 when s key pressed.

Workbook pg. 40: Use the Animation Extension worksheet to change the image of the pet when the game is lost Your Virtual Pet Extensions:

Find your own images to create a different virtual pet Stop the bars from overflowing some maximum. Add an x-coordinate to the PetState so the pet moves around, either on keypress or automatically. Add a costume to the PetState, then change the draw-pet function so that it changes the costume based on the pets mood (if a-pet.hunger <= 50, show a pic of the pet looking hungry) Personal Projects Create an animation or game from scratch!

Workbook pg. 43: Animation Design Worksheet Bootstrap:Reactive Features: Collisions Scores Levels Nested Structures Writing Pong

Implementation Connect with Us! / BootstrapWorld @BootstrapWorld Questions: bit.ly/BootstrapHelp Grab a photo! www.BootstrapWorld.org #BootstrapCS |

## Recently Viewed Presentations

• AQA Trilogy Science. Knowledge Organisers for All Topics. The information on each page is a summary of key information needed for each topic. It does not cover all content and is not intended as a replacement to other study resources.
• To increase effectiveness by means of operations automation in a paperless procedures. ... PCS is like a virtual table formed by the port community. A PCS is a system that can be viewed as a "virtual table" formed by the...
• Uber is a more established company, it is bigger, more marketing, work is more consistent and frequent. It offers more services such as Uber X, Uber XL and Uber Eats. Although Uber Eats may or may not be profitable to...
• The amount of space taken up by an object is known as the object's volume. Two things cannot share the same space because of their volumes. Liquid volume- measured in Liters (L) and Milliliters (mL); measured with a graduated cylinder...
• 1. 2. 3. Workflow of tablet-based data collection in off-line mode, although software new versions downloadable from central server . NSOM implements the Computer Assisted Personal Interviews (CAPI) by Android and Windows based tablets.
• nrhy;ypd; NtWngah;fs;. gjk; nkhop. fpstp. gjk; gfhg;gjk; gFgjk;
• On this slide, I plan to drive home the fact that an example or experience can be one that is pathetic, but that emotion is NOT the basis of the argument, more of an effect of a well-selected logical, perhaps...
• Ambulatory care is defined as any healthcare service or treatment provided in or out of a hospital setting that allows the patient to remain in the comfort of their own home. 4. STRATEGIC PLANNING FOR 2019 - 2023Review of the...