picoboard and scratch introduction to programming and physical computing
TRANSCRIPT
![Page 1: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/1.jpg)
![Page 2: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/2.jpg)
PicoBoard and ScratchIntroduction to Programming and Physical Computing
![Page 3: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/3.jpg)
Workshop Overview
• Introductions• The Learning Cycle (STEM STEAM)• What is physical computing• Introduction to Scratch and animating a
character• Connecting to the outside world -- Plugging in
the picoboard• Slider
• Additional resources
![Page 4: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/4.jpg)
The Learning Cycle
Time to play, reflect, question and redesign
![Page 5: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/5.jpg)
General Rules…
Raise your hand if you have a question.Be respectful.When I raise my hand…Share your findings with the people
near you.Poke around, experiment, and have
fun…Imagine, create, and play!!!
![Page 6: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/6.jpg)
About Us
SparkFun Electronics is all about creation, innovation and sharing information. We want to get you excited about cutting edge electronics technology with our hands on educational kits.
![Page 7: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/7.jpg)
What is Physical Computing
Physical computing, in the broadest sense, means building interactive
physical systems by the use of software and hardware that can sense and respond to the analog
world
-Wikipedia
![Page 8: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/8.jpg)
Resources
This PPT http://bit.ly/SparkFunPicoScratch001
http://scratched.media.mit.edu/sites/default/files/Getting_Started_With_PicoBoards.pdf
http://www.picocricket.com/picoboard.html
![Page 9: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/9.jpg)
What is Scratch?
Scratch is a programming language that makes it easy to create your own interactive stories, animations, games, music, and art -- and share your creations on the web.
Named “Scratch” because it’s embodied after how DJs re-mix the work of other users. It is intended that users download and re-mix other users’ projects. Welcome to Open Source Software
http://scratch.mit.edu
![Page 10: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/10.jpg)
Scratch
![Page 11: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/11.jpg)
With the PicoBoard, your Scratch™ projects can sense – and respond to – things going on in the world outside your computer.
![Page 12: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/12.jpg)
Creating your first Animation
![Page 13: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/13.jpg)
Parts of the Screen
Scripting Area Here’s where you build your
program – stacking blocks
togeteher to create unique
functions.
Click & Drag
Palette – Each of the 8 buttons will show you different functions
Rotation Settings– Control how the sprite rotates:
- rotate freely- face left \ right- locked (no rotation)
Sprite Toolbar – Duplicate, Delete, Grow, Shrink
![Page 14: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/14.jpg)
Scratch Exercise 1Choosing a Sprite and making it move in 4
directions
![Page 15: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/15.jpg)
Choosing your Sprite(Import from library)
A Sprite is any character or object in your game. Sprites can move and be active or be props that stay still. We will choose a Sprite character that will move about your screen.
•Click on the Costumes Tab
•Click ImportSelect a Folder (Animals, People, Things)
•Pick a Sprite! (Double-Click)
![Page 16: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/16.jpg)
Choosing your Sprite(Camera!)
If your computer has a built-in camera, you can also take a picture of something you’ve drawn or created.
You can use this to create stop-motion animations (think clay-mation \ Gumby…)
Or… you can use the Paint option window to draw your own sprite
![Page 17: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/17.jpg)
Picking a Background (Stage)
Click on the Stage (lower right)
Click the Backgrounds Tab
Use the Paint / Import / Camera feature to pick your background.
![Page 18: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/18.jpg)
Making Your Sprite Move
• Sprites can not do anything by themselves. A Sprite's action comes from the scripts in the script window.
• Scripts are the instructions for exactly what the sprite will do. You drag these instructions from the Tile pane into the "Scripts" pane.
• Tiles fit together like a puzzle to create the instructions.
![Page 19: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/19.jpg)
Event driven instructions
Click the Control button on the scripting palate.
There are 3 different events that you can use to trigger an instruction (code).
Click and drag one of these over to the scripting area.
![Page 20: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/20.jpg)
Making Your Sprite Move…
• Click on the "Motion" button.
• Drag "point in direction [90]" over to the Scripts window and connect it to the previous command.
• Drag the “move [10] steps" tile and connect it.
• Test it
![Page 21: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/21.jpg)
Click on
Add the next costume block to our script.
Test it
Adding animation…
Scratch moves around – but doesn’t look like she’s actually walking.
![Page 22: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/22.jpg)
Play time…
Build an animation to introduce yourself to the class. Choose what key you will use to start.
Play with the various features / programming blocks in scratch.
Here are some examples:http://scratch.mit.edu/projects/2665999/
http://scratch.mit.edu/projects/2001868/
http://scratch.mit.edu/projects/912524/
![Page 23: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/23.jpg)
Back to building simple motion
Save your introduction script.
All files save as *.sb
Start a new file that looks like this
![Page 24: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/24.jpg)
Adding other controls make your sprite move backwards with another
key press.• Right-click on the
code block to copy (duplicate) what you’ve already done.
• Click the box where it says space and change this to a different key.
![Page 25: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/25.jpg)
Voilla!
You’ve just created “game controls” for your character.
What else can you do?
![Page 26: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/26.jpg)
Plug it in the PicoBoard…
![Page 27: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/27.jpg)
Sensors
![Page 28: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/28.jpg)
Sensor Values
By default, all sensor values vary from 0 to 100.
Use this with Control Blocks to create conditional statements and integrate decision-making.
![Page 29: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/29.jpg)
Light Value
One of the examples in Scratch uses the light sensor in an interesting animation of the Sun.
Your sprite can react to light or shade using the data coming from this sensor.
![Page 30: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/30.jpg)
Slider Value
This sensor is useful because instead of being a binary sensor, like the button sensor (which turns on or off), this sensor changes continuously on a scale from 0 to 100.
![Page 31: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/31.jpg)
Sound Value
For example, a sprite can jump up in surprise if you yell into the sensor, but perhaps not do anything if you simply whisper into the sensor.
Your sprite can be programmed to react when this sensor detects sound.
![Page 32: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/32.jpg)
Button State (Boolean)
Make your sprite jump or change colors.
When you stop pushing the button, the sprite will go back to its original state.
Your sprite can be programmed to react when you push this button.
![Page 33: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/33.jpg)
Example: Slider Control
Start with the slide potentiometer.Input Values: 0 – 100
Take these blocks and make this:
![Page 34: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/34.jpg)
Scratch
Scratch rotates from 0 degrees to 100 degrees
How can we use this to get her to rotate a full circle?
![Page 35: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/35.jpg)
Math Lesson:Rotating a full circle = 360
deg
![Page 36: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/36.jpg)
Rotating a full circle = 360 deg
Using the
palette, pull out the divide and the multiply blocks.
Combine these to get the desired formula.
![Page 37: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/37.jpg)
Like this?
![Page 38: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/38.jpg)
Drop this into where you had the angle before
![Page 39: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/39.jpg)
Conditional (Boolean) Statements
<Boolean statement>
Can be: TRUE or FALSE
Assemble these together:
if (<>)
{
// do something
}
![Page 40: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/40.jpg)
Put this all into the forever() loop
![Page 41: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/41.jpg)
Making it better?
Add the pen to Scratch so you can track the path of the animation.
Can you draw out your initials with this?
Can you draw a smiley?
![Page 42: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/42.jpg)
Graphical Effects
• Play around with the different graphical effects under Looks
• Drop the slider control in to add control.
• Remember this needs to be inside the forever()
![Page 43: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/43.jpg)
Building a game.
Step 1: Concept designStep 2: StoryboardingStep 3: Prototype / CodeStep 4: User beta testingStep 5: Presentation
![Page 44: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/44.jpg)
Adding other features
Using the slider to control left-right (x position)
Use the button to “jump”
![Page 45: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/45.jpg)
Creating a new costume
Click Copy
Click Edit on the new costume (costume3)
![Page 46: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/46.jpg)
Use the Paint Bucket tool to color in Scratch
![Page 47: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/47.jpg)
When the light level gets dark, change costume
What are the light levels in this room?
After you click the checkbox, you should see this upper left corner
![Page 48: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/48.jpg)
Setting thresholds
Use the Greater Than \ Less Than Comparison blocks and the if() block to control when your character changes costumes.
![Page 49: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/49.jpg)
Additional Challenges for Today
• Use the slider to control the direction of the character.
• Use the light sensor, program a sprite to hop up and down whenever a shadow passes by.
• Use the slider and button to control a character in a video game.
• Use the sound sensor, you can make a sprite change how it looks whenever there is a loud sound.
• Other ideas???
![Page 50: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/50.jpg)
What else can Scratch do in my class?
![Page 51: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/51.jpg)
Graphing & Data Logging with Scratch
http://bit.ly/18NCuMD
![Page 52: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/52.jpg)
Other Cool animations
https://www.dropbox.com/s/ar7gcdoco13vu85/Day%20Dream.sb
![Page 53: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/53.jpg)
Questions?
![Page 54: PicoBoard and Scratch Introduction to Programming and Physical Computing](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649da65503460f94a925a3/html5/thumbnails/54.jpg)
www.sparkfun.com6175 Longbow Drive, Suite 200
Boulder, Colorado 80301