Lesson 4: Animation - Technology Will Save Us€¦ · //Animation code from our Animation generator app! //Replace this with yours! and //Set up Gamer gamer.begin();} Then press cmd

Lesson 4: Animation

Introduction:

Goals

Activity Checklist

Test your project

Save your project Save

Page 1 - Lesson 4: Animation

1. Make an image using the Animator software2. Upload it to your Arduino 3. Animate your name 4. Design and create your own animation

The custom built Gamer Animator Generator software lets you design animations on the computer screen, and it then creates the code to upload tothe Arduino, so you don’t have to. It’s a fun and easy way for you to get to grips with the DIY Gamer and its programming environment.

Keep track of your progress by ticking off the boxes below:

Activity Checklist

Open up the AnimGenerator Software and lets look at the functions along the top bar. At the bottom of the screen you will also see keyboard commands for the following functions. These will you to speed up making your animation.

Copy code - this will copy final animation code onto the clipboard

Clear all frames - wipes everything back to blank if you want to start again

Previous & next frame - toggle through your animation frame by frame

Add a blank frame - adds a new blank frame from the point you are at

Duplicate current - copies the existing frame so you can change it

Remove a frame - deletes the current frame

Paint mode - to fill squares with white, this will turn the LED on

Eraser mode - to return squares to green, this will turn the LED off

Toggle playback - this is your play/pause button

Save animation - save to a designated place

Load animation - open an existing animation

Delay - this slider controls the speed of playback. We can change this later in the code.

Frame number- this shows which frame you are looking at, and the total number of frames.


Lesson 4: Animation

Step 1: Make an image

Get to know the Animation Generator software

Load

Save

delay: 200

1 of 1Frame number


Activity Checklist

Use the paint mode tool to draw out the image you want to see on you Gamer’s display. This can by anything from a picture to a pattern. When you select a square using the paint tool it will turn that LED ON.

If you make a mistake simplay select the eraser mode tool from your toolbar and turn the LED’s you dont want to be on by clicking on them. Green squares mean the LED on that square will be OFF.


Lesson 4: Animation

Step 1: Make an image

Draw your first image using the Animation software

Click on the icon to This saves it to the same folder as your AnimGenerator application

Click on copy code

Hurrah, This has now generated all the code that is needed and saved it onto the clipboard. You can then paste into an Arduino Sketch and upload onto the DIY Gamer for viewing.


Save save your image.


Activity Checklist

Step 2: Upload your image to Arduino

Lesson 4: Animation


1. Open up your Arduino Software

This is the code for a basic animation that we are going to edit. You’ll see the lines of ones’s and zero’s like those from the image you uploaded to your Gamer earlier, but more of them as there are multiple images to make your animation!

Delete all of the existing array information between:

//Animation code from our Animation generator app!//Replace this with yours!

and

//Set up Gamergamer.begin();}

Then press cmd (or ctrl if using pc) and VThis will paste the animation code that you have saved on the clipboard.

Delay allows you to control how quickly the animation is played backIt is measured in milliseconds. Faster - smaller number, pausing for a smaller amount of time between each frame. Slower - larger number, pausing for longer between each frame. 1000 milliseconds is 1 second.200 millisecond delay would show 5 frames a second100 millisecond delay would show 10 frames a second40 millisecond delay would show 25 frames a second – This is the speed of standard animation. Find the line of code:delay(200);This is playing back with a delay of 200 milliseconds between each frame, unless you changed this in the animation generator. Decide on the speed of playback for your ani-mation and edit this number.

2. Open > Gamer > Animation Example

3. Paste in your animation

4. Adjust the speed


Activity Checklist


Lesson 4: Animation


This is the code for an image.

The 8 rows of one’s and zero’s are the parts of code which tell the Gamer’s LED Matrix to turn each individual LED on or off. Each 1 means the LED is on and each zero means the LED is off.

Other bits of familiar code are:

5. Right click and paste your image code into the Arduino sketch.

Click the tick that looks like this check the code.

Mistakes

Code is very fussy and likes everything to be just so. When you compile, any mistakes are listed in the bottom bar in red. Missed a capital letter? Missed semi-colon? Missed a curley bracket? It will be there somewhere.

Treat is as a spot the difference game. When you see ‘Done Compiling’ in the status bar, you are now ready to upload it to the Arduino.

Test your project

Save Save your project

Click the arrow facing downwards that looks like this to save your code.

Loop - loops continuously go through all the frames you have created.

Standard setup - always used to setup the DIY Gamers functions and runs once at the begining to set up the DIY Gamer functions.

to verify your project and

Lesson 4: Animation



Activity Checklist

1. Plug the USB cable from the laptop into the Arduino

The board should now have the tiny green ON LED lit to show it is getting power.

2. Select the board

Go to the tools menu and select the board, Arduino Uno

3. Select the serial port

Go to the menu Tools > Serial Port and select the port that the Arduino is connected to. This name should be something like /dev/tty.usbmodem on a mac, or COM3 or higher on a PC.

To find out, you can disconnect your Arduino board and re-open the menu; the entry that disappears should be the Arduino board. Reconnect the board and select that serial port.



Step 2: Upload to the Arduino

Test your project

Click the green arrow to transfer your code to the Arduino.

Wait a few seconds, you should see the RX and TX LEDS on the Arduino board flashing.

If the upload is successful, the message “Done uploading.” will appear in the status bar.

Your DIY Gamer’s LED Matrix should now be showing the beautiful image you created using the Animation Software!

Step 3: Animate your name

Activity Checklist

Lesson 4: Animation


Animations are moving images that are broken down into small steps. Think of a simple way of animating your name. The letters could flash one after the other or maybe use your initals and get more creative. Use the paper template to design each frame of your animation by colouring blocks to show LED’s that are ON or leaving them blank to show they are OFF.

Plan and design how you want your name animation to look

Make sure you know exactly how your animation will work before starting to animate it using the software.

Test your project


Step 3: Animate your name

Activity Checklist

Lesson 4: Animation


Test your project

Use the same method as you used earlier to draw the first frame of your animation in the squares. Remember, square that you paint will be the LED’s that we turn on.

...or duplicate the current frame, depending on what your animation is like. Draw frame 2. Or the second letter of your name.

The number of frames you have will depend on how long your name is.

Press the playback tool to view how your animation will look. Happy with your animation? Time to tweak if not, change speed, add or delete frames. You decide.

2. Draw your first frame

1. Use the animation worksheet to plan out how your animation will work

3. Add a new frame

4. Keep going until you have added all the frames

Click on the icon to save your animation. This saves it to the same folder as your AnimGenerator application


Save

Click on copy code

Hurrah, this has now generated all the code that is needed and saved it onto the clipboard. You can then paste into an Arduino sketch and upload it onto the DIY Gamer for viewing, exactly how you did earlier to see your image. See page 4 if you can’t remember how.


Step 4: Create your own animation

Activity Checklist

Lesson 4: Animation


3. Test

Test your project

First think about what your animation will have in it. Are there characters? What are they doing? Where are they? Once you have decided this, use your animation worksheet to plan out your animation frame by frame.

When you are happy with your animation design, draw it using the Animation Generator software.

Press the playback tool to view how your animation will look. Happy with your animation? Time to tweak if not, change speed, add or delete frames. You decide.

Just as you did on the previous page.

1. Use the worksheet to plan your own animation

2. Draw your animation using the software

Click on the icon to save your animation. This saves it to the same folder as your AnimGenerator application


Save

Click on copy code

Hurrah, This has now generated all the code that is needed and saved it onto the clipboard. You can then paste into an Arduino Sketch and upload onto the DIY Gamer for viewing.


Step 4: Create your own animation

Lesson 4: Animation


Mistakes

Code is very fussy and likes everything to be just so. When you compile, any mistakes are listed in the bottom bar in red. Missed a capital letter? Missed semi-colon? Missed a curley bracket? It will be there somewhere.

Test your project

Click the green arrow to transfer your code to the Arduino.

Wait a few seconds, you should see the RX and TX LEDS on the Arduino board flashing. Your DIY Gamer’s LED Matrix should now be a moving array of twinkling lights.

Well DoneYou have designed and uploaded an animation and controlled it’s speed by changing the code. Next you will learn to use light sensor (light dependent resistor) to control the DIY Gamer. How cool will that be?

Activity Checklist

Challenge:

Can you make the animation go faster or slower?Can you make an animation that loops perfectly?Can you have two objects on the screen moving at the same time?Can you make something appear to spin on screen?

Click the tick that looks like this check the code.to verify your project and

When you see ‘Done Compiling’ in the status bar, you are now ready to upload it to the Arduino.

Documents

Lesson 4: Animation - Technology Will Save Us€¦ · //Animation code from our Animation generator app! //Replace this with yours! and //Set up Gamer gamer.begin();} Then press cmd