1. August 22-23
ECS

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

3. What can you build with legos?

4. Cellphone dock

5. A stadium

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

7. Programming can be easy

8. Snap!

9. (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.

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

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

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

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

14. 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)

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

16. 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 address
Log-in

17. Exercise 1: Create a SNAP! account

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

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

20. 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.)

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

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

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

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

25. Lab Exercise 2 Recap:

26. 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?

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

28. 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!

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

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

31. Lab Exercise 3 Recap:

32. 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!

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

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