Embed Size (px)
Citation preview
Lab Report DeVry University
College of Engineering and Information Sciences
Course Number: CEIS-100
Professor:
Lab Number: 6
Exercise Title: Animation Programming
Submittal Date: Click here to enter a date.
OBJECTIVES
Get a basic understanding of programming animation.
ASSUMPTIONS
In this lab, you will access Scratch from your Raspberry Pi desktop and create an
environment where a character will animate on your screen.
Part A:
SHORT TUTORIAL
1. Turn on your Raspberry Pi computers and log in.
2. Use startx to access the desktop.
3. To start Scratch, double click on the Scratch icon or select it from the Programs
menu at the bottom left of the screen.
4. The screen is divided into four areas.
Stage (top right)
Sprite list (bottom right)
Scripts Area (tall middle panel)
Blocks Palette (left)
5. Sprite List—these are the characters in the game. You can make these characters do things.
6. Blocks Palette—essentially, this is the programming language. These are commands that you
can use to animate your sprite.
7. Scripts Area—this is where you create your program. Essentially, it is just a matter of pulling
blocks from the Block Palette into this area to create your program.
8. Stage—this is where all of the action takes place.
9. Experimenting with Scratch is quite easy and a lot of fun. Try out different blocks. You can
do that by simply clicking on them in the Blocks Palette. For example, if you click on the
block “move 10 steps,” you will see your sprite move forward. If your sprite ends in a
position on the screen that you don’t want, you can simply mouse over the sprite and move it
to another area.
10. Not all blocks will work. Some have to be combined with other blocks. Also, be patient.
There could be a significant lag between clicking on one command and then trying another.
11. Creating a script is easy. Just drag a block from the blocks Palette to the scripts area. You
will note that the blocks seem to fit into one another like a puzzle. And you can easily grab
one and move it around. Below is a short script that I created. If you read the blocks, it
simply
sets the sprite to x position 0 and y position 0 on the screen. The sprite then moves forward
45 steps, turns clockwise 15 degrees, and moves another 45 steps. And so on. By clicking on
the “set y to 0” block, the script activates, and I can see the sprite move according to these
directions.
12. You can save your work simply by using File and Save As at the top of your screen. You can also create a link.
PROCEDURE
1. Research the Internet for more information on Scratch.
2. Create a script that animates two objects on the screen.
Take a screenshot of your game below and share your project online. This will give you a link to
share.
Part B
1. Create a website with the Raspberry Pi, showing off your scratch project.
2. In this lab, we will create a simple website with the Pi. We will be using HTML and creating a
website to advertise your new scratch game.
Some of the commands that we will use are below (from webmonkey
http://www.webmonkey.com/2010/02/html_cheatsheet/ ):
Basic Tags
<html></html> Creates an HTML document
<head></head> Sets off the title and other information that isn’t displayed on the web page itself
<body></body> Sets off the visible portion of the document
Body Attributes
<body bgcolor="pink"> Sets the background color, using name or hex value
<body text="black"> Sets the text color, using name or hex value
<body link="blue"> Sets the color of links, using name or hex value
<body vlink="#ff0000"> Sets the color of followed links, using name or hex value
<body alink="#00ff00"> Sets the color of links on click
Text Tags
<p></p> Creates paragraph text
<hl></hl> Creates the largest headline
<h6></h6> Creates the smallest headline
<b></b> Creates bold text
<i></i> Creates italic text
<tt></tt> Creates teletype, or typewriter-style text
<cite></cite> Creates a citation, usually italic
<em></em> Emphasizes a word (with italic or bold)
<strong></strong> Emphasizes a word (with italic or bold)
<font size="3"></font> Sets size of font, from 1 to 7
<font color="green"></font> Sets font color, using name or hex value
<ul></ul> Creates a bulleted list
<li></li> Precedes each list item, and adds a number or symbol depending upon the type of list
selected
<img src="name"> Adds an image
Links
<a href="URL"></a> Creates a hyperlink
<a href="mailto:EMAIL"></a> Creates a mailto link
<a href="URL"><img src="URL"> </a> Creates an image/link
<a name="NAME"></a> Creates a target location within a document
<a href="#NAME"></a> Links to that target location from elsewhere in the document
We will start to create a simple website. Turn on your Raspberry Pi. Click on Menu->
Accessories-> Text Editor. This will open the text editor. You can type all of your code in here.
Save it in your /home/pi home directory as mywebpage.html.
The example below is about the scratch project that I created. Type the following code
into the text editor. Replace "your name" with your name. You will notice that each opening tag
also has a closing tag. Be sure that when you are creating your website that you include a closing
tag.
<html>
<head>
<title>Your name website</title>
</head>
<body>
<h1>My Scratch Program</h1>
</body>
</html>
Save it as mywebpage.html. Open the web browser by going to Menu->Internet->Web Browser.
Click on the gear in the upper right-hand corner and choose Open.
Choose the mywebpage.html. Open the webpage. (Note: On some browsers, pressing ctrl + o
will allow you to open a file.) You should see something like the following:
Now we want to add some more elements:
We will add paragraph text, change the text color, add bold or italics for emphasis, add a list, a
hyperlink, and an image. The image must be in the same directory as the mywebpage.html. We
will use the tags listed above to accomplish these tasks.
<html>
<head>
<title>Gina Cooper's website</title>
</head>
<body>
<h1>My Scratch Project</h1>
<p>Check out my <b>awesome</b> game that I made with scratch! I thought it would be fun to
have a bee chase a cat in scratch, so I added an additional sprite (the bee) and a <font
color="orange">desert background.</font></p>
<p>In my game, the cat will move around in circles, then move towards the mouse. While it
moves, a pen will draw the route. The bee will follow the cat. Hopefully, the cat won't get stung!
Here is the link to my project:
<a href= "https://scratch.mit.edu/projects/83947834/"> link</a></p>
<ul>Some of the actions in scratch that I chose are:
<li>Repeat loop (5 times)</li>
<li>Forever Loop</li>
<li>Pointing towards the other sprite</li>
</ul>
<p>I also took a screenshot of my game, too! I hope that you enjoy playing it! </p>
<img src="scratch.png">
</body>
</html>
The following image is the web page in the browser. Add in your own information and create
your website on the Pi! Take a screenshot using scrot, and paste the code and screenshot below:
