August 22-23 ECS

Today Identify the parts of SNAP! by name. Give examples of blocks in each category Explain the function of common blocks (if, if/else, repeat, forever, pen down/up, …) Build, comment and run a simple SNAP! script

What can you build with legos?

Cellphone dock

A stadium

1:1 scale x-wing 5,335,200 bricks!

Programming can be easy http://tinyurl.com/bb20130904

Snap!

(formerly BYOB) is a visual, drag-and-drop programming language. It is an extended reimplementation of Scratch (a project of the Lifelong Kindergarten Group at the MIT Media Lab) that allows you to Build Your Own Blocks. It also features first class lists, first class procedures, and continuations. These added capabilities make it suitable for a serious introduction to computer science for high school or college students. SNAP! runs in your browser. It is implemented using Javascript, which is designed to limit the ability of browser-based software to affect your computer, so it's safe to run even other people's projects, even if you don't trust our competence or good intentions. SNAP! is presented by the University of California at Berkeley. It was developed by Jens Mönig at MioSoft Corporation, with design input and documentation by Brian Harvey at Berkeley, and contributions by students at Berkeley and elsewhere.

Visual, drag-and-drop programming language Allows you to “build your own blocks” Runs in your browser You can save your work “to the cloud” (formerly BYOB) is a visual, drag-and-drop programming language. It is an extended reimplementation of Scratch (a project of the Lifelong Kindergarten Group at the MIT Media Lab) that allows you to Build Your Own Blocks. It also features first class lists, first class procedures, and continuations. These added capabilities make it suitable for a serious introduction to computer science for high school or college students. SNAP! runs in your browser. It is implemented using Javascript, which is designed to limit the ability of browser-based software to affect your computer, so it's safe to run even other people's projects, even if you don't trust our competence or good intentions. SNAP! is presented by the University of California at Berkeley. It was developed by Jens Mönig at MioSoft Corporation, with design input and documentation by Brian Harvey at Berkeley, and contributions by students at Berkeley and elsewhere.

Sprites, stages, and scripts Your “characters” Stage Where things happen Scripts Programs that define behavior using blocks TIMING 5 MINUTES (23 TOTAL) ACTUAL 10 min (38 total) Sprite Show them the Lambda that gets pulled up in BYOB Click on random Sprite Button to show you can have multiple Create a square Sprite using Paint Grow/Shrink the sprite Stamp the sprite Stage Drag Sprites around so they get an idea Scripts Drop in a move block and click to show action Add a note sound and click to show sound Clip move-sound-move back-sound to show how things “snap” together Add green flag and stop script to show how you can start using the start/stop buttons Run in presentation mode Finally, show that different Sprites are independent by copying block over to other Sprite

The Workspace TIMING 3 MINUTES (18 TOTAL) ACTUAL 2 min (28 total) So now let’s really start diving into BYOB Raise your hand if you watched all the homework videos. Show me “thumbs up” if you feel comfortable with it, “thumbs sideways” if you are sort of comfortable, and “thumbs down” if you are looking for a lot more explanation today (based on response will determine how much time to use going over the basics) So let’s recap the basic pieces of the BYOB development environment

Blocks are .. The “language” you use for SNAP! Organized by color coded types | Able to be “snapped” together (and go inside each other as we will see later) Found with a right click TIMING 2 MINUTES (25 TOTAL) ACTUAL 2 min (40 total) You’ve already seen how thee blocks work in the simplest way Over the next few weeks we’ll be learning about many of the various blocks, or commands, that BYOB has to offer Please feel free to play and explore on your own The quicker you master these blocks, the more it helps you when it comes project time And by right mouse clicking on a block, you can get help on exactly what it does

Coordinate System TIMING 4 MINUTES (29 TOTAL) ACTUAL – ran out of time Now let’s talk about something that will be very critical in all the projects you do – where the sprite moves You’ll notice the top and bottom values, or the Y position, is between 180 and -180 Likewise, the right and left positions, or the X position, is between -240 and 240 So if I want the sprite to go to the upper right hand corner, what (x,y) coordinate would I tell it? Do it in BYOB: Goto(240,180) And how about the left edge in the middle? Do it in BYOB: But this time, Glide(-240, 0) NOT ENOUGH TIME You can always see the position and direction of the sprite above the scripting area And those little buttons to the left of the sprite will tell the sprite if it can freely rotate, or just face left and right, or if it can’t rotate at all Now let’s try that again, but let’s have the sprite look in the direction it’s moving PointInDirection(-90) Glide(-240,0)

