August 22-23 ECS.

Slides:



Advertisements
Similar presentations
Create a Simple Game in Scratch
Advertisements

Summer Computing Workshop. Introduction to Variables Variables are used in every aspect of programming. They are used to store data the programmer needs.
Create a Simple Game in Scratch
Mission Technology Introduction to Scratch! June 2007.
Scratch for Storytelling Dr. Ben Schafer Department of Computer Science University of Northern Iowa.
Mrs. Chapman. Tabs (Block Categories) Commands Available to use Script Area where you type your code Sprite Stage All sprites in this project.
Learn… Create… Program. Manipulation of Multiple Media Connects with youth culture Scratch is a new graphical programming language designed to support.
Scratch Understanding some programming techniques using Scratch Resetting, Parallelism and Events.
#nsta14 Using graphing / data visualization as a Playground for Literacy and Mathematics.
Adventures in Animation Introduction to Scratch! Michelle Venable-Foster June 2006.
What is Scratch? Scratch as Logo Dr. Ben Schafer Department of Computer Science University of Northern Iowa.
Mr. Wortzman. Tabs (Block Categories) Available Blocks Script Area Sprite Stage All sprites in this project.
INTRODUCTION TO THE SCRATCH PROGRAMMING ENVIRONMENT.
Ms. Deveny Second Semester  Introductions  Interview your table partner  Name  Why taking CPD  Computer experience  Favorite game?
Introduction to Scratch!
Go to your school’s web locker site school name.schoolweblockers.com) Your user name is the first letter of your first name, the first 4.
Partners Comp# Partner APartner B 1 Ancona, SamanthaManternach, Hailey 2 Black, RyanMcNeil, Maddie 3 Conger, KevinOhland, Rebecca 4 Day, MerciOtterbein,
Introduction to Scratch Scratch as Logo Dr. Ben Schafer Department of Computer Science University of Northern Iowa.
2015 CSE/EGR Summer Camps 1 Computer Science Concepts 1. What is an algorithm? 2. Binary information coding 3. Programming concepts via Scratch Designed.
Introduction to Programming G50PRO University of Nottingham Unit 2 : Introduction To Scratch Paul Tennent
Summer Computing Workshop.  This workshop is designed to introduce basic programming concepts through the use of the highly intuitive programming environments.
Game Maker – Getting Started What is Game Maker?.
Computer Programming Modeling a Passive Solar Home.
1 Project designed and created by M. Shajith Kumar.
From last time… Explore the blue commands from the motion menu Find at least three ways to get the sprite to move to the UPPER LEFT corner.
Introduction to Computer Programming - Project 2 Intro to Digital Technology.
Moving Sprites in Scratch Exploring Computer Science – Lesson 4-4.
Adventures in Animation Introduction to Scratch! Michelle Venable-Foster Barb Ericson Dec 2007.
Scratch Lesson 1. Creating an account Open the internet browser : Safari or Internet Explorer Type in the URL scratch.mit.edu Using your school computer.
Computer Programming Modeling a Passive Solar Home.
Computer Programming with Scratch JAOIT 8. Scratch Scratch is a programming language that makes it easy to create your own interactive stories, animations,
Introduction to Programming with Scratch Exploring Computer Science – Lesson 4-1.
Introducing Scratch Learning resources for the implementation of the scenario
JavaScript Part 1 Introduction to scripting The ‘alert’ function.
August 25 Intro to CS.
Introduction to Scratch
Create a Halloween Computer Game in Scratch
Broadcasting (Adding a new level)
August 31 Intro to CS.
Scratch for Interactivity
Scratch Unit Overview We are going to look at computer programming and how to create your very own computer game The piece of software we will be using.
ECS 9/7/17.
Intro to CS Monday, August 29
Intro to CS Monday, August 24
Adding Assignments and Learning Units to Your TSS Course
MS PowerPoint 2010 Week 2.
Microsoft Word Reviewing Documents.
Introduction to Object-Oriented Programming
Introduction to.
Learn… Create… Program
Getting Started with Scratch
Introduction to Scratch!
Go to =>
Learn… Create… Program
Unit 11 – PowerPoint Interaction
Welcome to SCRATCH.
Go to =>
Scratch for Storytelling
Go to =>
Go to =>
Learning Objectives Explain how selection is used to change a program output Decompose a problem with inputs to help design a program Describe the use.
Introduction to Object-Oriented Programming in Alice
Getting Started with Scratch
Introduction to Snap Programming
Getting Started with Scratch
Learn… Create… Program
Learn… Create… Program
Creating a Simple Game in Scratch
Presentation transcript:

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!