Project Management Save your projects …. … early, and often! Use “Save As…” to create backup copies Make sure you are working on the right version. TIMING 1 MINUTE (30 TOTAL) ACTUAL – ran out of time Show them how to save and then open the project we are working on When you name your project, put “Lesson 1” somewhere in the title for easy future reference

Exercise 1: Create a SNAP! account Open a browser with Java enabled (recommend Chrome) Find snap.berkeley.edu Click on Open Snap! Create an account using an e-mail address Log-in

Exercise 1: Create a SNAP! account

What worked? What was difficult? Lab Exercise 1 Recap: Discussion What worked? What was difficult?

The SNAP! Window Tabs (Block Categories) Available Blocks Stage Sprite All sprites in this project Script Area

The Stage The Stage is where the action happens You will add sprites to the stage and they will act based on their scripts Notice the coordinates in the lower-right (in SNAP! you may need to drag X and Y coordinates from the left.)

Sprites Sprites are the main elements of your SNAP! programs Each sprite has one or more scripts that determine how the sprite acts under different circumstances Sprites can have different costumes that change their appearance SNAP! provides a bunch of built-in sprites and costumes, or you can design your own

Writing Scripts Scripts control sprites trigger Scripts control sprites Scripts can also apply to the stage All scripts must have a trigger and some operations When the trigger happens, the sprite will perform the operations in order Question: What does this script do? operations

Blocks The different types of blocks are listed in the upper left of the SNAP! window “Motion” blocks cause sprites to move “Looks” blocks change a sprite’s appearance Each block corresponds to one “action” Notice the shapes! When a script runs, the actions occur in the order in which the blocks appear in the script.

Exercise 2: Write a script Write a script to do the following: Move the sprite 100 steps Have the sprite say your name for 3 seconds Turn the sprite around and move it back where it came from Have the sprite say “Hello World!” for 5 seconds Advanced Topic Initialize your Sprite to always start in the lower left corner of the Stage

Lab Exercise 2 Recap:

Comments If you right-click on the script area, you get an option to “add comment” Comments are used to describe what’s going on or otherwise annotate code In SNAP! they look like this: (on a Mac you may need to enable Java) Question: Are comments executable code?

Comments SNAP! comments can be attached to blocks to indicate to what they are referring:

Comments You should use comments to: Describe the basic, high-level behavior of any script Explain anything potentially unclear or tricky Explain why you chose to do something a certain way if there were multiple options Get in the habit of using comments now. You’ll be graded on them!

Drawing Blocks in the Pen category allow your sprites to draw things on the stage The block puts a sprite’s pen down on the stage. The block picks the pen up. When a sprite’s pen is down, moving will cause it to draw. You can also change the pen’s color, size, or shade.

Exercise 3: Write a script Write a script to do the following: Draw a square box in orange pen Draw two square boxes in red pen, where each box does not touch the other

Lab Exercise 3 Recap:

Review: Today Identify by name the parts of SNAP! Give examples of blocks in each category Explain the function of common blocks Build, comment and run a simple SNAP! script Script, Blocks, Stage, Sprite Controls the actions of the Sprite Hello World!

The importance of a good foundation How many of you are in Speech and Debate? You know the importants of having a good foundation before you start competing? How many of you play a sport for Leland, or a club team? You recognize doing drills at the start of the season, and for those of you that have played your sport for several years, you appreciate the need for a solid foundation as you get father along. The coge.org video talked about needing good math skills – like multiplication tables. Here’s an example of a home builder that build on a shakey or sketchy foundation. Why do we bring this up? Well, some of you – maybe ½ of you – have already programmed in some manner. And you might be thinking that using SNAP! is taking a step backward. You might have already used Java or Python or Ruby on Rails. This class uses the SNAP! IDE to teach an reinforce the basics that you will need in the 2nd semester and in the AP CS class next year. So while you might be tempted to be frustrated using a graphical IDE, focus on mastering the foundational concepts.

Reminders Read Chapter 1. Quiz in two weeks (Sept 8) Test on , Sept 1 on computers, computational thinking & SNAP!